This content originally appeared on DEV Community and was authored by Bartosz Gordon
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
nginxconfiguration 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;
}
}
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;
}
}
Visit the error_page docs section to explore the rest of the configuration options.
This content originally appeared on DEV Community and was authored by Bartosz Gordon
Bartosz Gordon | Sciencx (2021-06-08T21:05:05+00:00) Configure nginx for Gatsby 404 error page. Retrieved from https://www.scien.cx/2021/06/08/configure-nginx-for-gatsby-404-error-page/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.