Hugo themes are great - some do, however, not include custom CSS and JS from start. This is a simple guide on how to add it to your own Hugo site.
1. Overwrite the
It’s best to make changes to your own Hugo repo, without touching the theme files. Therefore we need to overwrite the layout files.
In this case, the file we want to edit is located in the following path (within the theme repo).
hugo -> themes -> actual-theme -> layouts -> partials -> head.html
To make a local copy of it, just create a new file with the same name in the following folder and copy the content.
layouts -> partials -> head.html
2. Add path the files in the
We want to specify which files we want within the
config.toml file to make it easy to add new files. We just need to add the following lines:
custom_css = ["css/custom.css"] custom_js = ["js/custom.js"]
This will point to a
css and a
js file that we will create soon.
3. Add to
Time for the actual logic, we just place this line of code somewhere within the head.html.
For each file we have declared in our
config.toml, it will add a link to that in our head.
The files need to be added to the
static folder within our Hugo repo. CSS files in the