404 Page

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/ to see the 404 page in action.

Customizing

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

---
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;