Cache busting of CSS/JS

feature
27

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