NGINX Custom Error Page

NGINX Custom Error Page

In this article, we will learn How to use a custom error page with NGINX on Ubuntu 18.04?

On the Ubuntu OS NGINX use "/usr/share/nginx/html" for storing the default documents. Let's first open the directory and list down all its contents.

Code

cd /usr/share/nginx/html
ls

In the directory, it contains only one index.html file. The content of the index.html file is similar to the one available in "/var/www/html" directory with the name "index.nginx-debian.html". We will use the same directory for storing all our default custom pages. We will use two different error pages. The first one is the custom_error_404.html. It is for 404 errors. Another one is custom_error_50x.html. The second html file is a generic error file for all 500 error messages. 
Let's create our first custom error message file for 404 errors. Execute the following command in the terminal to open the nano editor with the file name custom_error_404.html. 

Code

sudo nano custom_error_404.html

You can use your own content or you can copy and paste following HTML code in the nano editor.

Code

<html>
<head>
	<title>Custom Error Page</title>
</head>
<body>
	<p>
		<h1>50X</h1>
		<br/> Page Not Found.
	</p>
	<p>
		Add your own home page URL.
		<a href='#' onclick="window.location='/';"> Go Home </a>
	</p>
	<p>
		This is a demo custom error page. Used for <a href="https://vl.fyi/OZuODx2OKZ">NGINX Custom Error Page Tutorial</a> by Mayank Sanghvi.
	</p>
	<p>
		If you are interested in more free 404 Page template. Check this <a href="https://vl.fyi/Dx2OZuOKZ">URL</a>
	</p>
</body>
</html>

To save the file use Ctrl+O from your keyboard. To close the nano editor use Ctrl+X from your keyboard.

Next, we need to create a custom error file for all 500 errors. For this execute the following command in the terminal. 

Code

sudo nano custom_error_50x.html

The above command will open the nano editor with custom_error_50x.html file.
Again, you can use your own HTML code or you can copy and paste the following HTML code.

Code

<html>
<head>
	<title>Custom Error Page</title>
</head>
<body>
	<p>
		<h1>50X</h1>
		<br/> Server Error.
	</p>
	<p>
		Add you own home page URL. or Contact Information.
		<br/>
		<a href='#' onclick="window.location='/';"> Go Home </a>
	</p>
	<p>
		This is a demo custom error page. Used for <a href="https://vl.fyi/OZuODx2OKZ">NGINX Custom Error Page Tutorial</a> by Mayank Sanghvi.
	</p>
	<p>
		If you are interested in more free 500 Page template. Check this <a href="https://vl.fyi/Dx2OZuOKZ">URL</a>
	</p>
</body>
</html>

To save the file, use Ctrl+O from your keyboard. To close the nano editor use Ctrl+X from your keyboard.
Our Custom error files are now ready. Next, we need to edit the NGINX default configuration file.  Use the following command to open NGINX default config file in the nano editor.

Code

sudo nano /etc/nginx/sites-enabled/default

In the default config file add following lines.

Code

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

        error_page 500 502 503 504 /custom_error_50x.html;
        location = /custom_error_50x.html {
                root /usr/share/nginx/html;
                internal;
        }
        
        location /display505error {
                fastcgi_pass unix:/path/does/not/exist;
        }

The first two location code is for custom 404 and 500 errors
The last location code is added to generate a 500 error.  To apply the above default config file changes first test the NGINX configuration status. If it is OK, then restart the services. Following command is used to test and restart the NGINX services.

Code

sudo nginx -t
sudo service nginx restart

To test 404 errors, visit any location which is not available on your server. 
For us, we used. 
http://<ServerIP>/FileNotFound.html 
To test 500 error visit the following URL. 
http://<ServerIP>/display505error 
Similarly, you can create custom html files for all the required error codes. 
Congratulations, we are done with the configuration for the custom error pages. 
You may also like the following articles.

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share