How to add custom CSS to a Hugo site
In hugo.toml
, add
[params]
custom_css = ["css/myblog.css"]
Now you need to find the the file in your theme where the layout head is generated. Use e.g.
ag '<link rel="stylesheet"'
to find which file this is
For me (tailbliss
theme), it is themes/tailbliss/layouts/partial/head.html
and I believe it’s quite similar for other themes as well.
In that file, add
{{ range .Site.Params.custom_css -}}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
Now, create the actual static CSS file in static/css/myblog.css
.
When you now run hugo serve
, you’ll see the changes introduced by your custom CSS file immediately.