How to Customize a Page Type in Hugo

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" }}
<h1>Search TDSTG.com</h1>
{{ .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”.