Beginner

404 Page

A real custom 404 page, served with a real 404 HTTP status — not a soft 404 that quietly returns 200.

2 min read

Live Implementation

Click this — it goes to a page that doesn't exist on purpose, so you land on the real 404 page, not a screenshot of it:

/this-page-does-not-exist/

How It Works

The page itself is a normal Markdown file with two front-matter settings doing the real work:

permalink: /404.html
eleventyExcludeFromCollections: true

permalink: /404.html matters because Netlify specifically looks for a file at that exact path when it needs to serve an error page — not /404/, not /not-found/, that literal filename. eleventyExcludeFromCollections: true keeps it out of collections.all entirely, which is also why the sitemap never has to think about it: it’s simply never a candidate in the first place, not filtered out after the fact.

The other half lives in netlify.toml, not in Eleventy at all:

[[redirects]]
  from = "/*"
  to = "/404.html"
  status = 404

That status = 404 is the part that’s easy to miss and easy to get wrong. Without it, Netlify would serve the 404 page’s content but report a 200 OK to whatever requested it — a “soft 404” that looks fine to a human but tells search engines and monitoring tools the broken page is a real, working one.

Folder Structure

src/404.md    ← the page and its front matter
netlify.toml  ← the redirect that actually wires it up as a real error page

Important Files

src/404.md

---
title: "Page not found"
description: "That page doesn't exist. Try the demos list or search instead."
layout: layouts/page.njk
permalink: /404.html
eleventyExcludeFromCollections: true
---

That page doesn't exist, or it moved. A few places to try instead:

- [Browse all demos](/demos/)
- [Search the site](/demos/search/)
- [Go home](/)

Notes

  • This only serves as a real 404 once deployed. Under eleventy --serve locally, an unmatched URL shows Eleventy’s own dev-server error page instead, since the Netlify redirect rule that makes this work doesn’t exist outside of Netlify’s actual infrastructure.
  • The content deliberately isn’t just an apology. It’s two real links (Demos, Search) and a way home — a 404 page’s job is to get someone unstuck, not just to explain that they’re stuck.

Related Demos

Beginner

Contact Form

A working contact form on a static site, using Netlify Forms instead of a backend.

2 min read
Beginner

Reading Time

The 'N min read' shown on every demo and post here, computed at build time by eleventy-plugin-reading-time.

2 min read