Not reading css from cloudfront.net

support
1

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.

2

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

3

Can you link to your GitHub repository?

4
5

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.

6

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.

7

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?

8

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

9

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
10

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

11

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