How To Create Custom Error Pages Nginx Ubuntu 22.04

Create and use custom error 404, 500 pages on nginx ubuntu 22.04; Through this tutorial, we will show you how to create and use custom error 404, 500 pages in nginx ubuntu 22.04.

How To Create and Use Custom Error Pages in Nginx Ubuntu 22.04

Steps to create and use custom error pages nginx ubuntu 404, 500 page:

• Step 1 – Create Custom Error 404, 500 Page
• Step 2 – Configure Custom Error Pages in Nginx
• Step 3 – Restart Nginx Server

Step 1 – Create Custom Error 404, 500 Page

Use the following command on command line to create the HTML file for your custom 404 page:

sudo nano /usr/share/nginx/html/custom_404.html

Then add the following html code in custom error:

<h1 style='color:red'>Error 404: Not found :-(</h1>
<p>I have no idea where that file is, sorry. Are you sure you typed in the correct URL?</p>

Save and exit the file. If you’re using nano, hit CTRL+O to save then hit CTRL+X to exit.

Next, execute the following command on command line to create the HTML file for custom general 500-level error page:

sudo nano /usr/share/nginx/html/custom_50x.html

Then add the following html code in custom error:

<h1>Oops! Something went wrong...</h1>
<p>We seem to be having some technical difficulties. Hang tight.</p>

Step 2 – Configure Custom Error Pages in Nginx

Now execute the following command to open ngnix custom error page configuration file:

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

Use the error_page directive so that when a 404 error occurs (when a requested file is not found), the custom page you created is served

server {
    listen 80 default_server;


    . . .

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

Thne, add the directives to make sure that when Nginx encounters 500-level errors (server-related problems), it will serve the other custom page made:

server {
    listen 80 default_server;


    . . .

    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 /testing {
        fastcgi_pass unix:/does/not/exist;
    }
}

Step 3 – Restart Nginx Server

Execute the following command on command line to restart nginx server:

sudo systemctl restart nginx

Conclusion

Through this tutorial, we have learn how to create and use of custom error 404, 500 pages on nginx ubuntu 22.04.

Recommended Linux Nginx Tutorials