- Stable
3.0.0
Toggle Menu
1.93s
22.90s
Quick Tip: Adding a 404 Not Found Page to your Static Site
A 404: Not Found
page is a pretty standard thing on the web. It’s particularly useful when someone shares a broken or mistyped link. You don’t need dynamic middleware to do this, it’s pretty easy to add to a statically generated site. There are a few options, depending on your web host:
But first let’s make our 404.html
template:
---
title: Oops! Not Found
permalink: 404.html
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ title }}</title>
</head>
<body>
<h1>{{ title }}</h1>
<p>
This is where you should tell the user how to find their content. Maybe on
the <a href="/">home page?</a>
</p>
</body>
</html>
Eleventy will output this template to 404.html
.
If you’re using GitHub Pages, GitLab Pages, Netlify, or Cloudflare Pages there is no step two! A 404.html
file in your output directory is all you need.
Netlify even has lovely multi-language 404 page support too using Redirects
.
.htaccess
For other hosts, if you use .htaccess
for configuration you can use ErrorDocument
. Make sure your root directory matches here!
ErrorDocument 404 /404.html
With --serve
If you’re using the new Eleventy Dev Server Added in v2.0.0, the 404.html
convention is now provided to you for free!
All Quick Tips
- Quick Tip: Inline Minified CSS
- Quick Tip: Add Edit on GitHub Links to All Pages
- Quick Tip: Inline Minified JavaScript
- Quick Tip: Zero Maintenance Tag Pages for your Blog
- Quick Tip: Super Simple CSS Concatenation
- Quick Tip: Adding a 404 Not Found Page to your Static Site
- Quick Tip: Fetch GitHub Stargazers Count (and More) at Build Time
- Quick Tip: Trigger a Netlify Build Every Day
- Quick Tip: Cache Data Requests
- Quick Tip: Transform Global Data using an `eleventyComputed.js` Global Data File
- Quick Tip: Use local plugins to reduce config file size
- Quick Tip: Draft Posts using Computed Data
- View all of the Eleventy Quick Tips.