hugo/content/templates/404.md
Bjørn Erik Pedersen ba45da9d03 Squashed 'docs/' changes from 44fe0285..32356e4e
32356e4e Fix typo in header of shortcode-templates.md
c8f1a2d2 Correct code example for index template function
bfa6a55d Escape code fencing
ff8b2f99 Fix typos in deployment with wercker tutorial
557c36e8 theme: Merge commit '7fbb4bed25001182bfeb91f79db0f0c1936582ee'
7fbb4bed Squashed 'themes/gohugoioTheme/' changes from 7dd8a302..ca53082d
ce31cee0 Add "See Also" config
158cee1b Make the tags into keywords
61600be6 Add a note to the related section
49edb5a2 Relase 0.27.1
c9bbc001 releaser: Add release notes to /docs for release of 0.27.1
213c6c3b Add bugs poster
8b4590cd Add KeyCDN integration tutorial
2b277859 Add tutorial videos to several docs pages
950fef1f Update roadmap to link to the correct milestones page
496f5bf6 Rename relnotes
d6f9378d Bump Netlify versions to 0.27
087fde7f Update 0.27 release notes
603f94ae docs: Document Related Content
3790f6a3 releaser: Bump versions for release of 0.27
0948868c releaser: Add release notes to /docs for release of 0.27

git-subtree-dir: docs
git-subtree-split: 32356e4eabe357ae914f4d1d59e8ae31ce936723
2017-09-21 19:03:00 +02:00

55 lines
No EOL
1.9 KiB
Markdown

---
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 `.Data.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)
[pagevars]: /variables/page/