Create a custom 404 page on nginx server
Nginx always provides an error when it discovers a problem while attempting to handle a client's request. Each error has a brief description and an HTTP response code. A user will typically see the problem via a basic default HTML page. Fortunately, you can set up nginx to show users of your website or web application custom error pages. The nginx error page directive, which is used to provide the URI that will be presented for a particular error, can be used to accomplish this. Additionally, you may use it as an option to change the HTTP status code in the response headers that are delivered to the client.
How to generate a custom 404 page?
When a requested URL cannot be found on your website, nginx enables you to define a custom 404 not found page that will be immediately shown. This enables you to show your website visitors clear next actions when they are unable to locate a page on your website. These instructions can be used to set up custom error pages in nginx for a variety of error codes, including 404, 403, and 500, among others.
Step1: Create 404 error page
First, we need to create a file in web root (/var/www/domain.com/public_html/) which will be used as the custom page for 404 not found error HTTP response.
Open the file in a text editor. (make sure directory, i.e. /var/www/domain.com/public_html/ , exists)
$ sudo vim /var/www/domain.com/public_html/404.html
Add a custom 404 page source (code). i.e. sample HTML code
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 520px;
width: 100%;
line-height: 1.4;
text-align: center;
}
.notfound .notfound-error {
position: relative;
height: 200px;
margin: 0px auto 20px;
z-index: -1;
}
.notfound .notfound-error h1 {
font-family: 'Montserrat', sans-serif;
font-size: 200px;
font-weight: 300;
margin: 0px;
color: #211b19;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media only screen and (max-width: 767px) {
.notfound .notfound-error h1 {
font-size: 148px;
}
}
@media only screen and (max-width: 480px) {
.notfound .notfound-error {
height: 148px;
margin: 0px auto 10px;
}
.notfound .notfound-error h1 {
font-size: 120px;
font-weight: 200px;
}
.notfound .notfound-error h2 {
font-size: 30px;
}
.notfound a {
padding: 7px 15px;
font-size: 24px;
}
.h2 {
font-size: 148px;
}
}
</style>
</head>
<body>
<div id="notfound">
<div class="notfound">
<h1>Sorry!</a></h1>
<div class="notfound-error">
<p>This page cannot be found.</p>
</div>
</div>
</div>
</body>
</html>
Now, Save the file and close the editor.
Step2: Configure the page as default 404 response
Open the default nginx configuration file (/etc/nginx/nginx.conf) or existing virtual host configuration (/etc/nginx/sites-enabled/domain.com.conf) in the vim or nano editor with this command.
$ sudo vim /etc/nginx/sites-enabled/domain.com.conf
Add these lines to the server block in the config file. So, Nginx will render a 404.html page instead of returning 404 & 403 error response and redirect to URI/404.html.
server {
.....
error_page 404 403 /404.html;
location = /404.html {
root /var/www/domain.com/public_html;
internal;
}
.....
}
Finally, You can save the file and exit the editor.
Verify our configuration, then launch Nginx.
It is a recommended practice to test new configurations before loading them to the production server because a single syntax mistake will prevent the Nginx service from running, which will prevent users from accessing your website. You can use the following command to do so.
$ sudo nginx -t -c /etc/nginx/sites-available/domain.com.conf
Enable the site if no issues were discovered. In order to accomplish this, we must build a symbolic link between the site configuration file and the sites-enabled directory using the following command:
$ sudo ln -s /etc/nginx/sites-available/domain.com.conf /etc/nginx/sites-enabled/domain.com.conf
Finally, Start/Restart/Reload the server to load the changes:
$ sudo systemctl restart nginx
or
$ sudo service nginx restart
