キャッシュなんて怖くない!Hugoでキャッシュバスティングを使ってみよう!

  HUGO  




Hugoのキャッシュバスティング(cache basting)実装方法まとめです。

キャッシュバスティングとは、CSSなどの静的ファイルを更新した時にキャッシュのせいでサイトが更新されないことを防ぐための方法です。

記事中ではすべてCSSを例にしていますが、JavaScriptも同様に実装できます。

ハッシュ値を追加する

ハッシュ値をクエリとして追加します。

sha256を使う

{{ readFile "static/css/style.css" | sha256 }}を使います。

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

↓ 出力結果

<link rel="stylesheet" href="http://example.com/css/style.css?e7e7af14ddaa3e5630e8bb082d448cd8b78b5b9d5f22d5e09917f315546f3ad7" />

※静的ファイルが更新された時のみ、クエリが変化します。

sha512は使えないようです。

md5を使う

{{ readFile "static/css/style.css" | md5 }}を使います。

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

↓ 出力結果

<link rel="stylesheet" href="http://example.com/css/style.css?eb87d8f07f31e237f83673ae034e2af5" />

※静的ファイルが更新された時のみ、クエリが変化します。

ハッシュ値を10桁に限定して使う

ファイルを読み込ませたいだけなので、桁数を指定しています。

{{ slicestr (readFile "static/css/style.css" | md5) 0 10 }}を使います。sha256でも可。

<link rel="stylesheet" href="{{ "css/style.css" | absURL }}?{{ slicestr (readFile "static/css/style.css" | md5) 0 10 }}" />

↓ 出力結果

<link rel="stylesheet" href="http://example.com/css/style.css?eb87d8f07f" />

日付を追加する

time.Nowを使う

{{ time.Now }}を使います。

<link rel="stylesheet" href="{{ "css/style.css" | absURL }}?{{ time.Now }}" />

↓ 出力結果

<link rel="stylesheet" href="http://example.com/css/style.css?2018-12-23%2021%3a45%3a45.6702963%20%2b0900%20JST%20m%3d%2b1008.696284301" />

※静的ファイルの更新に関わらず、publicに書き出すごとにクエリが変化します。

now.Unixを使う

{{ now.Unix }}を使います。

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

↓ 出力結果

<link rel="stylesheet" href="http://example.com/css/style.css?1545568777" />

※静的ファイルの更新に関わらず、publicに書き出すごとにクエリが変化します。

ModTime.Unixを使う

{{ $style.ModTime.Unix }}を使います。ModTimeで更新日を取得しています。

{{ $style := os.Stat "static/css/style.css" }}
<link rel="stylesheet" href="{{ "css/style.css" | absURL }}?{{ $style.ModTime.Unix }}" />

↓ 出力結果

<link rel="stylesheet" href="http://example.com/css/style.css?1535815035">

※静的ファイルが更新された時のみ、クエリが変化します。

Fingerprintを使う

Hugoのサイトに載っていたので、こちらがおそらく公式推奨の方法だと思います。

CSSをstaticフォルダからassetsフォルダへ移動する必要があります。 デフォルトはsha256ですが、sha512md5も指定できます。

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

↓ 出力結果

<link rel="stylesheet" href="http://example.com/css/style.d5d8f06778c89e6d10d265010b559116401cb13f68df5a8fe429a7102c445fb51c30935e8b3d7a8dd7dea1c5a7b17a555a69256508781417df1ffa0282489d5b.css" />

※静的ファイルが更新された時のみ、クエリが変化します。

Minifyも同時に使えるようです。

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

Minifyについての記事はこちら↓

速いは正義!HugoでHTMLやCSSを圧縮してサイト表示を高速化する方法! | わからないから調べるブログ

HUGOのビルド時にHTMLファイルやCSS、JavaScriptファイルを圧縮して出力する方法をまとめました。

あとがき

日付を付加する方法はGO言語さえわかれば他にもいろいろできるかもしれません。

意外にたくさんありましたが、結局どれを使ってもいいと思います。目的を達成するためなら手段は問わずといったところでしょうか。

簡単に実装したいならnow.Unixが出力されたソースもシンプルで使いやすいと思います。

ファイルを更新していないのにクエリが変化するのは気になるという方は、Fingerprintを使ってみてください。Minifyも使えていい感じです。

キャッシュバスティングをうまく利用して、サイトがちゃんと更新されたかなーという心配事は無くしてしまいましょう!ではっ!

参考にさせていただいたサイト様