Custom 404 Pages

When a visitor requests a page that doesn't exist, Surge serves your project's 404.html if it has one—styled like your site, saying what you want said—with a proper 404 Not Found status.

Add the file to the root of the directory you publish:

my-project/
├── index.html
├── about.html
└── 404.html

Then deploy as usual. Every unmatched URL on the project now renders your page:

surge

A good 404 page is small, loads instantly, and offers a way forward—a link home, your navigation, or a search box. Since it's just a page in your project, it can use your site's CSS and assets like any other.

Many static site generators can emit a 404.html for you (Jekyll, Hugo, Astro, and others have it as a convention)—if yours does, it works on Surge with no extra configuration.

Building a single-page app? You likely want 200.html instead, so unmatched URLs boot your app rather than dead-ending.