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;
