Cache busting of CSS/JS

Probably mentioned it elsewhere but I’m doing this with the time and the git hash on deploy. Deploying with a zsh function which gets the hashes as needed:

Hugo builds accessing the env vars or the time:

I updated the method which I was generating unique filenames for CSS assets. I wrote a script to process my Sass files, and append a git hash for the commit to the filename.

The script I use.

From my experience with writing my current solution I am not sure if cache busting should be part of Hugo itself. There are several ways in which to create unique file names; Hugo can’t support them all, and choosing one would be rude to the others.

I do think there could be improvements to how Hugo links to external assets. Maybe some interface an external script/tool could adhere to; similar to how I use the JSON data file.

1 Like

I followed the blog post by Carl Johnson on setting up hugo asset pipeline. That makes use of a Go commandline tool called scattered developed by the author to do the cache busting.

I am not a web developer so Gulp/Grunt/etc is very foreign to me. So I followed his post and developed a poor man’s asset pipeline using a simple shell script wrapper. I might convert that shell script to a Makefile in future.

1 Like

really helpful, thanks!

Have you seen: https://gohugo.io/hugo-pipes/

I have a solution that appends a query string that only changes when the file is modified.

For my theme css file:

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

and for any custom_css files in config.toml:

{{ range .Site.Params.custom_css }}
  {{ $stylecustom := os.Stat (print "static/" . ) }}
  <link rel="stylesheet" href="{{ . | absURL }}?{{ $stylecustom.ModTime.Unix }}">
{{ end }}

I have a really small site, so I’m not sure of the performance effect on building a larger site. Hopefully it is faster than reading and hashing the file.

EDIT: Hugo Pipes can do this now with the fingerprint option. When used, it changes the $style.Permalink to, for example, style.{HASH}.css

4 Likes