In this section, we will learn how to configure NGINX to serve static content such as HTML, CSS, JavaScript, images, and other files. Serving static content is one of the most common uses of NGINX, and it is a fundamental skill for anyone looking to use NGINX as a web server.
Key Concepts
- Static Content: Files that do not change dynamically and are served directly to the client.
- Document Root: The directory on the server where the static files are stored.
- NGINX Configuration File: The file where you define how NGINX should handle requests.
Steps to Serve Static Content
- Setting Up the Document Root
First, you need to create a directory on your server where you will store your static files. This directory is known as the document root.
- Creating Sample Static Files
Create a simple HTML file to serve as an example.
echo "<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a static HTML page served by NGINX.</p>
</body>
</html>" | sudo tee /var/www/mywebsite/index.html
- Configuring NGINX
Edit the NGINX configuration file to point to your document root. The default configuration file is usually located at /etc/nginx/nginx.conf or /etc/nginx/sites-available/default.
Add the following server block to the configuration file:
server {
listen 80;
server_name mywebsite.com;
location / {
root /var/www/mywebsite;
index index.html;
}
}
- Testing the Configuration
Before restarting NGINX, it's a good practice to test the configuration for any syntax errors.
If the test is successful, you should see a message like:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
- Restarting NGINX
Restart NGINX to apply the new configuration.
- Accessing the Static Content
Open a web browser and navigate to http://your_server_ip/ or http://mywebsite.com/ (if you have configured DNS). You should see the HTML page you created.
Practical Exercise
Exercise 1: Serve Additional Static Files
- Create a new directory called
assetsinside/var/www/mywebsite. - Add a CSS file and an image to the
assetsdirectory. - Update the HTML file to include the CSS file and display the image.
- Modify the NGINX configuration to serve these additional files.
Solution
- Create the
assetsdirectory:
- Add a CSS file and an image:
echo "body { font-family: Arial, sans-serif; background-color: #f0f0f0; }" | sudo tee /var/www/mywebsite/assets/styles.css
sudo cp /path/to/your/image.jpg /var/www/mywebsite/assets/- Update the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Website</title>
<link rel="stylesheet" type="text/css" href="/assets/styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a static HTML page served by NGINX.</p>
<img src="/assets/image.jpg" alt="Sample Image">
</body>
</html>- No need to modify the NGINX configuration further, as the
location /block will serve all files under/var/www/mywebsite.
Common Mistakes and Tips
- File Permissions: Ensure that the NGINX process has read permissions for the files in the document root.
- Configuration Syntax: Always test the NGINX configuration after making changes to avoid syntax errors.
- Caching: Use caching headers to improve the performance of serving static content.
Conclusion
In this section, we learned how to configure NGINX to serve static content. We covered setting up the document root, creating sample static files, configuring NGINX, and testing the setup. We also provided a practical exercise to reinforce the concepts. In the next section, we will explore how to enable directory listings in NGINX.