How to Create a Subdomain with Cloudflare and nginx: A Step‐by‐Step Guide

Subdomain Creation Guide

Last Updated: September 4, 2023

I have successfully created the fem subdomain on daishodesign.com, and it is accessible via https://fem.daishodesign.com. Below, I provide detailed steps for creating this subdomain.

Creating a DNS Record (Cloudflare)

1. Log in to Cloudflare: Access your Cloudflare account.

2. Select Your Domain: Choose daishodesign.com from the list of domains associated with your account.

3. Add a DNS Record: Click on the + Add record option.

4. Specify Record Type: Choose A as the record type.

5. Enter Subdomain Name: In the Name field, input fem.

6. Assign IP Address: Provide the IP address for daishodesign (e.g., 192.18.153.207) in the IPv4 address field.

7. Save the Record: Confirm the changes by clicking the "Save" button.

   Please note that the propagation of the A record may take some time, but it typically resolves within a few minutes based on my previous experiences.

Configuring a Server Block (nginx)

1. Access Your Server: Log in to your server.

2. Navigate to nginx Configuration Folder: Head to the /etc/nginx/sites-available directory. Here, you should find the existing daishodesign.com file.

3. Create a Server Block Configuration File: Generate a new server block configuration file for fem.daishodesign.com:

   sudo vim fem.daishodesign.com

4. Edit the Configuration File: Add the following content to the fem.daishodesign.com file:

   server {
       listen 80;
       # listen [::]:80;
   
       root /var/www/fem.daishodesign;
       index index.html;
   
       server_name fem.daishodesign.com;
   
       location / {
           # Additional website configuration goes here.
       }
   }

   Note: The lines listen [::]:80; and location / {...} are commented out in the example above. The subdomain should function correctly without these lines.

   Caution: Avoid adding another server block to the daishodesign.com file as was done for the brailler.daishodesign.com subdomain. This practice may lead to a warning when running sudo nginx -t, which we aim to prevent:

   nginx: [warn] conflicting server name "" on 0.0.0.0:80, ignored

5. Create a Symlink: Establish a symbolic link for fem.daishodesign.com in the sites-enabled directory:

   sudo ln -s /etc/nginx/sites-available/fem.daishodesign.com /etc/nginx/sites-enabled/fem.daishodesign.com

6. Validation: Verify the configuration syntax with the following command:

   sudo nginx -t

7. Restart nginx: To apply the changes, restart nginx:

   sudo systemctl restart nginx

Adding an index.html File (nginx)

1. Navigate to Web Directory: Access the directory where web content is served, typically /var/www/.

2. Create Subdomain Folder: Establish a new folder named fem.daishodesign.

3. Add an HTML File: Within the fem.daishodesign folder, create an index.html file for testing purposes. You can include a simple HTML snippet like:

   <h1>Hi, it's fem</h1>

4. Testing: To confirm your configuration, visit the subdomain at https://fem.daishodesign.com.

By following these steps, I have successfully created and configured the fem subdomain on daishodesign.com, completed with DNS settings and web server configurations.