Creating a Custom 404 Page in Astro

Creating a Custom 404 Page in Astro

Having a custom 404 page on your website can greatly enhance user experience by guiding visitors who may have landed on a broken or non-existent link.

Why a Custom 404 Page?

A well-designed 404 page helps keep visitors engaged and provides them with options to navigate to other parts of your site, rather than leaving them at a dead end.

Steps to Create a 404 Page

1. Create a 404.astro file: Inside your src/pages/ directory, create a new file named 404.astro.

2. Add content to your 404 page: You can add custom HTML, CSS, and even JavaScript to create a user-friendly error page. For example:

   ---
   // 404.astro
   import { Astro } from 'astro/components';
   ---
   
   <Layout>
       <main class="error-page">
           <h1>Oops! Page not found</h1>
           <p>Sorry, we couldn’t find the page you were looking for.</p>
           <a href="/">Go back to the homepage</a>
       </main>
   </Layout>
   

3. Style your 404 page: Use CSS to style your 404 page to match the design of the rest of your site.

4. Test the 404 page: Once you’ve deployed your site, try navigating to a non-existent page (e.g., /nonexistent-page) to see your 404 page in action.

Tips for a Good 404 Page

• Keep it simple: Provide a clear message that the page was not found.
• Offer navigation options: Include links to your homepage or other important pages.
• Add a search bar: Allow users to search for what they were trying to find.

By creating a custom 404 page, you ensure that even when users land on a broken link, they still have a positive experience on your site.