Configure Nginx for Gatsby 404 Error Page

1 min read


If you visit a Gatsby page, you'll see a screen similar.



If you created an individual 404 page, for example , in src/pages/404.js, you can click the Preview custom page to display it. The /404 route can do the job as well.



In production, however the 404 page does not get handled by itself unless you use an exclusive hosting service for Gatsby pages. This is because the Gatsby server for development is no longer in use. The production bundle is just an assortment of static files. That's how to be me Making use of web servers (like nginx) to serve the production page forces you to configure the error pages by yourself.



Disclaimer: The following nginx configuration is pretty basic, do not use it in production.



Let's say your blog is hosted on personalblog.com and is being served by the /var/www/blog directory on port 80.



nginx displays the default 404 error page after you enter the route that doesn't exist on your production Gatsby site.



The error_page 404/404 line will redirect nginx to the /404 route in the event of an error 404. Your custom Gatsby page 404 will be displayed.



Check out the error_page Docs section to discover the rest of the configuration options.

In case you have found a mistake in the text, please send a message to the author by selecting the mistake and pressing Ctrl-Enter.
Comments (0)

    No comments yet

You must be logged in to comment.

Sign In / Sign Up