Css not working for Netlify

[simonagradinaru]

Hi,

I’m having troubles with setting up a website built in R with Hugo, hosted on GitHub and Netlify.
It seems like Netlify isn’t reading the css file properly and my website doesn’t currently have a theme. In addition, it looks like the links are broken. Perhaps something related with the site map, although I’m not certain.

I’m a newbie in Netlify and I’ve already spent a lot of time trying to figure out why these two aren’t working. Could anyone help me with setting up properly the website?

Many thanks,
Simona

[gregraven]

@simonagradinaru Welcome to the Netlify community.

Let’s start here:

About the Support category

The Support Category is the best place to get help solving non-administrative related issue. Please check out our detailed, vetted Support Guides and the search first, before you start a new post. In all posts, please provide your Netlify site name, domains, any errors you are receiving, and other information about relevant such as what you have already attempted when you post. The better the post = the faster we can help!

If the CSS file is where it’s supposed to be and your pages have the correct links to that file, but the file is not being delivered properly, that is indeed a problem.

If, on the other hand, the CSS file is missing and/or the links to the CSS file are not correct, that’s something you’ll have to correct.

However, without more information it’s very difficult for others to help you.

[simonagradinaru]

It looks to me like the CSS file is in the right location and it is linked properly. Do you think it may be a problem with the theme instead?

My GitHub repository is located: here.
My page is hosted on Netlify: here.

[gregraven]

@simonagradinaru The only problem I’m seeing is that your favicon is not present (or properly linked). Everything else looks fine. Are you perhaps seeing the results of browser, computer, ISP, or VPN caching?

[simonagradinaru]

@gregraven I figured out the css issue in the meantime. Apparently, I wasn’t building my site so running hugo serve was all I needed to do.
Could you give me a hand with the favicon you’ve mentioned?
Thanks!

[gregraven]

@simonagradinaru I don’t know how you include it using Hugo, but once you have an image you want, this free online generator will create all the icons and link code for you.

Favicon Generator for perfect icons on all browsers

[simonagradinaru]

Fantastic! Thanks a lot @gregraven for the reference, I’ll look into it.
In the meantime, my website is almost ready to launch (really excited about it!), but I cannot figure out why my posts aren’t reading the css file. Any idea?

[gregraven]

@simonagradinaru Which CSS is not being read? I visited the site at the link you posted above, and everything seems to be loading correctly, such as:

<link rel=stylesheet type=text/css href=https://the-science-of-dating.netlify.app/css/main.css>
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300|Montserrat:700" rel=stylesheet type=text/css>
<link href=//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css rel=stylesheet>

It’s a little weird to include your domain name in the link to your local CSS file, but it does work.

[simonagradinaru]

Interesting. I attached two print screens with regard to one of the website posts.

This is how the page currently looks. What’s in the red square shouldn’t be there.

The page should look like this instead, but I have no idea of why this doesn’t happen. I’m getting this by running locally my website.

[simeon9696]

Hi @simonagradinaru I see that you have class names author and date on the elements in the red box but no actual class defining the styles.

Even visiting this link https://the-science-of-dating.netlify.app/css/main.css and searching for author and date yields no results.

If this isn’t supposed to happen then maybe your build process is somehow cutting it out?

[gregraven]

@simonagradinaru I’ve only seen the second example, the one you say you see locally.

Have you tried downloading your deploy to see what files are there? You can also check the links there.

Have you tried clearly your local browser, ISP, VPN, and other caches? Have you tried viewing the page from a private / incognito browser window?

[simonagradinaru]

@gregraven That’s really weird, but somehow cheering up. I’ve tried clearing the browser, the caches, accessing the website through multiple devices on private browsers. Unfortunately, nothing works. Everywhere I’m opening the website (except locally), I still encounter the red box elements.

[simonagradinaru]

Hi @simeon9696! I think author and date are Common Font Matter variables in Hugo. My judgement was that they’re predefined and I don’t have to define them manually in a different script.
Yeah, something is definitely cutting it out, but I’m still having troubles in understanding why this happens and how to solve it.

[gregraven]

@simonagradinaru GTMetrix also sees what you’re seeing on your local instance, so you may be in cache hell.

[simeon9696]

@gregraven I see the unformatted text on the blog post on my end?

But the homepage is fine:

[simonagradinaru]

@simeon9696 That’s exactly what I see as well, although everything seems to work fine locally.
@gregraven Any ideas for how to escape the cache trap? I have tried on multiple devices, private / incognito, serving the website with hugo server --noHTTPCache, but the output is the same.

[simeon9696]

@simonagradinaru good news! I had some time to look into your problem.

The styling wasn’t being applied on the posts but it was there on the homepage so I checked the Network tab in developer tools and sure enough the homepage was pulling in main.css but the posts weren’t. That’s what led me to believe it was your build process.

It seems that in your .gitignore file you excluded the public directory. From Hugo’s documentation:

Running hugo does not remove generated files before building. This means that you should delete your public/ directory (or the publish directory you specified via flag or configuration file) before running the hugo command. If you do not remove these files, you run the risk of the wrong files (e.g., drafts or future posts) being left in the generated site.

So I think what happened is that it probably wasn’t being overwritten and netlify kept deploying the old folder? In any event here’s how you can fix it

1.) Delete the public folder from your local machine
2.) Add public/ to your .gitignore
3.) Commit the changes to your repo and push it to github
4.) Netlify should automatically trigger the rebuild so just wait.

Even if you build locally, the public folder should now not be uploaded to github. Make sure public isn’t in the repo! And as proof this all works: https://silly-mirzakhani-f9fd5a.netlify.app/post/2020-09-07-odds-of-finding-love/

I’ll take that down once you’re up and running.

[simonagradinaru]

Thank you very much, @simeon9696! That worked flawlessly! I have no idea how I missed it - either ignorance or I must have been in a hurry.
In the meantime, I moved my website here and it’s working perfectly. Thanks for saving my day!