HUGO

Not reading css from cloudfront.net

Hi !

It’s my first time building with Victor Hugo. I have my site running the way I want it locally with npm, but when pushed to GitHub and deployed with Netlify the bundled CSS no longer reads, now that it is being served from: https://d33wubrfki0l68.cloudfront.net/css/454df5098870c19d4dd0de297fa5aa7fbe621b8e/assets/css/homepage.css.

The site is deployed successfully and without errors but styling is ignored. Here’s a link to the deploy: https://dreamy-ride-806f1c.netlify.app/

I’m not 100% sure if this is on topic for this forum, but I thought someone might just have the answer up their sleeve.

Not familiar with Cloudfront. Try asking at their support channels.

Can you link to your GitHub repository?

I’ve never used Victor Hugo. If you’re a beginner, I reckon you’re better off following the quick start and asking for help along the way. IMHO adding in webpack just makes things more complicated (and I don’t think it’s necessary now due to Hugo Pipes).

One of the mistakes you’re making is editing files in the site/layouts directory. Don’t do this! That’s the ‘theme’ of your site. You should only be fiddling with content and config.toml at this point. When you’re more familiar with Hugo, have a go at overriding a theme (or building your own). But for now, just get your site working both locally and on netlify.

I’m also a bit confused about how your site is built. Especially have a look at

and compare with the code of your site on Netlify.

        <link rel="shortcut icon" href="/favicon.png" />
        <link rel='stylesheet' href='https://d33wubrfki0l68.cloudfront.net/css/454df5098870c19d4dd0de297fa5aa7fbe621b8e/assets/css/homepage.css'/>
        
        <link rel="stylesheet" href="https://use.typekit.net/qna8bxm.css">

I can’t see why they’re different.

Thank you for your thoughts funkydan2.

Yes. I’m aware of working in Content, I was just copying over some existing html to get a quick preview. It would be easier for me to get rid of Victor, but just trying to learn some new tools. I appreciate your feedback though and I will consider the advantages of webpack over pipes.

I think the difference between the two is that typekit.net is already an external reference before build, while the css is getting bundled and served on a CDN. Was that what you meant?

I thought I had already searched, but apparently not well enough. This seems to be an issue since 2019.

It’s not an ISSUE. It’s a misunderstanding.

If you do any SRI-fingerprinting via HUGO on your stylesheets, you have to DISABLE any “asset optimization” on these files in netlify. That’s normal. The fingerprint that Hugo does is a hash taken from the file-content HUGO is creating. So using Netlify’s asset optimization will change this content. Which makes the SRI-value invalid. Which leads to your stylesheets not loading.

So the rule is:

  • you do SRI on your stylesheets? Don’t enable optimization on styles on Netlify
  • you do SRI on your javascripts? Don’t enable optimization on javascripts on Netlify
  • keep image optimization on
2 Likes

Thanks for clearing that up @davidsneighbour . Exactly what I was looking for.

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