Anatomy of a Hugo Theme
My recent journey into building a Hugo blog led me down a rabbit hole of complex themes. While powerful, they often felt like a black box. I decided to strip everything away and ask: what are the absolute essentials to make a Hugo theme work?
It turns out, you only need three core files.
- The Skeleton: layouts/_default/baseof.html
This is the master template for the entire site. It’s the HTML document that holds everything else. The most important part is the {{ block “main” . }} section, which acts as a hollowed-out space where other templates will inject their content. code Html IGNORE_WHEN_COPYING_START IGNORE_WHEN_COPYING_END
- The Homepage: layouts/index.html
This template defines what goes into the “main” block on your homepage. Its job is typically to loop through all your pages and create a list. The {{ range .Site.RegularPages }} function is the engine for this. code Html IGNORE_WHEN_COPYING_START IGNORE_WHEN_COPYING_END
{{ define “main” }} Posts {{ range .Site.RegularPages }} {{ .Title }} {{ end }} {{ end }}
- The Content Page: layouts/_default/single.html
Finally, this template defines how to display a single piece of content, like this very blog post. It pulls in the specific post’s title ({{ .Title }}) and its main content ({{ .Content }}). code Html IGNORE_WHEN_COPYING_START IGNORE_WHEN_COPYING_END
{{ define “main” }} {{ .Title }} {{ .Content }} {{ end }}
And that’s it. With just these three files, you have a complete, functional theme. It’s a powerful and minimalist foundation to build upon.
Feel free to use this as a starting point. Happy writing