---
eleventyNavigation:
    key: 404 Page
    parent: Examples
    order: 40
title: 404 Page
description: Custom error page example
---

JuicyDocs includes a custom 404 error page that maintains your site's design.

## The 404 Page

The 404 page is located at `src/404.njk` and is served when visitors try to access a page that doesn't exist.

## Testing the 404 Page

Try visiting a non-existent URL like [/this-page-does-not-exist/](/this-page-does-not-exist/) to see the 404 page in action.

## Customizing

To customize the 404 page, edit `src/404.njk`:

```nunjucks
---
layout: layouts/page.njk
title: Page Not Found
description: The page you're looking for doesn't exist
permalink: /404.html
---

<div class="text-center py-12">
  <h1 class="text-6xl font-bold text-red-500">404</h1>
  <p class="text-xl mt-4">Page not found</p>
  <a href="/" class="inline-block mt-6 text-red-600 hover:underline">
    Go back home
  </a>
</div>
```

## Server Configuration

For the 404 page to work:

- **Netlify**: Automatically serves `404.html`
- **Vercel**: Automatically serves `404.html`
- **Apache**: Add to `.htaccess`: `ErrorDocument 404 /404.html`
- **Nginx**: Add to config: `error_page 404 /404.html;`