Client Area

 Client Area

How to setup custom error pages with Nginx

How To Setup Custom Error Pages

Sections

    Nginx default error pages are not very user friendly, but you can easily replace them easily with the template of your choice. In this article, we will learn how to setup custom error pages with Nginx. There are several error pages templates available on Github , and you can easily create your own template as error pages are just simple html files.

    Download error pages templates

    The first step (if you haven’t create your own error pages) is to download a template. At VirtuBox, we have chosen to use server-error-pages published by Alex Phelps. So, we have clones the Github repository in a folder named error, inside the directory /var/www

    cd /var/www
    
    # clone the repository
    git clone https://github.com/alexphelps/server-error-pages.git error
    
    # set www-data as owner
    sudo chown -R www-data:www-data error
    

    Create Nginx configuration

    Then, we have to configure nginx to replace the default error pages with our template, to do so we created a new configuration file named error.conf in the directory /etc/nginx/common, this way we will just have to include this configuration in our nginx vhost to enable our custom error pages, here the content of error.conf :

    error_page 400 /400-error.html;
    error_page 401 /401-error.html;
    error_page 403 /403-error.html;
    error_page 404 /404-error.html;
    error_page 500 /500-error.html;
    error_page 503 /503-error.html;
    error_page 504 /504-error.html;
    
    location ~ /*-error.html {
            try_files $1-error.html @error;
            internal;
    }
    
    location @error {
        root /var/www/error/_site;
    }
    
    

    Add error pages in your vhost

    The last step to use our custom error pages is to include error.conf in our vhost, it can be done by adding the following line inside your server block (vhost) :

    include common/error.conf;
    

    in Nginx

    Feedback