blob: 64ebe16943c36283b54a94622526faa63324b4d8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
---
title: Custom 404 Page
linktitle: 404 Page
description: If you know how to create a single page template, you have unlimited options for creating a custom 404.
date: 2017-02-01
publishdate: 2017-02-01
lastmod: 2017-03-31
categories: [templates]
keywords: [404, page not found]
menu:
docs:
parent: "templates"
weight: 120
weight: 120 #rem
draft: false
aliases: [/templates/404/]
toc: false
---
When using Hugo with [GitHub Pages](http://pages.github.com/), you can provide your own template for a [custom 404 error page](https://help.github.com/articles/custom-404-pages/) by creating a 404.html template file in your `/layouts` folder. When Hugo generates your site, the `404.html` file will be placed in the root.
404 pages will have all the regular [page variables][pagevars] available to use in the templates.
In addition to the standard page variables, the 404 page has access to all site content accessible from `.Pages`.
```
▾ layouts/
404.html
```
## 404.html
This is a basic example of a 404.html template:
{{< code file="layouts/404.html" download="404.html" >}}
{{ define "main"}}
<main id="main">
<div>
<h1 id="title"><a href="{{ "/" | relURL }}">Go Home</a></h1>
</div>
</main>
{{ end }}
{{< /code >}}
## Automatic Loading
Your 404.html file can be set to load automatically when a visitor enters a mistaken URL path, dependent upon the web serving environment you are using. For example:
* [GitHub Pages](/hosting-and-deployment/hosting-on-github/). The 404 page is automatic.
* Apache. You can specify `ErrorDocument 404 /404.html` in an `.htaccess` file in the root of your site.
* Nginx. You might specify `error_page 404 /404.html;` in your `nginx.conf` file.
* Amazon AWS S3. When setting a bucket up for static web serving, you can specify the error file from within the S3 GUI.
* Caddy Server. Using `errors { 404 /404.html }`. [Details here](https://caddyserver.com/docs/errors)
{{% note %}}
`hugo server` will not automatically load your custom `404.html` file, but you
can test the appearance of your custom "not found" page by navigating your
browser to `/404.html`.
{{% /note %}}
[pagevars]: /variables/page/
|