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