← Other topics

Configuring a subdomain on a Nginx web server

Video Notes

Let’s learn how to configure a subdomain on a Nginx web server. I’ll be demonstrating this on a DigitalOcean server running Ubuntu and Nginx.

Step one is to log into your domain provider and find your DNS (Domain Name System) settings for the domain you’re working with. Within your DNS settings you’ll create a new record for your subdomain. There are two record types you might use...

Option 1) Same server as primary domain - CNAME Record

If the subdomain you’re setting up is on the same server as your primary domain, you can configure the subdomain via a CNAME (Canonical Name) record. Here’s an example of what that looks like in my domain provider’s settings (Namecheap):

This sets it up so any traffic to the subdomain demo.codewithsusan.com gets routed to my primary domain, codewithsusan.com. In the next step, we’ll configure our server to handle that traffic.

Option 2) Different server from primary domain - A Record

If you want your subdomain to point to a different server than the one your primary domain points to, use an A (Address) record like this example:

In this example, all traffic to my primary domain (codewithsusan.com) is directed to the IP address while all the traffic to my subdomain (demo.codewithsusan.com) is directed to the IP address of a different server,

Step 2) Identify the site folder

Next, turning our attention to the server, we need to identify the directory that will act as the document root for our subdomain.

For this demo, I will create a new directory within /var/www (a common location for sites on a Nginx server). I will name the directory after the subdomain I'm using (demo.codewithsusan.com):

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

Within this directory, I’ll create a simple index.html file that will load when we visit the site.

Step 3) Configure the site

Next, we need configure Nginx to load this site/subdomain 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.2-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

Example output:

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:

> sudo systemctl restart nginx

Step 5) Test

Finally, test it out. Attempt to load your site URL in the browser and confirm you can see the contents of your index file:

If this info helped you out you can say thanks and support future content by clicking my Amazon affiliate link: https://amzn.to/3UtgnYk. If you make a purchase on Amazon within 24 hours of clicking the link I may receive a micro-commission and it costs you nothing extra. Any income from these sales goes directly to supporting me in making new videos and guides. Thank you for your support!

← Other topics