Hugo でブログの多言語対応をする

📢 この記事は ChatGPT によって翻訳されました

はじめに

情報を読む機会が増えると、他言語で記事を書きたくなることってあるよね（最近の作品はだいたい多言語対応だし）。
それに、卒論で多言語対応を入れて以来、自分が作るツールやデザインもいつのまにか多言語対応を意識するようになってきた。

たとえば最近書いた https://github.com/yexca/yasumiProject この練習用のプロジェクトにも多言語化を入れてみた（ただし古くさすぎて微妙だった……モダンなやつを https://github.com/yexca/yasumiProject-frontend 別で作成中、できれば完成まで続けたい）。

それで、ふと自分のブログを見てみたら、多分一番長く付き合ってる作品なのに、まだ多言語化してなかった。
もちろん基本的に簡体字で記事を書いてるからってのもあるけど、 https://jekyllblog.yexca.net/ 前のブログでは UI の一部が中国語、一部が英語になってて、正直ごちゃごちゃだったと思う。
自分は読めるけど、他の人にはちょっとわかりづらいかもって感じだった。

Jekyll のときは頑張って多言語化しようとしたけど、うまくいかなかったので Hugo に乗り換えた（Hugo はネイティブに多言語サポートしてるから）。
ただ、テーマによって構造が結構違う。自分が今使ってるテーマはカテゴリ・タグの扱いが前とは全然違うから、カスタムする必要がある。

この記事、結構ざっくりしてる。
というのも、多言語設定はほぼテーマ依存で、自分もテーマのサンプルを参考にして設定したから、あんまり書くことがない。
（とはいえ、Hugo の公式ドキュメントはめちゃくちゃ丁寧）

環境

Docker で Hugo のコンテナを使ってるから、環境構築はほぼノータッチ。
使ってる環境については https://blog.yexca.net/archives/182/#%E5%8D%9A%E5%AE%A2 をどうぞ。

ブログの新規作成

新しい Hugo サイトを作成：

1
hugo new site blogName

フォルダに移動：

1
cd blogName

Git 初期化：

1
git init

テーマを追加（ここでは hugo-theme-stack を使用）：

1
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

hugo.toml にテーマ設定を追加：

1
theme = 'hugo-theme-stack'

ローカルでプレビュー：

1
hugo server

ドラフト記事も含めてプレビューする場合：

1
hugo server -D

一部の変更（設定ファイルやページ構成など）が反映されない場合はキャッシュを削除：

1
hugo --cleanDestinationDir

本番ビルド（public/ フォルダに生成される）：

1
hugo

多言語対応

設定ファイル（自分は yml 形式を使用）にて、デフォルト言語を指定：

1
2
defaultContentLanguage: 'zh-cn' # デフォルトの言語コード
defaultContentLanguageInSubdir: false # デフォルト言語に言語コード付きのURLを使うかどうか

各言語の設定は以下のように：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
languages:
  zh-cn:
    contentDir: 'content/zh-cn'
    disabled: false
    languageCode: 'zh-cn'
    languageDirection: 'ltr'
    languageName: '简体中文'
    title: "yexca'Blog"
    weight: 1
  zh-tw:
    contentDir: 'content/zh-tw'
    disabled: false
    languageCode: 'zh-tw'
    languageDirection: 'ltr'
    languageName: '繁體中文'
    title: "yexca'Blog"
    weight: 2

フォントの多言語対応については： https://blog.yexca.net/archives/240

記事の書き方

Jekyll と違って Hugo の記事作成はちょっと複雑。特に多言語化すると、フォルダ構成やルールが増えるけど、そのぶん柔軟性も高い。

まず、上で設定した各言語に合わせて content/zh-cn や content/zh-tw といったフォルダを作成する必要がある。

テーマによって、どのフォルダに記事を置くかが決まってることもある。たとえば stack テーマの場合：

1
2
3
params:
    mainSections:
        - posts

つまり、簡体字の投稿は content/zh-cn/posts に置くのが推奨される。（他にも指定されてるフォルダがある場合は、テーマの例を見てね）

記事作成例（タイムゾーンを Asia/Tokyo に指定して新規作成）：

1
TZ="Asia/Tokyo" hugo new content/zh-cn/posts/test.md

タイムゾーンを指定しない場合は UTC になる。自分は Jekyll に慣れてるから、いちいち時間を書くのが面倒でこうしてる。

テンプレートは blogName/archetypes/ にあるので、yml 形式に変更することも可能。

はじめに

環境

ブログの新規作成

多言語対応

記事の書き方

参考記事