NGINX is one of the most popular web servers in the world, and it is open-source software that provides a complete web server, reverse proxy feature, a content management cache, load balancing, and media streaming for HTTP and non-HTTP servers. We can manage the traffic load of a large number of websites on the internet using Nginx.
In this blog, we can discuss how to create a custom 404 page in Nginx.
First of all, we can install Nginx using the following commands.
sudo apt update
sudo apt install nginx
Before testing Nginx, you need to configure the firewall software to allow access to the service. During installation, Nginx registers itself as a service with ufw (Uncomplicated FireWall), simplifying the process of granting access to Nginx.
The following command list the application configurations that ufw knows how to work:
sudo ufw app list
The above list will include the three profiles available for Nginx. The three profiles are:
* Nginx Full: This profile opens both port 80 (normal, unencrypted web traffic) and port 443 (TLS/SSL encrypted traffic)
* Nginx HTTP: This profile opens only port 80 (normal, unencrypted web traffic)
* Nginx HTTPS: This profile opens only port 443 (TLS/SSL encrypted traffic)
To ensure optimal security, enabling the most restrictive profile that permits the desired traffic configuration is advisable. In this case, we only need to allow traffic on port 80.
This can be enabled by running the command:
sudo ufw allow 'Nginx HTTP'
You can check the status of it by running the following command:
sudo ufw status
This will give the output as status active.
After the installation, we can now create a custom 404 page in Nginx.
Using the directory /usr/share/nginx/html, you can add a custom error page where Nginx sets its default document root. You can make a page for 404 errors called custom_404.html.
First, create the HTML file for the custom 404 page using nano:
sudo nano /usr/share/nginx/html/custom_404.html
Now, you can insert the custom error in the created file.
<h1 style='color:red'>Error 404</h1>
<h2>OOPS! PAGE NOT FOUND :-(</h2>
<p>Sorry, the page you're looking for doesn't exist.</p>
Save the file by clicking CTRL+0 and CTRL+X to exit.
Next, you will instruct Nginx to utilize these pages whenever the associated error condition arises.
In the Nginx web server, server blocks (similar to virtual hosts in Apache) provide a way to encapsulate configuration details and host multiple domains from a single server.
We can use the default server block file called default. This default server block can be opened from the directory /etc/nginx/sites-enabled.
sudo nano /etc/nginx/sites-enabled/default
Next, you can direct the 404 errors to this custom 404 page using the error_page directive. When a 404 error occurs(when a requested file is not found, the custom page you created will be served. For that, you can add this in the file opened:
server{
listen 80 default_server;
. . .
error_page 404 /custom_404.html {
location = /custom_404.html {
root /usr/share/nginx/html;
internal;
}
}Save and close the file, and you can test the configuration file’s syntax by typing:
sudo nginx -t
Before proceeding, ensure that any reported errors are resolved. Once all syntax errors have been addressed, restart Nginx by executing the following command:
sudo systemctl restart nginx
You can now see the custom 404 page that you have defined when requesting a file that doesn't exist through your server's domain or IP address.
http://server_domain_or_IP_address/error
This will show the error page as:
This way, you can serve custom error pages for your site.