Hugoで開発環境と本番環境を区別する方法

Hugoで開発環境と本番環境で動作を分けたいことがあるかと思います。例えば開発環境では Google Analytics を無効にしたいとか、広告を表示したくないなど。

動作環境

MacのHomebrewでインストールした以下の環境で確認しています。

$ hugo version
hugo v0.121.1-00b46fed8e47f7bb0a85d7cfc2d9f1356379b740+extended darwin/arm64 BuildDate=2023-12-08T08:47:45Z VendorInfo=brew

本番環境かどうかの判定

Hugoでは本番環境かどうかを判定するには以下の条件式を使います。

{{ if hugo.IsProduction }}
  <!-- なんらかの処理 -->
{{ end }}

これをテーマディレクトリのしかるべきファイルに記載することで、例えば冒頭に書いたように Google Analytics を本番環境のみ適用することなどが可能です。

{{ if hugo.IsProduction }}
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXXXX');
  </script>
{{ end }}

詳細

Hugoでは環境を表す変数が定義されています。

hugo.Environment | Hugo

gohugo.io

ローカルで動作確認をするときのコマンド hugo server はデフォルトでここに development が設定されます。一方で本番用にビルドするときに使うであろう hugo コマンドはデフォルトで production が設定されます。

これらの値自体を参照することも可能です。

{{ if eq hugo.Environment "production" }}
  <!-- なんらかの処理 -->
{{ end }}

が、その場合は上のように環境名を表す文字列をハードコードする必要があり、バグの元となりやすいので、個人的には以下のように想定する環境かどうかを確認する関数を用いる方がよいと考えます。

余談

この件について調べていたところいろいろな情報があったので整理しておきます。

HUGO_ENV

とある記事で HUGO_ENV を使うという例がありました。

【HUGO】特定のページをnoindexにする - SuperLowBlog

sparrow-tune.work

しかし私の環境では動作せず。どうやらnetlifyで動作させるときに用いるカスタムの変数のようで、Hugoがデフォルトで用意しているものではなさそうです。

Host on Netlify | Hugo

gohugo.io

私はnetlifyを使っていないのでわざわざこの変数を定義することはしませんでした。またnetlifyを使っているとしても、デプロイ先に依存した処理でなければなるべくHugo自身が用意した方法を用いるのがよいかと思います。

.Hugo.Environment

別の記事にて .Hugo.Environment を使うという例もありました。

~~\https://right-tech.net/tips/hugo-env-switch/~~ (2024年6月現在リンク切れ)

しかしこれも私の環境では動作せず。これも独自に設定した変数でしょうか。詳細はわかりませんが、ご自身の環境に合った方法をお試しください。