How to add custom CSS to a Hugo site

In hugo.toml, add

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.