Hugo static styling not working, whereas hugo server works

support
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 -

Screen Shot 2016-03-14 at 10.58.37 AM.png2880×1800 340 KB

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.

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.

1 Like
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

reality
reality.jpg3200×1800 619 KB

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.

9

If its any help to others, I just had this same issue. In my config.toml I had:
baseURL="http://domain.site

Checking the actual site URL I simply changed it to:
baseURL="https://domain.site

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