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;