多言語化してhugo serverするとメイン言語以外の静的ファイルがNet Foundになる問題の解決策

多言語化サイトのhugo serverの挙動

例えば、

• 日本語版 (example.com/)
• 英語版 (example.com/en/)

という構造で、HUGOサイトを多言語化をしていた場合、hugo serverで立ち上がるローカルサーバーは、

• 日本語版 (localhost:1313)
• 英語版 (localhost:1314/en/)

で立ち上がります。

メイン言語にポート1313をアサインして、それ以外の言語は1314以降のポートを順番にアサインします。

この時に「静的ファイル（staticsディレクトリ以下）がメインでない言語＝英語版 (localhost:1314/en/)でNot Foundになる」という問題が発生します。

HUGOは、静的ファイルも言語ごとに用意する仕様なので、statics以下に言語ごとのディレクトリがないと、localhost:1314以下には、staticsディレクトリがルーティングされません。

この問題点は、各言語ごとに、フォントの影響や文字数の問題で、見た目などが微妙に変わってCSSの調整をしたい時などに非常に不便です。

解決方法

weightを入れ替えてプレビューする

HUGOのローカルサーバーでメインを割り振るのは、基本的にはルートパスの言語が優先されますが、設定ファイルのlanguagesの各言語の設定に「weight」を入れて、表示したい方の言語を重く（数字を少なく）すれば、ポートが入れ替わります。

languages:
  en:
    baseURL: https://example.com
    languageName: English
    title: In English
    weight: 2
  fr:
    baseURL: https://example.fr
    languageName: Français
    title: En Français
    weight: 1

上記の設定の場合、

• 英語版 (localhost:1313)
• フランス語版 (localhost:1314)

となりますが、weightを入れ替えて、

languages:
  en:
    baseURL: https://example.com
    languageName: English
    title: In English
    weight: 1
  fr:
    baseURL: https://example.fr
    languageName: Français
    title: En Français
    weight: 2

とすると、

• フランス語版 (localhost:1313)
• 英語版 (localhost:1314)

となります。

こうすることで、静的ファイルのエラーを回避できます。

言語ごとにstaticDirを設定する

HUGOの設定ファイルは、言語ごとにstaticDirを指定出来るようです（未検証）。

languages:
  en:
    baseURL: https://example.com
    languageName: English
    title: In English
    weight: 1
  fr:
    baseURL: https://example.fr
    languageName: Français
    title: En Français
    weight: 2
    staticDir:
      - staticDir_fr
      - static_common

これでも出来るようですが、ファイルの管理が煩雑のなるので、個人的にはこちらは使いませんでした。

単純なことなのですが、多言語化サイトの構築時に結構不便だったので、まとめました。よかったら参考にしてみてください。