Hugo でローカルサーバーかどうかで条件分岐する

Hugo Theme を自作していると 「hugo server を実行した時だけこの処理をしてほしい」なんてことがあると思います。Hugo はその要望に応える機能を提供していますが、あまり知られていないと感じるので紹介します。

.Site.IsServer 変数を見ればいい

結論から言うと .Site.IsServer 変数を見て条件分岐すればオッケーです。

hugo server でローカルサーバー(ビルトインサーバー)を立ち上げた時に True が格納されます。以下の公式ドキュメントで紹介されています。

• Site Variables | Hugo

.Site.IsServer

a boolean to indicate if the site is being served with Hugo’s built-in server. See hugo server for more information.

利用ケース

.Site.IsServer 変数を使えば簡単に実現できます。

リソースの取得先を変更する

例えば、PCがオフラインの時でも hugo server でレンダリング結果を確認したいと思ったら、 CSS や JavaScript の読み込みを、

• ローカルサーバー(hugo server)の時はローカルのリソースにアクセスする。
• サイトを生成(hugo)した時は https で始まるリンクを指定する。

というように分岐させれば良いです。

Google Analytics のオン・オフ

hugo server を実行した時のサイトでは Google Analytics にアクセス解析させたくない場合もあるかと思います。というかその時は Google Analytics を生成する意味はないです。

.Site.IsServer の使い方

実際の使い方です。

{{ if $.Site.IsServer }}
  <script src="/local/materialize/materialize.min.js"></script>
{{ else }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" defer></script>
{{ end }}

/local/materialize/materialize.min.js は ${hugo_theme_root}/static/local/materialize/materialize.min.js に配置しておきます。

このようにしておくことで、 hugo server を実行した時には上の script タグが展開され、 hugo コマンドを実行した際には下の script タグが展開されるようになります。

以上です。ありがとうGoざいました ʕ◔ϖ◔ʔ