How to Create Custom 404 Error Pages in Nginx
Nginx is a powerful web server and reverse proxy that plays a crucial role in serving web content efficiently. It’s widely used for hosting websites and web applications, and it provides a flexible way to customize error pages. Custom error pages not only improve the user experience but also allow you to maintain a consistent brand identity. In this guide, we’ll walk you through creating and configuring custom 404 error pages in Nginx.
Prerequisites
Before we begin, ensure you have the following prerequisites in place:
Nginx Installed: Make sure Nginx is installed on your server. If it’s not, you can typically install it using your system’s package manager.
Basic HTML Knowledge: You should be familiar with HTML since custom error pages are typically HTML files.
Creating Custom 404 Error Pages
Let’s dive into creating custom 404 error pages for your website:
1. Choose the Error Page Directory
Common Error Pages For All Websites
Start by selecting a directory to store your custom error pages. While you can choose any location, a common practice is to create a directory within your Nginx configuration folder. For instance, create a directory named error_pages within /etc/nginx/:
sudo mkdir /etc/nginx/error_pages
Project Specific Error Pages
You can maintain your error pages in your project repo. For ease, create 404.html, 500.html, etc in your deployment root folder.
2. Design Your Custom 404 Error Page
Inside the chosen directory, create an HTML file for your custom 404 error page. This file will contain your custom message, design, and branding elements. Let’s create a custom 404.html page as an example:
sudo nano /etc/nginx/error_pages/404.html
In the HTML file, you can add your own content. Here’s a basic example:
<!DOCTYPE html>
<html>
<head>
<title>404 - Page Not Found</title>
</head>
<body>
<h1>404 - Page Not Found</h1>
<p>Sorry, the page you are looking for does not exist.</p>
</body>
</html>
Save and exit the file.
3. Configure Nginx to Use Custom Error Pages
Common Error Pages For All Websites
Now, you need to tell Nginx to use your custom error pages. Open your Nginx site configuration file in a text editor. The location of this file may vary, but it’s often found at /etc/nginx/sites-available/default:
sudo nano /etc/nginx/sites-available/default
Inside the server block, add or modify the error_page directive for the 404 error code:
error_page 404 /error_pages/404.html;
This directive instructs Nginx to use your custom 404.html page when a 404 error occurs. Save and exit the configuration file.
Project Specific Error file
Configure your location directive such that it serves 404.html if it could not serve requested URL in $url or $url/ or $url/index.html format.
location / {
try_files $uri $uri/ /404.html;
}
4. Test the Nginx Configuration and Reload
Before applying the changes, it’s essential to test the Nginx configuration to catch any syntax errors:
sudo nginx -t
If the test is successful, reload Nginx to apply the changes:
sudo systemctl reload nginx
Testing Your Custom 404 Error Page
To ensure that your custom 404 error page works as expected, try accessing a non-existent page on your website or induce a 404 error scenario. For instance, visiting http://yourdomain.com/nonexistentpage should display your custom 404 error page.
Congratulations! You’ve successfully configured Nginx to display a custom 404 error page. This not only enhances the user experience but also helps maintain a professional and consistent appearance on your website during error scenarios.
Custom error pages serve as a valuable tool for conveying meaningful information to users and reinforcing your brand’s identity. Use this guide to tailor your error pages to your website’s design and messaging, ensuring a seamless and user-friendly experience for your visitors.
