How to Customize a Page Type in Hugo

Published: 2024-02-08 | Updated: 2024-05-16

I struggled with this a bit longer than I might should have. In the end it wasn’t too difficult but it also wasn’t so straightforward to be obvious.

Here’s how to set up a custom page layout for any type of page you might imagine in Hugo.

The Problem

I have a search page here on the site. It’s slightly different from other pages in that it doesn’t have a sidebar. In fact it’s just an empty div. The PageFind script takes care of filling in the results once you search for something.

Basically all I wanted was this

{{ define "main" }}
{{ .Content }}
{{ end }}

No columns. No sidebar. No related links. No footnotes. Nothing but search.

The Solution

What I learned is I needed to put a ’layout’ key in my search content page’s frontmatter.

layout: search

Now here’s the tricky part. That search yaml value tells Hugo to look for a file with a basename “search” in the .Kind of page I was looking to customize.

So I needed a file named search.html located in the layouts/page folder.

How did I know it needed to go in layouts/page? Because I printed the .Page.Kind variable to my browser, and the output was “page”.