Hugo static styling not working, whereas hugo server works


#1

Hi,

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 ?


#2

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?


#3

I’m using Hugo command to build the site. The contents of public are generated fine including css/ js/ fonts.

keshava@KEHP-M-X03J:keshavabharadwaj.com (master=)$ hugo
0 draft content
0 future content
18 pages created
29 paginator pages created
22 tags created
0 categories created
in 286 ms

keshava@KEHP-M-X03J:keshavabharadwaj.com (master=)$ hugo version
Hugo Static Site Generator v0.15 BuildDate: 2015-11-26T11:59:00+05:30

keshava@KEHP-M-X03J:keshavabharadwaj.com (master=)$ tree -L 1 public/
public/
β”œβ”€β”€ 2011
β”œβ”€β”€ 2012
β”œβ”€β”€ 2013
β”œβ”€β”€ 2014
β”œβ”€β”€ 2015
β”œβ”€β”€ 2016
β”œβ”€β”€ 404.html
β”œβ”€β”€ about
β”œβ”€β”€ assets
β”œβ”€β”€ css
β”œβ”€β”€ fonts
β”œβ”€β”€ images
β”œβ”€β”€ index.html
β”œβ”€β”€ index.xml
β”œβ”€β”€ js
β”œβ”€β”€ page
β”œβ”€β”€ post
β”œβ”€β”€ sitemap.xml
└── tags


#4

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.


Looking for the perfect hugo relative url setting
#5

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

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


#6

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 username.github.io but that didn’t work. So I went back to my custom domain lukemperez.com. 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.


#7

I did try previous answers such as changing my baseurl to β€œhttp://bgalvao.github.io/” 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 bgalvao.pt

This was the result

Theme: Hugo Coder. How do I fix this?


#8

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="http://www.bgalvao.pt/css/style.min.css">

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