Skip to main content

Customize the 404 page

When a visitor asks for a URL that doesn't exist on your site — a typo in the address bar, a broken external link, a deleted page — the server has to show them something. By default, Flexweg returns a generic 404 page with a plain design that looks nothing like your site. That's fine as a fallback, but it's a jarring experience for your visitors.

Good news: replacing it with your own, fully-branded 404 page takes one file.

How it works​

Flexweg looks for a file named 404.html at the root of your site. If it's there, Flexweg serves it automatically on every request that matches no existing file. If it's not, Flexweg falls back to its built-in generic page.

No configuration, no routing rules, no _redirects file — just drop 404.html at the root.

Step 1 — Create 404.html at the root​

Create a new file called 404.html in your site's file tree, directly at the root (same level as index.html). Here's a simple starting point you can paste:

404.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page not found</title>
    <link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
    <main class="not-found">
        <h1>404</h1>
        <h2>We couldn't find that page</h2>
        <p>The page you were looking for doesn't exist, or has been moved.</p>
        <a class="button button--primary" href="/">Back to home</a>
    </main>
</body>
</html>

Save and publish. Try visiting a random URL on your site (for example https://your-site.flexweg.com/does-not-exist) — you'll see your page instead of the generic one.

Reuse your site's CSS

Point <link rel="stylesheet" href="/assets/css/main.css"> at the stylesheet the rest of your pages use (see Share styles across pages). Your 404 will inherit the same colors, typography and layout — zero extra CSS required.

Step 2 — Make it useful (not just pretty)​

A great 404 page doesn't just say "not found" — it helps the visitor recover. A few things worth adding:

  • A link back to your homepage — the single most important button on the page.
  • A search box (if your site has search) or a short list of your most popular pages.
  • A friendly tone — acknowledge the mistake, keep it light. "Oops, this page took a wrong turn" beats "Error 404: Resource not found".
  • Your main navigation — same header/footer as every other page, so the visitor can keep exploring.
  • A contact link — for when the visitor is sure the page should exist (e.g. "If you think this is a bug, get in touch" pointing at your own /contact page).

Here's a more complete example with your site's navigation reused:

404.html — richer version
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page not found — Your Site</title>
    <meta name="robots" content="noindex">
    <link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/blog">Blog</a>
            <a href="/contact">Contact</a>
        </nav>
    </header>

    <main class="not-found">
        <h1>404</h1>
        <h2>Oops, this page took a wrong turn.</h2>
        <p>The page you're looking for doesn't exist. It may have been moved or deleted.</p>

        <div class="actions">
            <a class="button button--primary" href="/">Back to home</a>
            <a class="button button--secondary" href="/contact">Report a broken link</a>
        </div>

        <h3>Popular pages</h3>
        <ul>
            <li><a href="/blog">Latest articles</a></li>
            <li><a href="/pricing">Pricing</a></li>
            <li><a href="/faq">FAQ</a></li>
        </ul>
    </main>

    <footer>
        <p>© 2026 Your Company</p>
    </footer>
</body>
</html>
Tell search engines to skip the 404

Add <meta name="robots" content="noindex"> to your 404 page's <head>. Google and other crawlers won't index it as a regular page, which keeps your search results clean.

Step 3 — Use AI to generate one that matches your site​

If you're using the AI chat modal on Flexweg, generating a perfectly on-brand 404 takes one prompt:

Create a 404.html page at the root of my site. Keep the same header and footer as my other pages. Show a big "404", a friendly "page not found" message, a link back to the homepage, and a list of my most popular pages (blog, pricing, contact).

The AI will use your site's locked design template, produce the HTML, and upload it at the right path. See The AI design system for how design consistency works.

Tips​

  • One file, any tech stack. If your site is generated by Docusaurus, Eleventy, Hugo, Astro or any other tool, just make sure it produces a 404.html at the build output root. Most frameworks ship with a way to add one — see your generator's docs (e.g. Docusaurus writes 404.html automatically).
  • Test it. After publishing, visit a URL that doesn't exist on your site. You should see your page, not the generic fallback.
  • Don't overthink it. A 404 page exists for a rare but stressful moment. Keep it short, friendly, and focused on helping the visitor get back on track.