Custom 404 page in Hugo on Netlify

Step One: Create your custom 404 page

To serve a custom 404 page, it needs be in the root directory of the site. Create a 404.html page in your layout directory so when the site is built, it’s in the correct location.

Style it up however you like! Here’s a basic template:

{{ define "main"}}
    <main id="main">
      <div>
        <h1 style="text-align: center">Page not found</h1>
        <h2 style="text-align: center">
            <a href="{{ "/" | relURL }}">back home</a>
        </h2>
      </div>
    </main>
{{ end }}

To see what it looks like in the browser when running the site locally, navigate to /404.html from your localhost url.

Step Two: Set your redirect rule for Netlify

For Netlify to know where to redirect 404’s to, set this redirect rule in your netlify.toml file:

[[redirects]]
  from = "/*"
  to = "/404.html"
  status = 404

See the Netlify redirect documentation for more information and examples of custom redirects.

Voilà 🎉

Push your changes and type random nonsense to the end of your sites url and see it live in action!

annadodson.co.uk/check-this-out