Make a Static Page in Hugo

Hugo is built with blogs in mind, and as such the pages you create will often show in the loop of blog posts. But there are times when you want to create pages - which aren’t posts - and you don’t want them to show unless you link to them. We recently came across this scenario when trying to add a privacy policy page.

Here’s our solution to the problem (using the privacy policy as an example).

Create New File: /content/privacy-policy/_index.md

The crucial part of this, is we’ve changed the layout from post to page.

1
2
3
4
5
6
---
title: Privacy Policy
url: /privacy-policy/
layout: page
---
Page content goes here.

Create New File: /layout/_default/page.html

To begin with, this can be a copy of your single.html (which might be within your theme). Because we don’t know what your single layout looks like, we’ll show an example one below.

Also note that the name of this file is important - it needs to match our layout within the content.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{{ define "main" }}
<main role="main">
    <div class="post">
        {{ partial "single/title.html" . }}
        {{ partial "single/header.html" . }}
        <article>
            {{ .Content }}
        </article>
        {{ partial "single/footer.html" . }}
    </div>
</main>
{{ end }}

The same process can be applied to search, about and contact pages if needed too.


Site illustrations (of Hugo the rabbit) drawn by Carina Roberts.