ブログ運用ノウハウ

Ghostブログに英語ページを作成してみた【試験運用】

Ghostブログに英語ページを試験導入。日本語記事と英語記事を別テンプレート・別URLで管理する構成を解説。Gemini APIでの自動翻訳とObsidianプラグイン連携により、運用コストを抑えつつ多言語対応を実現する具体的な手順を紹介します。

※本記事は広告を含みます

どうも、職業エンジニアです。
明日から社会復帰ということでなんとも言えないテンションになっていますが、とりあえず今日も面白いことをしていきたいと思います。

完成イメージ

実装は以下のイメージで実施しました。

英語ページと日本語ページは別記事の扱いとする
英語ページと日本語ページのテンプレート（GhostのUIを作る資材）は別にする
記事投稿時に英語テンプレートを選択することで、内部的に英語ページとみなす

他の方法として、1記事に日本語と英語の文章を入れて分岐するという案もありましたが、後に「やっぱり英語ページ要らなくね？ブラウザの翻訳機能で充分じゃね？」となった時に切り離しやすいようこの構成にしています。

こんな感じの構成になりました。資材は増えてしまいましたが、各資材に分岐を入れるよりかはこちらの方が役割が分かりやすくて好きです。

英語対応に必要だったこと

さっそく英語版ページを作るために必要だった要素を紹介していきたいと思います。

routes.yamlの修正

GhostにはURLルーティングのファイルが用意されているので、これで英語ページと日本語ページを区別します。これをすることで、以下のようなURL構造となります。

routes:

collections:
  /en/:
    permalink: /en/{slug}/
    template: index-en
    filter: tag:en
  /:
    permalink: /{slug}/
    template: index
    filter: tag:-en

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

英語版UIの作成

上述したように、英語版用のテンプレートを作成しました。初めは日本語、英語両方とも表示要素を同じにしようと思っていましたが、関連記事やランキングなどが言語で混合してしまう事象があったため、英語版は少し表示要素を変更することにしました。

記事投稿の運用ルールを決定

英語記事を作成するにあたり、以下のルールを設けました。具体的には以下の3点です。

記事にはタグ「en」を付与する
記事のスラッグは「日本語記事のスラッグ-en」とする
記事投稿時に英字テンプレートを選択する

ここで設定された情報を元に、日本語ページと英語ページが混同しないようスイッチするようにしています。

英語記事の本文について

筆者は英語が堪能なわけではなく、もちろん英語の文章を書くこともできません！なので、Gemini APIを利用して翻訳することにしました。ありがとうGemini。AIがなかったら英語ページを導入してみようとも思わなかったんじゃないかな。

なお、投稿については先日実施した
ブログ投稿用にObsidianプラグインを作った
のプラグインを改造し、投稿時に自動で英語記事を作成＆投稿するようにしています。

日本語記事を普段通り執筆するだけで英語記事も併せて生まれるので、運用コストはゼロです！やったね。

最後に

思い付きでやってみましたが、果たしてアクセス増に効果があるのだろうか。。未知数ですね！