mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
be04ece859
0c3c04fd6 Merge pull request #827 from BCNelson/range-patch b14dd3505 Updated link to Go Docs to more helpful page c3d83149a Boolean Values in the Where Function 56d4cea3c hugo-extended no longer the default e9b15c698 Update index.md 11de98e0d Release 0.55.6 d2def17f4 Merge branch 'release-0.55.6' 115457b70 releaser: Add release notes to /docs for release of 0.55.6 25855690d Fix misspelling fc5e43db2 Update 404.md with Netlify Instructions 9f684318f Removed mentioning of removed --stepAnalysis command line option 86ba9071c Related md5 and aliases for sha1/sha256 15f48966a Added related sha function into the See Also 5e08b6930 Fix date description 908e87ab2 Revert docs/config.toml changes c925646cf Add a "deploy" command e765084dd Update sectionvars.md e08be4d81 Update sectionvars.md 7c9653cbe Hugo 0.55.5 1035ff028 releaser: Add release notes to /docs for release of 0.55.5 cda21f9d4 docs: Regenerate docs helper git-subtree-dir: docs git-subtree-split: 0c3c04fd63a7f140bdca0d3ca9b1e9dc794ebd77
63 lines
2.5 KiB
Markdown
63 lines
2.5 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: []
|
|
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.
|
|
* Amazon CloudFont. You can specify the page in the Error Pages section in the CloudFont Console. [Details here](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/custom-error-pages.html)
|
|
* Caddy Server. Using `errors { 404 /404.html }`. [Details here](https://caddyserver.com/docs/errors)
|
|
* Netlify. Add `/* /404.html 404` to `content/_redirects`. [Details Here](https://www.netlify.com/docs/redirects/#custom-404)
|
|
|
|
{{% 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/
|