configure custom 404 page in nginx

How To Create Custom 404 Page in NGINX

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, 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 httpserverlocationif 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.


About Ubiq

Ubiq is a powerful dashboard & reporting platform for small & medium businesses. Build dashboards, charts & reports for your business in minutes. Get insights from data quickly. Try it for free today!