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!

Quick Tip: Adding a 404 Not Found Page to your Static Site

.htaccess

With --serve

All Quick Tips

With `--serve`