NGINX custom error page

When NGINX attempts to process a client’s request, it returns an error each time it encounters an error. An HTTP response code and a brief description are included with each error. The error is typically presented to the user via a default HTML page.

NGINX custom error page create

First need to create a simple html page for show the custom error page.

Sample HTML page

$ sudo /var/www/html
$ sudo touch custom-error.html
<!DOCTYPE html> <html lang="en"> 
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<style> body { display: flex; flex-flow: row wrap; align-content: center; justify-content: center; } div { width: 100%; text-align: center; } .number { background: #fff; position: relative; font: 900 30vmin "Consolas"; letter-spacing: 5vmin; text-shadow: 2px -1px 0 #000, 4px -2px 0 #0a0a0a, 6px -3px 0 #0f0f0f, 8px -4px 0 #141414, 10px -5px 0 #1a1a1a, 12px -6px 0 #1f1f1f, 14px -7px 0 #242424, 16px -8px 0 #292929; } .number::before { background-color: #673ab7; background-image: radial-gradient(closest-side at 50% 50%, #ffc107 100%, rgba(0, 0, 0, 0)), radial-gradient(closest-side at 50% 50%, #e91e63 100%, rgba(0, 0, 0, 0)); background-repeat: repeat-x; background-size: 40vmin 40vmin; background-position: -100vmin 20vmin, 100vmin -25vmin; width: 100%; height: 100%; mix-blend-mode: screen; -webkit-animation: moving 10s linear infinite both; animation: moving 10s linear infinite both; display: block; position: absolute; content: ""; } @-webkit-keyframes moving { to { background-position: 100vmin 20vmin, -100vmin -25vmin; } } @keyframes moving { to { background-position: 100vmin 20vmin, -100vmin -25vmin; } } .text { font: 400 5vmin "Courgette"; } .text span { font-size: 10vmin; } </style>
<div class="number">Error %{ERRORNAME}</div> 
<div class="text"><span>Oops...</span>
<h1>Contact support</h1>

Here ERRORNAME come from nginx

Configuring NGINX Error Page

First, we will create an custom-error-page.conf configuration file in the snippet directory at the /etc/nginx/snippets path.

Read this How to install cloudflare warp on ubuntu 22.04

The following command will create a new directory with the name snippets if it does not already exist in the /etc/nginx path.


$ sudo mkdir -p /etc/nginx/snippets

Then, in the snippets directory, run the following command to create the custom-error-page.conf configuration file.

$ sudo nano /etc/nginx/snippets/custom-error-page.conf

After the file has been opened for editing, copy the code below, paste it into the configuration file, and then save it.

error_page 404 403 500 503 /custom-error-page.html;
location = /custom-error-page.html {
  sub_filter '%{ERRORNAME}' $status;
  sub_filter_once off;
  root /var/www/html;

NGINX will return the error-page.html response whenever it receives a 404,500,503  response from the user.

After that, the custom-error-page.conf file needs to be included in the NGINX configuration the NGINX configuration file using the following command.

$ sudo nano /etc/nginx/sites-available/default

Finally, you can restart the NGINX web server.

$ sudo systemctl reload nginx

Finally open your browser and visit any page that does not exist & error page show.


About Tech Flow Zone

Check Also

How to install cloudflare warp on ubuntu 22.04

How to install cloudflare warp on ubuntu 22.04

The Cloudflare WARP client sits between your device and the Internet, and has several connection modes to …

One comment

  1. Thank you .it’s work

Leave a Reply

Your email address will not be published. Required fields are marked *