Hugo Server page and Github pages page don´t match

support
1

Hello!

I am new at this, trying to make a very basic website with simple CSS.
I have added some minor CSS tweaks in styles.css, trying to force the website into simple CSS´s dark mode, which works fine when doing hugo server command.

I use a basic premade github workflow to deploy the website from the public folder, which works fine except it seems to ignore my styles.css and the favicon icon does´t apply.

Looking at the html code generated by hugo, it seems to reference both my css and the simple css website.

Why is my CSS not applying over SimpleCSS and why is the icon not working?
Is it a github pages problem or a problem in my page?

Link to my github: GitHub - DJSAMSAM/samscorner

2

We have a recommended workflow for hosting a site on GitHub Pages:
https://gohugo.io/hosting-and-deployment/hosting-on-github/

Here’s your site, hosted using that workflow:
https://jmooring.github.io/samscorner/

Here are the changes that I made to the workflow:
https://github.com/jmooring/samscorner/commit/5e1496149fe926c361ebb90f44014b3766405f20

Here are the changes that I made to include static/css/styles.css:
https://github.com/jmooring/samscorner/commit/157a791a52f2f26184fc5ae3a5e74d8bc094545b

3

Hello

Thank you for answering, however, trying your fix actually made it worse…

Firstly, when using the hugo workflow, I had the same issues as when using the workflow I currently use.
I´m fine with building locally also so no need to build on github

Secondly, when changing to
when using hugo locally, it goes from forced dark mode to light mode, making me think it doesn´t use my CSS-changes…

4

Is this broken?
https://jmooring.github.io/samscorner/

5

For some reason some text was omitted from my previous answer.
I was referrring to the changes you suggested to my head.html file.

the website as hosted on your github is also in light mode, how can I force dark mode?

6

Not saying it´s broken, but with my CSS loaded it should be dark, see screenshot on how it looks locally!
I´ll build it like this and push to origin now

Screenshot 2024-05-20 162546
Screenshot 2024-05-20 1625461359×1381 50 KB

7

Please answer the question. When you visit the site that I hosted, does it work as you expect?

8

Sorry for being unclear. No it does not work as expected, it´s light mode, I expect the same as in my screenshot.

9

The styles.css file is loaded. See console log below (no 404 errors).

image
image1020×430 36.1 KB

So any problems you’re having are CSS problems, not Hugo or hosting problems.

Also note these two are identical:

image

1 Like
10

Okay so there would be a 404 error if my styles.css wasn’t loaded correctly? It seems to load the simplecss file properly, but you mean mine is loaded as well?

11

I added this to the bottom of static/css/styles.css:

body {
  color: red;
}

Now view your site:
https://jmooring.github.io/samscorner/

That proves that static/css/styles.css is loaded.

12

You are right

I will tweak it and get back to you if I have any questions, thanks a lot