mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
0a23baa6a9
3068989b9 Merge commit '7ae9cf2ccb3eecc1ff50f686925249d01cf37c6c' 7ae9cf2cc Squashed 'themes/gohugoioTheme/' changes from d7a475e7..a1768ebb b55157fae Revert "Anchorify headings up to h4" b63dd5566 Anchorify headings up to h4 edfe36a19 Test out trac as highlighter style 98dc8d269 Update multilingual.md a6e4d92c0 Update multilingual.md 86a90edf9 Fix typo 'If will' to 'It will' line 41 6b626fac6 Add a tip for testing custom 404.html on hugo server 6bfc17cfc Update few links to now point to gohugoio organization repos f66bad971 Remove unintended alias 3bc56e9ec Fix shortcode name in example: image -> img 251142388 Fix broken link 27245af6a Fix the minimum required git version for GH Pages flow aefc87b4d Fix link in Forestry showcase 489ec5ea0 Squashed 'themes/gohugoioTheme/' changes from 6f3a8bf5..d7a475e7 308a616fd Merge commit '489ec5ea03799fa092d891838c1655e60b34f337' a80859814 Adjust showcase description git-subtree-dir: docs git-subtree-split: 3068989b9c601146e8e6be8c4e8e2b2c679e5230
61 lines
2.1 KiB
Markdown
61 lines
2.1 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)
|
|
|
|
{{% 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/
|