How to create Nginx custom error pages

Last updated on June 4, 2022

It is always better to show the helpful information to the users instead of the default raw message. In this guide, we’ll demonstrate how to configure Nginx to use custom error pages.

Let’s create a directory called errors in the root folder. Inside error folder, create a file called error_404.html for 404 error messages and create a file called error_50x.htlm for 500-level error messages.

error_404.html

    
        
            
        
        

Page Not Found

            
We're very sorry to inform you that the page you are looking for could not be found, please accept our apologies, and follow one of the following options



 	
Contact the webmaster and send him the link of the page you were trying to reach, and the page where it is published


 	
Go to our Homepage, and use our search box, to find what you were looking for.



        	
    

error_50x.html

    
    
        
    
    

Oops! Something went wrong...

        
Contact the webmaster and send him the link of the page you were trying to reach, and the page where it is published
    	
    

Now open your nginx config file, generally, it will be located at /etc/nginx/sites-available/

Open config file with vi editor (you can use other editor also)

$ vi /etc/nginx/sites-available/default

We use error_page directive to serve custom pages which you have created, as shown below we will use error_page directive with location block.We will create a location block for the file, where we are able to ensure that the root matches our file system location and that the file is only accessible through internal Nginx redirects, not requestable directly by clients/visitors

Add this to consutome 404 error page –

        error_page 404 /custom_404.html;
        location = /custom_404.html {
                root /usr/share/nginx/html;
                internal;
        }

Add this to serve custom 50x-level error page –

        error_page 500 502 503 504 /custom_50x.html;
        location = /custom_50x.html {
                root /usr/share/nginx/html;
                internal;
        }

Here is the complete config file (/etc/nginx/sites-available/).

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        error_page 404 /custom_404.html;
        location = /custom_404.html {
                root /usr/share/nginx/html;
                internal;
        }

        error_page 500 502 503 504 /custom_50x.html;
        location = /custom_50x.html {
                root /usr/share/nginx/html;
                internal;
        }       

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.html =404;
        }

}