How to customize a 404 error page (ubuntu nginx)

Question

I am currently in the process of setting up my own website, and one of the things I have run into is the ugly 404 error page. I am running a LEMP stack on Ubuntu, so my default error page is an nginx page. Needless to say, I do not like how default error pages look, and would like to change it. I have seen various methods of how to do this, but a lot of them deal with Apache (which may be the same), .htaccess, etc.

However, I am sure there must be an easier way to do this. Isn't the 404 page just a simple .html page that we should be able to edit? How can I edit the default 404 page in the easiest way possible without using someone else's?

Answer 1

The answer is yes, there is an easy way to customize the 404 page as an HTML file, at least on a LEMP stack. Assuming that you have not re-organized "too many" files, the only thing that needs to be done is to create a single file.

Explanation:
If you go to /etc/nginx/sites-available/default.conf and open it, you will notice a block that looks similar to this:

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /usr/share/nginx/html;
    index index.php index.html index.htm;

    # Make site accessible from http://localhost/
    server_name localhost unaviamedia.ca;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
        # Uncomment to enable naxsi on this location
        # include /etc/nginx/naxsi.rules
    }

    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html; 
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php5-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
    }

    .......

}

Disclaimer:
As you can see from this line: root /usr/share/nginx/html; , my home directory is "/usr/share/nginx/html." If yours is different, you will need to change the next file path I mention.

---

Notice this line: error_page 404 /404.html; , midway down the page? This is the path to the 404 HTML error page for your site.

Explanation:

• error_page - specifies that this line pertains to HTTP error pages.
• 404 - the specific HTTP error code that this page will respond to.
• /404.html - the "root-relative" path to the file, with the file name included.
  • If your root is different than the one above, you will need to change this file path to reflect the difference (as mentioned above).

However, if you go to the path above, you will notice that there is no file by that name in the directory. Therefore, the default nginx error page will display.

To change this, merely make a custom HTML page that will be your 404 error page, and save it in your root directory as "404.html." Then, the above path (error_page 404 /404.html;) will be able to display your custom page when a 404 error occurs.

---

I'm fairly certain that you could add the necessary "error_page" lines for whatever other HTTP error codes you may wish to cover for, or route several to the same generic error page (but I have not tried this). Also, I'm fairly sure that the setup will be the same for other server types, but again, I have not tried this.

Please let me know if this is incorrect (or could be done better), or if this could lead to accidental problems farther down the road.