Hugothemes: Invalid SRI Hash in theme demo - CSS not loading.

[funkydan2]

My Theme Alpha-Church has now got the demo button again, however CSS isn't loading for the demo site. Firefox says it's because the SRI integrity check is failing.

I recently changed the theme and themeDir settings in the exampleSite config.toml file as previously it was causing the theme demo to not to be built.

I wonder if this is because the resources folder is committed for both the theme and the demo site. I'm a bit surprised by this - I'm not sure why Hugo is building the resources folder for the demo site when they already exist in the theme folder.

[onedrawingperday]

Your theme's generated assets are not loading because the generated permalinks are wrong.

For assets published through Hugo Pipes .Permalink renders an absolute URL directly under the root of a site. Since your theme demo lives in a sub-directory of the Hugo Themes Site the above generated permalink will be incorrect.

To produce the correct URL for your resources please use .RelPermalink

For example change line 24 of your header.html partial like so:
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}" media="screen">

You need to do the same for all the other script resources you have included in your footer partial.

Doing the above will generate your theme's demo again.

Regarding the SRI errors I am unable to test because I do not use Hugo Extended and I cannot regenerate your Resources locally. (maybe someone else will)

[funkydan2]

I gave this a try:

1. Changed all references to .Permalink to .RelPermalink.
2. Tested the exampleSite using hugo server -D on my local machine. Everything looked good.
3. Pushed the changes to github, and then syncronised with a site which uses the theme.
4. Checked my site on my local machine - everything looked good.
5. Pushed site changes to repo.

When the site was rebuilt by netlify (which is configured to use Hugo 0.48), CSS wasn't loaded.

From what you said, using .RelPermalink I would have expected the <link rel="stylesheet" href=??? to say something like href=scss/main.min.xxxxx however, the url was to a cloudflare server (unfortunately I reversed the change without writing down exactly what it said).

Is there something else I should have changed for .RelPermalink to work?

[onedrawingperday]

The link you posted above works fine for me, without any errors SRI or missing CSS.

For example the following stylesheet loads fine:
<link rel="stylesheet" href="https://gympiepresbyterian.org.au/scss/main.min.fabdd20cc250b2f63135f032318dd2d8316b32f4b31d1834298f5fa45ceeb986.css" integrity="sha256-+r3SDMJQsvYxNfAyMY3S2DFrMvSzHRg0KY9fpFzuuYY=" media="screen">

What I posted in my previous reply was about the Demo on the Hugo Themes Site.

The Themes Site hasn't been updated yet.

[funkydan2]

Yes, the site's working because I've rolled back the changes. But I'll give it another try, and double check that I'm not using cached resources.

[funkydan2]

So, when using .RelPermalink in my theme, sites are built with

<link rel="stylesheet" integrity="sha256-+r3SDMJQsvYxNfAyMY3S2DFrMvSzHRg0KY9fpFzuuYY=" media="screen" href="https://d33wubrfki0l68.cloudfront.net/css/02eb976e1984828ce2c3c196af92c5551070d4b9/scss/main.min.fabdd20cc250b2f63135f032318dd2d8316b32f4b31d1834298f5fa45ceeb986.css">

And the web console in Firefox reports

"https://d33wubrfki0l68.cloudfront.net/css/02eb976e1984828ce2c3c196af92c5551070d4b9/scss/main.min.fabdd20cc250b2f63135f032318dd2d8316b32f4b31d1834298f5fa45ceeb986.css" is not eligible for integrity checks since it's neither CORS-enabled nor same-origin.

(I realise this issue is not really about the theme repository - so maybe I should move the discussion elsewhere?)

[onedrawingperday]

.RelPermalink needs to be used so that Hugo Pipes resources can be served correctly on your Theme's Demo. The exact issue has come up before for example here: https://github.com/gohugoio/hugoThemes/issues/395 and here: https://github.com/lucperkins/hugo-fresh/issues/24

Regarding your external stylesheet on Cloudfront as you said you are getting a CORS error.
Now that is unrelated and I can't help with that. Maybe you need to change a setting in your CSP policy -if you are using one- or it's something else.

[funkydan2]

Thanks @onedrawingperday I've got it working now.

The problem was with netlify's post-processing optimization. It injects some extra code and its minification resulted in different css and js files which didn't match the hashsum computed by hugo.

[onedrawingperday]

@funkydan2 However you still need to use .RelPermalink for your Hugo Pipes assets to show up on your Example Site.

Glad to hear that the SRI error is resolved. 👍

[funkydan2]

Yes - I'm doing that and it seems to be all working now. I'll keep an eye on updates to the demo site and hopefully, it'll all be working there too.