Configuring sites/URLs on a Nginx web server

Let’s learn how to configure a new site/URL on a Nginx web server. As an example, I’ll configure a site via the URL http://demo.codewithsusan.com. I’m using a subdomain for the example but the same procedures apply for a primary domain.

I’ll be demonstrating this on a DigitalOcean server running Ubuntu and Nginx.

In the instructions that follow, swap in demo.codewithsusan.com with whatever site/URL you’re configuring.

Step 1) Configure domain

First, we need to update the settings for our domain or subdomain so that it points to the IP address of our server.

Log into your domain provider and find your DNS settings for the domain you’re working with. Within your settings create a new A Record that maps your domain or subdomain to your server’s IP address.

Here’s an example of what that looks like in my domain provider’s settings (Namecheap):

Step 2) Create the site folder

Next, let’s set up the site on the server by creating a new directory within /var/www/ that will hold the site’s files. We’ll name this directory after the site’s URL:

> sudo mkdir /var/www/demo.codewithsusan.com

Within this directory, create a simple index.html file to kick things off. You can do that using Nano, or here’s a one line command that will get the job done:

> echo "<h1>Hello from demo.codewithsusan.com</h1>" | sudo tee /var/www/demo.codewithsusan.com/index.html

Step 3) Configure the site

Next, we need to set up a URL for this site by creating a new config file in /etc/nginx/sites-available/.

You can create/edit this new file with Nano:

> sudo nano /etc/nginx/sites-available/demo.codewithsusan.com

You can call your config file whatever you want, but I like to name it after the site I'm creating (in this case, demo.codewithsusan.com).

Within my new config file, I’ll use the following Nginx site config. Replace server_name and root as appropriate for your site.

server {

    # Port 80 is used for incoming http requests
    listen 80;

    # The URL we want this server config to apply to
    server_name demo.codewithsusan.com;

    # The document root of our site - i.e. where its files are located
    root /var/www/demo.codewithsusan.com;

    # Which files to look for by default when accessing directories of our site
    index index.php index.html;

    # All requests that end with .php will be handled by the server’s PHP install
    # If you’re not using PHP you can omit this block
    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.0-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

To save your changes and exit Nano, Type ctrl + x, then y, then hit Enter.

Step 4) Activate

In order to activate the above config/site, we need to symbolically link it to the /etc/nginx/sites-enabled directory. You can do this using the link command:

> sudo ln -s /etc/nginx/sites-available/demo.codewithsusan.com /etc/nginx/sites-enabled

Next, run the following command to check your configs making sure there are no syntax errors:

> sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

If all looks good, restart Nginx to make the changes take effect:

> systemctl restart nginx

Step 5) Test