Hugo static styling not working, whereas hugo server works


The static generated site onto public does not render correctly, whereas the same content with hugo server works perfectly fine. repo-url.
I’m using nginx to render the generated site, but the same problem is with httpd too.

The theme - hugo-cactus-theme is a submodule. So after clone, one needs to do
git submodule init git submodule update

I’ve checked baseurls and all appear fine. I might be missing something very trivial.
Below is the garbled rendering -

Can someone point me whether there’s something trivial I’m missing or is this a valid bug ?

What is your command line for generating the files? What is the output? Which version of Hugo are you running? What is created in the public folder?

I’m using Hugo command to build the site. The contents of public are generated fine including css/ js/ fonts. (master=)$ hugo
0 draft content
0 future content
18 pages created
29 paginator pages created
22 tags created
0 categories created
in 286 ms (master=)$ hugo version
Hugo Static Site Generator v0.15 BuildDate: 2015-11-26T11:59:00+05:30 (master=)$ tree -L 1 public/
β”œβ”€β”€ 2011
β”œβ”€β”€ 2012
β”œβ”€β”€ 2013
β”œβ”€β”€ 2014
β”œβ”€β”€ 2015
β”œβ”€β”€ 2016
β”œβ”€β”€ 404.html
β”œβ”€β”€ about
β”œβ”€β”€ assets
β”œβ”€β”€ css
β”œβ”€β”€ fonts
β”œβ”€β”€ images
β”œβ”€β”€ index.html
β”œβ”€β”€ index.xml
β”œβ”€β”€ js
β”œβ”€β”€ page
β”œβ”€β”€ post
β”œβ”€β”€ sitemap.xml
└── tags

Looking at this in a cursory way, the screenshot looks like it’s not finding the css, which indicates a path problem.

Your theme is loading the css using {{ .Site.Baseurl }} followed directly by css.

I assume the .Baseurl is different between your normal site and the localhost site.

Recommend checking your source in both cases and seeing if a slash is missing or something.

Yes indeed. I was pointing my base url to the one obtained on namecheap.
Hence all resolutions were pointing there. Now changed it to page. it works now.

@rickcogley Thanks for your pointer which triggered the light bulb.

1 Like

Could anyone elaborate the concept behind the solution in greater detail (relative path with .Site.BaseURL)? I had the same problem after switching to a new theme. The site looked perfect when using Hugo sever, but when I built and deployed, the theme was not rendering.

I tried my but that didn’t work. So I went back to my custom domain I rebuilt the site it and it worked. I’m stoked about that but I would like to know what I did that actually fixed it.

I did try previous answers such as changing my baseurl to β€œ” so that it can find the files from there, hosted in the github repo… (e.g. my profile picture). I changed back and forth to my custom domain

This was the result

Theme: Hugo Coder. How do I fix this?

Your problem is DNS related.

Hint: You haven’t configured www for your domain and all of your site’s assets are 404 because you are using that version of your domain to serve them.

For example:
<link rel="stylesheet" href="">

Also if you plan to publish your site under https you really need to serve all your assets under the same protocol.

If its any help to others, I just had this same issue. In my config.toml I had:

Checking the actual site URL I simply changed it to:

and await it went… Might be a quick fix for other newbies like me!