JSやCSSはブラウザでキャッシュされてしまって変更しても読み込んでくれなかったりするのでJSやCSSのファイル名にハッシュ値を含めたりURLの末尾にユニークな文字列をつけて別URL扱いにしてキャッシュを無視するようにする鉄板テクがありますがHugoでいい感じにそれをやる方法。

Fingerprinting

Hugoの機能でFingerprinting というものがあってそれを使う方法。
自動でファイルのハッシュ値を計算してくれてハッシュ値を含めたファイル名にしてくれるのでファイルに変更があれば必ず再読込してくれるように。
Fingerprintingを使うのにファイルがassets以下にある必要があるので対象のファイルをstaticからassetsに移動させる。 テンプレート側でこんな感じに記述する。

{{ $style := resources.Get "style.css" | resources.Fingerprint }}
<link href="{{ $style.Permalink }}" rel="stylesheet">

変換結果はこんな感じ。

<link href="http://localhost:1313/style.e4f260616ff4726c81876f46546ae93ed119ecaebb25e66990fb4ac87f63cf88.css" rel="stylesheet">

デフォルトはsha256だけど引数でmd5とsha512も指定可能。

{{ $style := resources.Get "style.css" | resources.Fingerprint "md5" }}

<link href="http://localhost:1313/style.0738b126d394aa02be8ffe39db5078bf.css" rel="stylesheet">

1点注意点があってFingerprintingを使ってジェネレートする場合ユニークなファイル名で生成されるので過去ファイルを削除しないとファイルが増えていくので消す必要がある。

自力でユニークっぽくする

ファイルの削除が面倒でFingerprintingを使いたくない場合は自力でURLをユニークにする方法もある。

パラメータにタイムスタンプをつけてしまってユニークにする方法。ジェネレートのタイミングで毎回ユニークになるので変更がなくても再読込されてしまう。

<link rel="stylesheet" href="style.css?{{ now.Unix }}" />

<link href="style.css?1552189154" rel="stylesheet">

自力でハッシュ値を計算してパラメータにつけてユニークにする方法。タイムスタンプと違ってファイルのハッシュ値を計算しているので変更があった時だけ再読込される。

<link href="style.css?{{ readFile "static/style.css" | md5 }}" rel="stylesheet">

<link href="style.css?0738b126d394aa02be8ffe39db5078bf" rel="stylesheet">