mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
3a44bf182f
d88477eb3 Fix some more redirect alias loops 209735670 Update features.md d4ec6ef87 Remove redirect loop from functions/default ce14da435 Fix the AlternativeOutputFormats/OutputFormats examples f64a22469 Update cond.md 357a70a32 Remove redirect loop from templates/404 4ad7b01ba Remove some aliases that were causing infinite redirect loops fd378e66a Fix alias redirect loop ec3629f6f Revert "Set code background to white" ffc56b880 Revert "Make inline code gray" 2a964e261 Make inline code gray 44069e09c Set code background to white d39c790d0 Linked my own blog2md migration script 3e55267be Release 0.46 7b6cfdd8b releaser: Prepare repository for 0.47-DEV d4cb54806 releaser: Add release notes to /docs for release of 0.46 6518ac7e7 releaser: Bump versions for release of 0.46 e54334d5c Merge commit '766085c2dc6fc95ac30fda2a9ebde2355fc12554' git-subtree-dir: docs git-subtree-split: d88477eb3a1959e2764d6025f5aa7a57a4a611e7
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: []
|
|
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/
|