Cached CSS not updating for Hugo site, but only in Deploy previews

Support
, , ,
1

Hi all,

Hope someone can help with this, it’s probably something simple… I just can’t work it out :slight_smile:

I’m maintaining a Hugo site (code on GitHub) and I use Deploy Previews for my merge requests.
When I deploy to my master branch, everything works fine. However, when I access the deploy previews my CSS isn’t updating (although all other changes are being reflected).

I’m using the Xenial image, and my build command is the same for everything (it’s just set once in netlify.toml) which is below:

[build]
publish = "public"
command = "hugo -v"

[build.environment]
HUGO_VERSION = "0.68.3"

Example preview:
https://5ea812a11ec6100007d3d195--eps-website-dev-81d04.netlify.app/pricing/

You’ll see some stacked buttons at the top of the page that shouldn’t be there, because the CSS changes are not showing. If I use Dev Tools, I can see the main.css file is missing the CSS I added for the class .pricing-buttons.

I’ve downloaded the deploy files (which I learned about from this thread) and in the downloaded files, I do see my CSS updates.

That would seem to indicate that this is some kind of caching problem, either in the build stage or when deploying… but at this point I’m not really sure what to try. I’ve tried manually re-triggering the builds with ‘clear build cache’ but it doesn’t make any difference.

Any ideas anyone?

Thanks,
Mike

2

OK, I figured this out. It was pretty obvious when I followed it through :slight_smile:
I updated my netlify.toml to:

[build]
publish = "public"
command = "hugo -v"

[build.environment]
HUGO_VERSION = "0.68.3"

[context.deploy-preview]
command = "hugo --gc -b $DEPLOY_PRIME_URL"

That -b $DEPLOY_PRIME_URL is the important part. It will ensure the base URL rewrite is handled correctly - my stylesheet was still loading from the master branch live URL. There’s some docs on this here with an example file.