Your First Nginx Configuration for a Static Site

Welcome to your first foray into Nginx! In this section, we'll build a foundational Nginx configuration that allows you to serve a simple static website. Think of this as the digital equivalent of setting up your storefront. We'll start with the absolute essentials and gradually introduce key concepts.

Every Nginx installation comes with a default configuration file, often located at /etc/nginx/nginx.conf. However, for managing individual sites, it's best practice to create separate configuration files within a dedicated directory, typically /etc/nginx/sites-available/ and then symlink them to /etc/nginx/sites-enabled/. This keeps things organized and makes it easy to enable or disable sites.

Let's create our first configuration file. We'll name it mysite.conf.

Now, paste the following basic configuration into this file. We'll break down each part.

Let's dissect this configuration block by block:

• server { ... }: This is the fundamental block in Nginx. It defines a virtual server and is responsible for handling requests for a specific domain or IP address.

• listen 80;: This directive tells Nginx to listen for incoming connections on port 80, which is the standard port for HTTP traffic. If you were setting up HTTPS, you'd also see listen 443 ssl; here.

• server_name example.com www.example.com;: This directive specifies the domain names that this server block should respond to. When a client requests example.com or www.example.com, Nginx will use this configuration to handle the request. You should replace example.com with your actual domain name.

• root /var/www/mysite;: The root directive defines the document root for requests. This is the directory where Nginx will look for your website's files. In this case, we're assuming your website files will be located in /var/www/mysite on your server. You'll need to create this directory and place your index.html file inside it.

• index index.html index.htm;: The index directive specifies the default file to serve when a directory is requested. If a user navigates to http://example.com/ (without a specific file), Nginx will first try to find index.html in the root directory, and if not found, it will then look for index.htm.

• location / { ... }: The location block defines how Nginx should handle requests for specific URI patterns. The / pattern matches all requests. Inside this block, we have:

• try_files $uri $uri/ =404;: This is a crucial directive for static sites. It tells Nginx to try serving the requested URI as a file ($uri), then as a directory ($uri/), and if neither exists, return a 404 Not Found error. This is a common and robust way to handle static file serving.

Now that we have our configuration file, we need to enable it. We do this by creating a symbolic link from sites-available to sites-enabled.

Before we restart Nginx, it's always a good idea to test your configuration for syntax errors.

If the test is successful, you'll see output indicating that the syntax is ok and the test is successful. If there are errors, Nginx will point you to the line causing the problem.

Finally, restart Nginx to apply the new configuration.

You've now set up your first Nginx configuration for a static website! If you've pointed your domain's DNS to your server and created the /var/www/mysite/index.html file, you should be able to visit http://example.com in your browser and see your content.

graph TD
    A[User Request] --> B{Nginx Server}
    B --> C{Server Block Match}
    C --> D{Root Directory}
    D --> E{Index File Check}
    E -- Found --> F[Serve Content]
    E -- Not Found --> G[404 Error]
    F --> H[Response to User]
    G --> H