Hello,
I’m using the “coder” template of Hugo (GitHub - luizdepra/hugo-coder: A minimalist blog theme for hugo.) and I want to change a few CSS settings. I tried several approaches which didn’t work (like creating custom.css in assets-folder), so I played around and tried to overwrite the theme css in the themes/hugo-coder/assets/scss-folder directly (just to understand how it works).
Now what is very confusing to me is: my changes are visible in localhost (hugo serve), but not on Gitlab Pages. This is what I changed:
in “themes/assets/scss/css/normalize.css” I added one line color: orange:
b,
strong {
font-weight: bolder;
color: orange;
}
Now in localhost, all bold text is orange, but on GitLab Pages it’s still white. It’s not a cache problem, I deleted the cache and tried several browsers. Where is my mistake?
How is the theme ‘installed’? Did you download, clone, or is it a module (either git module or hugo module)?
My guess is that you’ve installed the theme as a submodule, and this means that changes you’re making on your local computer aren’t being pushed up to the git remote origin.
I think the best way forward would be to utilise the customCSS variable available in config.toml
So put a file in the static directory (e.g. static/my.css) and do all your changes there.
You’re right, I had it simply cloned (“normal” clone, not submodule). so this doesn’t work then…
Actually this was just a workaround for testing because I couldn’t get the customCSS-approach running, it always crashes with a “render of ‘page’ failed”. I pushed the failed branch to my respository (branch “test”) and noted my steps in the README.md, maybe it gives you some hints where I went wrong?
The main branch is the unmodified template and it works fine.
Thanks for the link to your repository - that makes things much easier.
So first thing, the theme is (now?) included as a submodule. (That might be what you meant in your post above…I’m not sure, but just wanted to make sure you’re clear on that.) One thing you might need to do is make sure you haven’t edited anything in the themes directory on your local machine (you’ll start getting confused if you have that.)
Then, for your custom CSS, don’t put it in static/css…but it in assets/css. This got me tricked, as I haven’t seen things done this way before…but if you look at the theme, it uses resources.Get for the custom CSS, and this function looks for files in the assets directory.
If you move your custom CSS to the assets directory, you’ll be on your way!
