9

Issue:

I am trying to deploy/host my Hugo site on GitHub.

The site renders perfectly when I run it locally (http://localhost:1313/) using the hugo server command, but it does not render correctly when I host it on GitHub.

Initially, I thought the issue was the deployment on GitHub, but then I opened the index.html file which is generated by the hugo command within the public folder and I noticed that it does not work there either. So I assumed there is something wrong with my css connection in the index.html file:

href=https://username.github.io/assets/css/stylesheet.min.06dcab22093156f8a08872c23ce7ee2a8234185d3c84741f7b0ce0c78df475b8.css

but this seems to be the correct link.

Installation Process and Research Efforts:

In order to create the hugo site in the first place, I followed the quick-start tutorial and in order to apply the theme of my choice, I followed the official installation process described here by PaperMod. Finally, to host it on GitHub, I followed the recommended instructions.

My config.yml file has the recommended structure as the example file presented in the offical repository.

Besides filing an issue on the GitHub repository of the theme developer which I didn't get a clear answer except for a correction he pointed out which didn't work, I looked at a couple of articles like this, this and this but none of them work.

I am using windows 10 and my Hugo version is v0.78.2/extended windows/amd64.

Update:

I check the console of the html file and I found these three errors:

(index):1 Failed to find a valid digest in the 'integrity' attribute for resource 'https://username.github.io/assets/css/stylesheet.min.5846effdc39e688e1bf07acc7a47123f949ae43a8b0e776fa1a2a626406cc602.css' with computed SHA-256 integrity 'J6YEe5hjKuk/TENUR7jEMr6VNR4lwN8iVpSGj1g8MU4='. The resource has been blocked.

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

DevTools failed to load SourceMap: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

0

5 Answers 5

13

Thanks to @Samuel Three's answer, I started to look more closely at my Cloudflare configuration.

I discovered that I had Cloudflare's "Auto Minify" feature turned on (under Speed / Optimisation) for JavaScript and CSS. Disabling those (and flushing the Cloudflare cache once) fixed the issue for me, and I was able to leave Cloudflare's cache enabled from that point on.

enter image description here

Of course, if Cloudflare modify the JS or CSS files in any way, the computed SHA integrity will no longer be correct.

1
  • This is indeed correct, I wonder why CF alters the integrity in the first place....
    – Mecanik
    Jan 26 at 7:50
5

Workaround:

I replaced:

integrity="J6YEe5hjKuk/TENUR7jEMr6VNR4lwN8iVpSGj1g8MU4="

with:

integrity=""

in the css tag of every single index.html file.

This worked, although I found a solution to do this automatically and skip the error in the first place.

Solution(!) - Update:

It looks like the head.html file under the assets folder has the following structure:

 <!-- Styles --> 
 {{- $stylesheet := (resources.Match "css/*.css") | resources.Concat "assets/css/stylesheet.css" | minify | fingerprint -}} 
 <link href="{{ $stylesheet.Permalink }}" integrity="{{ $stylesheet.Data.Integrity }}" rel="preload stylesheet" 
     as="style"> 

I replaced integrity="{{ $stylesheet.Data.Integrity }}" with integrity="" and it worked! It automatically generates index.html files that are built with empty integrity and as a result there is no error and it works perfectly.

4

For anyone else having the same issue with the integrity, adding the following code to my config.yml file solved the problem.

params:
    assets:
        disableFingerprinting: true
1
  • This worked great. With toml it's params.assets.disableFingerprinting = true. Wondering if there's a safer yet simple solution though
    – 9 Guy
    Aug 3, 2022 at 19:04
1

I found a solution if you are using Cloudflare as the DNS for you domain.

Just clean the Cloudflare CDN cache or turn off it to prevent it happening again.

https://github.com/lxndrblz/anatole/issues/114#issuecomment-828750909

0

Ignoring the integrity completely will, of course, solve this (and we certainly don't want any other processes to modify the file on the fly later - turn that off in Cloudflare if you have it enabled in Speed > Optimization > Auto Minify, for example).

However, I hit this problem because my fingerprint wasn't last in the chain of resource events that modify the content. For example, this was my problem:

...
{{ $css = $css | fingerprint "sha256" }}
{{ $css = $css | resources.PostCSS }}
{{ $css = $css | resources.PostProcess }}
...
<link
  rel="stylesheet"
  href="{{ $css.RelPermalink }}"
  integrity="{{ $css.Data.Integrity }}"
  media="screen"
/>

But this now works perfectly:

...
{{ $css = $css | resources.PostCSS }}
{{ $css = $css | fingerprint "sha256" }}
{{ $css = $css | resources.PostProcess }}
...
<link
  rel="stylesheet"
  href="{{ $css.RelPermalink }}"
  integrity="{{ $css.Data.Integrity }}"
  media="screen"
/>

Hope this helps anyone else that hits this gotcha.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.