CSS sometimes not loading

support
1

On my production site (https://www.theclassroombeyond.com/) , about 10% of the time if I hard-reload, the CSS doesn’t load. Checking the network panel, I see that Chrome is trying to load https://www.theclassroombeyond.com/__h_pp_l1_1_Permalink__e= with an integrity value of __h_pp_l1_1_Data.Integrity__e=.

That’s not the correct URL, of course – it gets replaced with the resources.PostProcess.Permalink. But before that replacement can happen, Chrome tries to download the CSS from the Permalink, and gets a 404.

I’m at a bit of a loss as to where to look for the problem. Presumably there’s JS implementing the replacements of the token __h_pp_l1_1_Permalink__e= – but is that the template’s job, or hugo’s? Also, why isn’t this CSS and the corresponding <link> simply prerendered during hugo build? That’s the point of static sites, I would have thought.

Here’s the code from css.html, if it’s helpful.

{{- $style := slice $config $main | resources.Concat "main/scss/main.css" | toCSS $options | resources.PostCSS
  $postCSSOptions | fingerprint
}}
{{- if hugo.IsProduction }}
  {{ $style = $style | resources.PostProcess }}
{{ end }}
<link
  data-precache
  rel="stylesheet"
  href="{{ $style.Permalink }}"
  integrity="{{ $style.Data.Integrity }}"
  crossorigin="anonymous"
/>

The repository is public and at GitHub - grahampcharles/tcb-hbs

Interestingly, the problem never crops up on Edge.

Many thanks for your thoughts.

2

No, Hugo performs the replacement after the site has been post processed.

When you say “about 10% of the time if I hard-reload”, are you running Hugo server locally, and testing locally?

I tried to clone and build your site, but the npm install fails.

3

Are you running hugo server on your DigitalOcean droplet to serve the production site?

4

No, hugo build. I am serving static files. That’s the weird thing. I can look at the generated html that’s being served and it has the correctly generated CSS file.

Sooo… something’s caching, somewhere, and only sometimes. (I never ran the production site from hugo server so I’m not sure how it would be caching the token, but whatever.) I’ve emptied Chrome’s cache of course, plus this situation crops up even when I’m running incognito, where there could not be a client cache. So I’m guessing I’m looking at a server cache (or an ISP cache) issue, not one with hugo or the template.

I really appreciate your reply – I know that the docs make it clear these files are all static, but the persistence of the old page made me think I was going crazy.

P.S. Not sure why your npm install fails – I doubt it’s related to this issue but I’ll do some testing. I use pnpm as my package manager, but that shouldn’t really matter…

5

Just a quick follow-up: apparently, Chrome does sometimes use its cache when in incognito mode. I’d been assuming that was not the case, so I’ll have to retest some stuff.

1 Like
6

I can reproduce the behavior if I “empty cache and hard reload” a few times…

image

Which is why I asked if you were running hugo server on your host.

7

Are you rebuilding your site periodically? Perhaps every 50 seconds?