HUGO server takes long to render CSS

support
1

Hey! Does anyone have the same problem when rendering CSS using the hugo server command? There is nothing wrong with my code and HUGO works flawlessly with HTML, but rendering CSS just takes so long, hours in some cases. I really don’t know why that is exactly. When I make a change to my CSS file, the change is just not immediately visible. I tried reloading, rerunning the command, reloading the sources using ctrl + u. Anyone have a tip about that?

2

Browser cache could be the issue. Force refresh or open the site in incognito window.

3

I think a lot of people inject their css via resources so they can fingerprint it with a hash. I could have totally dreamed this up, but I believe when the CSS is updated a new hash is generated, so it forces the browser cash to load the update.

If you search the forum for css fingerprint there should be plenty of discussions/examples. Or google.

1 Like
4

Indeed, fingerprinting assets resolves this issue rather than constant refresh or using incognito mode. To fingerprint any asset (JS or CSS), move it to the assets folder (or create one in the root of your Hugo site). Then in your layouts, you can do something like below,

{{ $styles := resources.Get "css/main.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">

where the CSS is stored in the ./assets/css/ folder. You can do the same for JS (just follow the same procedure) and for a file in ./assets/js/

{{ $scripts := resources.Get "js/main.js" | minify | fingerprint }}
<script src="{{ $scripts.Permalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>

Replace main.css and main.js with your own files.

Cheers!

5

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