このブログはzolaでビルドしているのですが、CSSなどのアセットを修正してデプロイしたのに変更が反映されない問題に遭遇しました。 ブラウザキャッシュが原因だとわかったので、ZolaでURLを動的に変更する方法を調べてみました。
問題と調査
アセットファイルが更新されてもurlが同じため、ブラウザキャッシュにより古いファイルが表示されてしまいます。 変更をすぐに反映させたいため、ファイル更新時にURLを自動で変更できる機能がないか調べたところ、Zolaにはキャッシュバスティング機能が標準で用意されていました。
Zolaでの実装方法
Zolaではget_url関数にcachebust=trueパラメータを追加するだけで簡単に実装できます。
<!-- キャッシュバスティングなし -->
<link rel="stylesheet" href="{{ get_url(path="main.css") | safe }}">
<!-- キャッシュバスティングあり -->
<link rel="stylesheet" href="{{ get_url(path="main.css", cachebust=true) | safe }}">
cachebust=trueオプションを追加すると、Zolaはファイルの内容をハッシュ化し、URLにクエリパラメータとして追加します。
<!-- オプションなし -->
→ /main.css
<!-- cachebust=true追加 -->
→ /main.css?h=493d41c38e510111b28f
ファイルの内容が変更されるとハッシュ値も変わるため、ブラウザは新しいファイルとして認識し、キャッシュをバイパスして最新版をダウンロードします。
この機能により、サイトの更新が確実にユーザーに反映され、デザインや機能の変更がすぐに反映されるようになります。Zolaの便利な機能の一つとして、ぜひ活用してみてください。