Ghostブログに英語ページを作成してみた【試験運用】
Ghostブログに英語ページを追加する具体的な実装構成と手順を解説します。routes.yamlでのURLルーティング設定や英語版UIテンプレート作成、運用ルールを詳しく紹介。Gemini APIと自動投稿で運用コストゼロを実現する方法も。
※本記事は広告を含みます
どうも、職業エンジニアです。
明日から社会復帰ということでなんとも言えないテンションになっていますが、とりあえず今日も面白いことをしていきたいと思います。
完成イメージ
実装は以下のイメージで実施しました。
- 英語ページと日本語ページは別記事の扱いとする
- 英語ページと日本語ページのテンプレート（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プラグインを作った
のプラグインを改造し、投稿時に自動で英語記事を作成＆投稿するようにしています。
日本語記事を普段通り執筆するだけで英語記事も併せて生まれるので、運用コストはゼロです！やったね。
最後に
思い付きでやってみましたが、果たしてアクセス増に効果があるのだろうか。。未知数ですね！
