`hugo`does not generate css like `hugo server`

[k-caps]

When running hugo server the site renders properly, but when doing just hugo, the website does not render well.
This is NOT the same problem as https://github.com/apvarun/blist-hugo-theme/issues/108.
For me, some things are working (the top menu bar is in place and looks ok, and the profile image is in the right place and looks correct). When i press f12 on my proper hugo server version, there is a stylesheet called styles.css with 10k rules. However when building the public dir and running the site with a webserver (python3 -m http.server 8080 for localhost, and on Cloudflare Pages), there is only a stylesheet called styles.min.xxxx.css, which has just 300 rules. So for example, there is no background accent color.

I tried using all variations of npm,hugo --gc and others, with and without css purging, but always reach the same result - hugo server works, building does not.
For now, I downloaded styles.css from the local version that works, and put it in my repo's static. When I build, I run a sed command which replaces all references to the file with my static stylesheet, and remove integrity checks. I can also dynamically replace the stylesheet and rename mine according to whatever styles.minwas generated. For now, this is working, but it feels like a very "duct tape" solution instead of just fixing the root cause.

(Playing with baseURL makes no difference - the css works when using the file, it just is very incomplete.)

[nakibrayan3]

can you upload the code to a public git repo, so i can take a look at it ?

[k-caps]

can you upload the code to a public git repo, so i can take a look at it ?

https://gitlab.com/k-caps/design-noa

[nakibrayan3]

can you upload the code to a public git repo, so i can take a look at it ?

https://gitlab.com/k-caps/design-noa

there is no config file in this repo. hugo can't work without a config file.

if this is a issue create a config file and it will be fixed.

[k-caps]

can you upload the code to a public git repo, so i can take a look at it ?

https://gitlab.com/k-caps/design-noa

there is no config file in this repo. hugo can't work without a config file.

if this is a issue create a config file and it will be fixed.

As of hugo v0.110.0, hugo.toml or hugo.yaml (which I am using) is preferred: https://gohugo.io/getting-started/configuration/#hugotoml-vs-configtoml

The problem here is not simply a missing configuration file. If it were, the project would build neither locally nor as a build, and this is not the case, as explained.

[nakibrayan3]

your problem is with css integrity. because blist-hugo-them checks if the css is legit before loading it, to fix this you have to change the variable baseURL to your domain name and then server the website using that domain name.

so the css won't work in https://lcoalhost:xxxx but it will work if you deploy the website under the same domain as set in baseURL

[k-caps]

your problem is with css integrity. because blist-hugo-them checks if the css is legit before loading it, to fix this you have to change the variable baseURL to your domain name and then server the website using that domain name.

so the css won't work in https://lcoalhost:xxxx but it will work if you deploy the website under the same domain as set in baseURL

This is not the case. I have tried that, using the dns of cloudflare pages as baseurl, and also my custom domain. It does not work in production either. I can redeploy a broken build if you think that it is necessary.

[nakibrayan3]

when you use the command hugo to build the website, the css link is https://design-noa.com/css/styles.min.xxx.css. but when you serve the website locally the css file is not available under the domain design-noa.com. (even if it is, it won't work because the integrity check will fail)

but when you use hugo serve the css is link is /css/styles.min.xxx.css

the solution is to host the website under the domain design-noa.com, so that the file https://design-noa.com/css/styles.min.xxx.css exists.

[nakibrayan3]

i successfully deployed your website under the domain https://temp-930.pages.dev after changing baseurl: to "https://temp-930.pages.dev".

i will take it down after you see my messages :)

[danaukes]

I'm having the same issue. I've confirmed my baseURL is fine. Seeing the same difference between generating the static site and serving locally.

hugo OR npm i && HUGO_ENVIRONMENT=production hugo --gc :

hugo serve or npm start :

I have tried similar strategies as the original poster. Strangely, the background shows up in dark mode!

hugo serve or npm start :

hugo OR npm i && HUGO_ENVIRONMENT=production hugo --gc :

[k-caps]

i successfully deployed your website under the domain https://temp-930.pages.dev after changing baseurl: to "https://temp-930.pages.dev".

i will take it down after you see my messages :)

Thanks, I hadn't received notifications on this issue for some reason until danaukes posted.. I can try serving the site with no subdomain, but I have tried changing the baseURL a few times, to all sorts of different optioms and I haven't gotten it to work yet - that's what I meant in the very end of OP.

I'm having the same issue. I've confirmed my baseURL is fine. Seeing the same difference between generating the static site and serving locally.

hugo OR npm i && HUGO_ENVIRONMENT=production hugo --gc :

hugo serve or npm start :

I have tried similar strategies as the original poster. Strangely, the background shows up in dark mode!

hugo serve or npm start :

hugo OR npm i && HUGO_ENVIRONMENT=production hugo --gc :

What is your hosting? Is it perhaps cloudflare pages? Maybe cloudflare has some kind of css protection or stripping in place?

[kuhjunge]

@danaukes I have exact the same problem.

It seems like ascentColor = "bg-blue-100" is ignored on css.

If I add a custom css Class with: .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgba(219, 234, 254, var(--tw-bg-opacity)); } it works fine.

I hosted the site locally with xampp.

[HuizhiXu]

Same issue here. The website looks strange in server but perfect on localhost. I got only one styles.min in css folder after running hugo -D.

[michaelminter]

Something wrong with tailwind.config I think. Will try to debug more if I have time available soon for blog work again.

[filippkowalski]

any updates on the issue? observed same thing on my side, works fine locally, it doesn't on the sever, host address is configured properly