Hi Guys,

In this example, I will show you How To Configure Nginx to Use Custom Error Pages on Ubuntu 22.04?. I explained simply step by step Nginx to Use Customized Error Pages on Ubuntu 22.04 Example. In this article, we will implement a Create Custom 404 Error Page with NGINX on Ubuntu 22.04. we will help you to give example of 3 Best ways to Create Custom Error Page with NGINX on Ubuntu. Let's see bellow example nginx is now 404 Not Found Error.

You can use this post for ubuntu 14.04, ubuntu 16.04, ubuntu 18.4, ubuntu 20.04, ubuntu 21 and ubuntu 22.04 versions.

Follow the below-given steps to create and use custom error pages on nginx ubuntu 22.04:

Step 1: Create Custom Error 404, 500 Page

Step 2: Configure Custom Error Pages in Nginx

Step 3: Restart Nginx Server

First, create the HTML file for your custom 404 page using nano or your preferred text editor:

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

Insert your custom error into your created file:

<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, create the HTML file for your custom general 500-level error page:

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

Insert your custom error into your created file:

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

Next you can point Nginx to your custom error pages.

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;
    }
}

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;
    }
}

The following command on command line to restart nginx server:

sudo systemctl restart nginx