DEV Community

loading...
Cover image for Configure nginx for Gatsby 404 error page

Configure nginx for Gatsby 404 error page

Bartosz Gordon
Originally published at bartoszgordon.com ・2 min read

During Gatsby page development, when you hit a page that doesn't exist, you encounter a screen similar to the one below.

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


In production, however, the 404 page doesn't get handled by itself unless you use a dedicated hosting service for Gatsby pages. That's because Gatsby's development server is no longer present. The production bundle is just a bunch of static files. Making use of a web server (like nginx) to serve the production page forces you to configure the error pages yourself.

Disclaimer: the following nginx configuration is pretty basic, don't use it in production.

Let's assume your blog is hosted on the personalblog.com domain and is served from the /var/www/blog directory on port 80.

server {
        listen 80;
        root /var/www/blog;
        server_name personalblog.com www.personalblog.com;
        location / {
                try_files $uri $uri/ =404;
        }
}
Enter fullscreen mode Exit fullscreen mode

After entering a route that doesn't exist in your production Gatsby site, nginx displays its default 404 error page.

Adding the error_page 404 /404; line makes nginx redirect to the /404 route in case of a 404 error. Your custom Gatsby 404 page will be displayed.

server {
        listen 80;
        root /var/www/blog;
        server_name personalblog.com www.personalblog.com;
        error_page 404 /404;
        location / {
                try_files $uri $uri/ =404;
        }
}
Enter fullscreen mode Exit fullscreen mode

Visit the error_page docs section to explore the rest of the configuration options.

Discussion (0)