NGINX allows you to configure custom 404 page for your website, which are automatically rendered in case a requested URL is not found on your website. This allows you to display intuitive next steps to your website visitors, when they are unable to find a page on your website. You can use these steps to configure custom error pages in NGINX, for various error codes such as 404, 403, 500, 502, etc. Here are the steps to create custom 404 page in NGINX.
How To Create Custom 404 Page in NGINX
Here is how to create custom 404 page in NGINX.
1. Create 404 error page
Create custom error file error404.html using text editor, or a page builder like Squarespace, WordPress, or Wix, and place it in website root folder. You can change the file name as per your requirement.
Also read : How to Limit Download Speed in NGINX
2. Open NGINX configuration file
Open terminal and run the following command to open NGINX server configuration file.
$ sudo vi /etc/nginx/nginx.conf
If you have configured separate virtual hosts for your website (e.g www.example.com), such as /etc/nginx/sites-enabled/website.conf then open its configuration with the following command
$ sudo vi /etc/nginx/sites-enabled/website.conf
Alternatively, you can also open the default virtual host configuration file.
$ sudo vi /etc/nginx/sites-enabled/default
Also read : How to Enable GZIP compression in NGINX
3. Configure Custom 404 error page
We will use the error_page directive to configure custom error page for 404 response code. You can place it in http, server, location, if server blocks.
Add the following line to your server block
server {
...
error_page 404 /error404.html;
...
}
As per the above server block, NGINX will render error404.html page instead of returning 404:Page not found error response.
Also read : How to Enable Caching in NGINX
4. Restart NGINX Server
Run the following command to check syntax of your updated config file.
$ sudo nginx -t
If there are no errors, run the following command to restart NGINX server.
$ sudo service nginx reload #debian/ubuntu $ systemctl restart nginx #redhat/centos
That’s it. Now NGINX will automatically return your custom error page for 404 page not found errors. Similarly, you can configure custom error pages for other error codes such as 403, 500, 502, etc. by changing error code number and response URL in error_page directive. Ubiq makes it easy to visualize data, and monitor them in real-time dashboards. Try Ubiq for free.
