For many months now I have been slowly iterating on this site’s design. Each time I make a change to the CSS, my GitHub Actions script:

  • Rebuilds the site, which is built using Hugo
  • Triggers a redeployment to Backblaze
  • Invalidates my Cloudflare cache

However, I was always clearing my local browser cache in order to get the CSS to update! This was annoying, because I knew it meant for anyone else visiting this site they would not be seeing those updates until their local browser cache expired the old CSS file. I know I had set the max-age header for that file to, uh, a fairly large number. I’ve had a GitHub Issue open for several months telling me to look into and fix this.

Last night, I did!

The solution turned out to be asset fingerprinting which is supported by Hugo. This technique is very common and simply something I had never encountered previously. It took some time to string together the correct Google search terms in order to find this answer. Always good to learn something new!!

Hugo makes asset fingerprinting incredibly simple:

{{ $css := resources.Get “…” | minify | fingerprint }}
<script type="text/css" src="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}"></script>

All it takes it piping into fingerprint, and each time you generate the site it’s giving back a uniquely named CSS file. If the file content changes, so does the fingerprint, causing the web client to say “oh, a new file!” and bust its local cache to fetch the newly updated version.

I love how simple this is and now I no longer need to wait, or force clear my local cache, when updating my CSS.