DevTestOps Insights by Pankaj

Serve Static Content with Nginx

Pankaj Suryavanshi's photo
Pankaj Suryavanshi
·

4 min read

In a previous blog, we learned how to set up Nginx using Docker. If you haven't checked it out, you can find it here. Now, let's dive into serving static content using Nginx and enhance our web server setup.

Title: Serving Static Content with Nginx

In this tutorial, we'll walk through the process of serving static content using Nginx, an essential skill for web developers. Follow these steps to set up your static content delivery using Nginx.

Step 1: Create a Directory for Your Website

First, let's create a directory to hold the static content files. Open your terminal and run:

cd etc/nginx
mkdir website
cd website

Step 2: Create an HTML Page

Inside the website directory, create an index.html file. This will be the main HTML page that users will access:

<!-- index.html -->
<html>
<head>
    <title>Pankaj</title>
</head>
<body>
    <h1>Hello from the Nginx Web Page</h1>
</body>
</html>

Step 3: Update Nginx Configuration

Navigate back to the parent directory using cd .., and then open the Nginx configuration file using your preferred text editor. For instance:

vim nginx.conf

Inside the configuration file, define the server block to handle serving static content:

events {
}

http {
    server {
        # Listen directive specifies the port for incoming connections.
        listen 80;  
        # The underscore (_) acts as a catch-all for all server names.
        server_name _; 

        # Specify the root directory for serving content
        root /etc/nginx/website;  

        location / {
            # Default behavior: Serve files from the specified root directory
        }
    }
}

Step 4: Reload Nginx Configuration

After updating the configuration, save and exit your text editor. Reload Nginx to apply the changes:

nginx -s reload
nginx -t

Refresh the browser and check the output

Step 5: Adding Some Styling

Let's enhance our page by adding some styling. In the website directory, create a style.css file:

touch style.css
vim style.css

Add the following CSS code to the style.css file:

/* style.css */
body {
    background-color: lightblue;
}

Step 6: Linking CSS to HTML

Open the index.html file once again and add a link to your CSS file:

vim index.html

Edit the HTML to include the CSS link:

<!-- index.html -->
<html>
<head>
    <link rel="stylesheet" href="style.css"/> <!-- Link to your style.css file -->
    <title>Pankaj</title>
</head>
<body>
    <h1>Hello from the Nginx Web Page</h1>
</body>
</html>

Step 7: Reload Nginx Configuration

After updating the configuration, save and exit your text editor. Reload Nginx to apply the changes:

nginx -s reload
nginx -t

Refresh the browser and check the output

Step 7: Enhancing Configuration

Problem

As I highlighted Content-Type for the style.css file it is showing plain text but I want Content-Type as CSS for best practice

Edit the nginx.conf file again to handle different MIME types:

vim nginx.conf

Certainly! Let's break down the provided Nginx configurations and explain the concepts of types and MIME types:

Configuration 1: Using the types Block

http {
    types {
        text/css css;   # Associate .css files with the "text/css" MIME type
        text/html html; # Associate .html files with the "text/html" MIME type
    }

    server {
        listen 80;
        server_name _;
        root /etc/nginx/website;
    }
}

Configuration 2: Using the mime.types File

events {
}

http {
    include /etc/nginx/mime.types;

    server {
        listen 80;
        server_name _;
        root /etc/nginx/website;
    }
}

In both configurations, the goal is to define how Nginx handles incoming requests and serves content. The first configuration uses the types block to explicitly define mappings between file extensions and MIME types, while the second configuration includes the mime.types file that contains preconfigured mappings. Both approaches ensure that the correct MIME types are included in the HTTP response headers when serving different types of files, enhancing the compatibility and proper rendering of content in web browsers.

Step 8: Reload Nginx Configuration

After updating the configuration, save and exit your text editor. Reload Nginx to apply the changes:

nginx -s reload
nginx -t

Refresh the browser and check the output

Conclusion

You've successfully set up Nginx to serve static content, including an HTML page with linked CSS. By following these steps, you're equipped to efficiently deliver static assets to users, enhancing your web applications' performance and user experience. For the full context of our Nginx setup, don't forget to refer to the previous blog.

nginxDockerstaticStatic Website