Hugo server -e production does not emit css correctly

support
1

I wanted to test my development vs. production configs, so to see what the site would look like in production I used

hugo server -e production -b "http://localhost:1313/"

That emits the correct HTML content but the CSS tag has a garbled href:

<link data-precache rel="stylesheet" 
href="__h_pp_l1_1_Permalink__e=" 
integrity="__h_pp_l1_1_Data.Integrity__e=" crossorigin="anonymous">

The template I’m using (hugo-theme-bootstrap) uses postcss and purgecss – does it seem like that’s the culprit?

It’s not too important – I can just run a full build on a development machine to check that production is looking good. I was just curious if anyone knew of a fix.

2

Hugo version?
Repository?

3

v0.104.2 extended. Maybe I should word the question this way:

How do you use hugo server to mimic a production build?

If I’ve guessed correctly and hugo server -e production -b "http://localhost:1313/" is correct but it’s just not working in my environment, then I have no interest in hunting down the problem. I’ll blame the theme and move on – I’m happy to do a full build for a pre-push test.

4

You are correct:

hugo server -e production

I can get this theme to work as expected with:

hugo server -e production --disableFastRender
What I did to test... 
mkdir mysite
cd mysite
hugo mod init github.com/me/mysite
hugo mod get github.com/razonyang/hugo-theme-bootstrap@master
git clone https://github.com/razonyang/hugo-theme-bootstrap-skeleton /tmp/hbs-skeleton
mkdir config assets
cp -r /tmp/hbs-skeleton/config/ .
cp -r /tmp/hbs-skeleton/content/ .
cp -r /tmp/hbs-skeleton/archetypes/ .
cp -r /tmp/hbs-skeleton/static/ .
cp -r /tmp/hbs-skeleton/assets/ .
rm -rf /tmp/hbs-skeleton/
hugo mod npm pack
npm install
printf "/node_modules\n/public\n/resources\n.hugo_build.lock\nhugo_stats.json\n" > .gitignore
git init
git add -A
git commit -m "Initial commit"
hugo server -e production --disableFastRender

See: https://hbs.razonyang.com/v1/en/docs/getting-started/installation/hugo-module/

Incidentally, it doesn’t make any difference whether you install the theme as a Hugo module or as a Git submodule.

5

Ah, I thought I needed the baseUrl flag because in production/config.yaml I’ve got a target URL defined, but that doesn’t seem to be the case – hugo server is smart enough to use the localhost.

But --disableFastRender did the trick. Thanks for the help!

6

Just wanted to add that in playing around a little, I discovered that part of the issue was that Chrome-Windows and Chrome-Mac (but not Chrome-iOS) was blocking the CSS from loading due to the integrity value in the css’s link attribute.

Unfortunately, a mismatched integrity value was also going out to my production code, and so Chrome refused to load the CSS. Something about the theme (using hugo’s | fingerprint pipe) is producing the wrong value, at least sometimes, even during full builds, but definitely during fast render.

Anywho, I’m not pushing to a CDN so I’m not too worried about integrity of the CSS – I just tossed it and everything is working fine now. I just thought this might be a good thing to leave here as useful information for theme developers. I’m posting a similar message for this theme’s developer.

7

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