Using the new `cachebusters` feature with a theme

support
1

The example config in the 0.112.0 release notes and in the current version of the Hugo/Tailwind starter assumes a single CSS file located at the assets/css/ level. However, if I use a theme and have multiple CSS files in themes/[theme-name]/assets/css instead, what change should I make in the cachebusters setting for the CSS files?

The Hugo dev server’s --debug mode reports no cachebusters matches when I edit a template while using the following:

[[build.cachebusters]]
  source = "themes/[theme-name]/assets/css/watching/hugo_stats\\.json"
  target = "themes/[theme-name]/assets/css/.*\\.css"

(Or, in a build.toml file, that presumably would be [[cachebusters]].)

I have found that the documented cachebusters setting works great for assets/css/*.css, but can’t seem to figure out how to adapt it for use in a theme-based directory structure. I also tried not putting the themes/[theme-name]/ part in the source setting, but that failed, too.

(These are uncommitted changes, due to other work I’m still doing in the repo; thus, there is no additional link I can provide at this time.)

2
  • Source will be relative to the component root even if it’s a theme – and it doesn’t matter where it’s mounted, so 'assets/css/foo.css` will be correct even if foo.css comes from a theme.
  • Target is always starting from the root assets folder, e.g. css/, but I would recommend that you define it a little more coarse grained, e.g just .*\\.css or maybe even just css which is a valid regexp that will match “anything css”.

A general tip is to run the server with hugo server --debug and see the relevant debug lines when you change a given file.

1 Like
3

Thanks. Actually, I was already using --debug, as I noted. Have tried all of these combinations and I get no match with each when changing an .html template file:

  source = "themes/twcss/assets/css/watching/hugo_stats\\.json"
  target = "css"

  source = "assets/css/watching/hugo_stats\\.json"
  target = "css"

  source = "assets/css/hugo_stats\\.json"
  target = "css"

  source = "hugo_stats\\.json"
  target = "css"

I should note that this is not with the modules settings used in the example, because this project is not using Hugo Modules. However, I did the same non-modules config with that other project I mentioned, for the same reason, and all worked fine — although, to repeat, that project wasn’t using a theme.

4

Just to be clear: The source is matching against the file that’s changed, the concept being

  • When source assets/foo.js changes then cache bust all files matching target.

What’s missing in your setup above is the build.writeStats = true. What happens is this:

  • You edit an html file
  • Hugo builds
  • hugo_stats.json gets updated and we get a new build.
  • Now your source matches your cache buster config

The above looks a little funky, but it actually works pretty nicely.

1 Like
5

Thanks! Will keep trying. I do have writeStats = true in my build.toml.

(Also: nice release on 0.113.0! Just saw that shortly ago.)

1 Like
6

OK, what I suspect is missing from your setup is the mount for hugo_stats.json, see:

That’s just a dummy mount added to make sure that it gets added to Hugo’s watch list – so when that file changes => new build.

3 Likes
7

Yep, that was it. Guess I was just lucky with that other project. Thank you, sir!

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.