Blog by Sergej Jevsejev

#TIL Custom post type in Hugo

· Read in about 2 min · (233 Words)

I created a new section #TIL in my blog using Hugo, and it was not straightforward.

The key is to use in the post field newtype. I did use til.

---
title: "Content title"
type: "til"
...
---

The folder structure I followed is

/content/post/202003/blogpost.md
/content/til/202003/tilpost.md

Unexpected behaviour

When I wanted to the post list was empty. After some digging I figured:

In index.html

{{ range .Pages }}
{{ .Render "summary" }}
{{ end }}

And in summary.html

{{ range .Pages }}
<li>
    <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
</li>
{{end}}

Notice here repeated {{ range .Pages }}. With one content type, single range loop is enough. Hugo with two content types iterates first the content types. In my case Tils and Pages. After that, iterates through the posts.

I did not expect it, and after understanding it looks good. Only if this was better documented, that would save me 20 min.

Verbose mode

I discovered some errors were hidden until Hugo builds production files. Then I started to use verbose mode:

./hugo server -v

Filter by type

To filter only posts I used

{{if eq .Section "posts"}}
...
{{end}}

Access new type

It was not clear, and after clicking around on the blog I rediscovered the links /post/ and new /til/. Hugo creates these by default. In this case, I added to the menu.

[til]
Name = "#TIL"
URL = "/til/"

Thank you!