Written by Edd Turtle on makewithhugo.com
on
(Updated: )

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.

#static #page #layout #content #loop #privacy #contact #single
Author Edd Turtle

Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.

Tweet me! ☕   Buy me a Coffee

Related Posts

  • Add Adsense Ads to Your Posts –
    This post sets out how you can add your Google Adsense code to your blog posts. As this is MakeWithHugo, we’ll be adding them to our Hugo site. You’ll need a few things before starting, an Adsense account, the snippet of code from Adsense and knowing where you want to put them (or auto ads for the easy option). There’s a few different ways to achieve this, based on where you want them.
  • Add a 404 Not Found Page –
    In an ideal world, every web page would exist, but sometimes links go to pages that doen’t exist. This is why we make “404 - not found” pages. In Hugo you can do the same. Many of our sites are hosted with Netlify which also support these files - automatically returning the correct http status code for them. To make yours, you can add a file into your layouts folder.
  • Markdown for Hugo: Cheatsheet –
    This is designed to be a ‘cheatsheet’ to help you find the syntax you need quickly for creating markdown content on Hugo sites. Code Block 1 2 3 4 5 ```css body { background: red; } ``` To define a code block, wrap the code in backticks like: ` Three of them, and you can define the code language after the first set, like we’ve said the above code is css.