CSS working on hugo server but not static pages

support
1

Probably something stupid or simple here. But I have been tweaking my theme and it looks great when I run “hugo server --theme xyz” and test it. But when I open the index.html file from the generated /public folder it gives me barebones stock styling as if the css isn’t recognized. But viewing the source on index.html indicates the css file is being specified correctly. If it works on hugo server, shouldn’t it work when I test the generated /public folder version?

I’ve checked hugo config and the baseURL is being specified correctly.

Any ideas?

2

You have some detail in your project that isn’t correct – which isn’t possible to guess without seeing the actual Hugo project.

3

What does the CSS path look like in the HTML headers in the public/ dir? A wild guess… it’s missing a slash somewhere in the path, which can probably be fixed by ending the baseURL with a slash.

Again, you can get more accurate help if you share the site source. Above is just from a guess.

4

What does the path to the stylesheet in the generated HTML look like?

What are you expecting to see?

5

The line referencing the stylesheet is this:

> <link rel="stylesheet" type="text/css" href="/css/styles.css" />

Which is what I would expect. The style sheet is there in the css subfolder.

Here is the uploaded site: http://dogsbreakfast.xyz

I thought it might be a propogation issue (it’s hosted on AWS) but because this happens when I open the index.html file in the local public folder and it still has the problem is why I don’t think that’s it.

6

From Dev Tools in FF 57

The stylesheet http://www.dogsbreakfast.xyz.s3-website-us-east-1.amazonaws.com/css/styles.css was not loaded because its MIME type, “text/plain”, is not “text/css”.

It’s not related to Hugo. You haven’t configured your server properly.

1 Like
7

Thanks so much. Turns out S3 doesn’t apply the correct type to .css files consistently. Lots of people with similar issues in the past (though strangely it has worked for me up until now). Anyway, I had to change the mime-type of the css file through the AWS console. Unless I figure out how to get the content-type explicity set on css uploads from my end, I’ll have to remember to go check that next time I revise the css.

1 Like
8

What do you use to upload to AWS? I use s3cmd and my “hack-ish” solution is to run a something like this after the website is uploaded to overwrite the text/plain CSS with the text/css mime-type.

s3cmd --acl-public --no-preserve --cf-invalidate  --mime-type="text/css"
put public/css/hugo-octopress.css s3://parsiya.net/css/hugo-octopress.css