make image, make sense

Custom CSS and raw HTML in Hugo posts

Great article on the web as personal design playground: https://colly.com/articles/this-used-to-be-our-playground

One slow moving project of mine is about posting some longer-form, art-directed posts to royscholten.nl, starting with 3 “dossier” pages for each of the main areas currently listed there.

Two technical pieces I had to get in place to be able to do that:

  1. Load custom css for a specific post.
  2. Allow plain html in the body of a post

Load custom css for a specific post

For this I had to connect some dots across multiple pedantic comments on stackoverflow. The apparently more common usecase is to automatically include a css file that is specific to a certain type of post. I want to include a css file with a single post.

I did not bookmark or document where I found this. I think I remember making Hugo choke on not correctly commenting the url I did want to add as documentation, so I left it out.

Anyway, in the front matter of that specific post you create a customcss parameter that has the URL to the CSS file you want to include:

customcss: "/css/specific-styles-for-just-that-post.css"

And in /layouts/partials/head/extra.html add this line:

{{ with .Params.customcss }}<link rel="stylesheet" href="{{ . }}" />{{ end }}

This takes care of adding the link to the stylesheet to the generated HTML of that specific post.

Allow plain html in the body of a post

Much easier. Thank you Ana Ulin for explaining and documenting how to do that.