How I Created An 'apps.musimatic.xyz' Subdomain To House My Portfolio Projects

I thought about ‘where’ to host my portfolio projects, and despite there being some great alternatives like ‘Netlify’ and ‘Heroku’ that do a lot of the heavy lifting for you, I went ahead and took up the challenge to self-host my own projects subdomain.

I did some research and found this great blog post on the topic of how to host subdomains within the same website on a VPS running ’nginx’:

I then proceeded to go to ’epik.com’ which I use as my domain registrar, signed into my account, and modified the ‘DNS Records’ section accordingly for the ‘musimatic.xyz’ domain so that I had the following two domain records to handle ‘AAAA’ for ‘IPv6’ and ‘A’ for ‘IPv4’:

HostTypePoints ToTTL
appsAAAA (IPv6)2604:a880:800:14::11:600030
appsA (IPv4)104.131.2.10930

I then created a related directory, ‘/var/www/apps’ on the Digital Ocean VPS running the ‘musimatic.xyz’ website itself.

I then changed the ownership of this same directory with this command:

sudo chown -R www-data:www-data /var/www/apps/

I then created an ‘index.html’ file in ‘/var/www/apps’:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
    </head>
    <body>
        <h1>Welcome To 'apps.musimatic.xyz'</h1>
    </body>
</html>

I then placed this into the related nginx config in ‘/etc/sites-available/apps’:

server {
       listen [::]:80;
       listen 80;

       # Path to default 'index.html' page for 'apps.musimatic.xyz/index.html' page:
       root /var/www/apps;

       # Define the index page to use:
       index index.html index.html;

       # Allow Nginx to use the empty name:
       server_name apps.musimatic.xyz;

       location / {
       # Return a 404 error for instances when the server
       # requests for untraceable files and directories.
       try_files $uri $uri/ =404;
       }
}

I then tried to test the config with this command:

root@musimatic:/var/www/apps# sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

I then created this symbolic link accordingly:

sudo ln -s /etc/nginx/sites-available/apps /etc/nginx/sites-enabled/

I then restarted Nginx with this command:

sudo systemctl restart nginx

I then ran the following ‘certbot’ command as the ‘root’ user to generate a corresponding SSL certificate for the ‘apps.musimatic.xyz’ domain:

certbot

I then used the following prompts for the ‘certbot’ wizard:

I then was greeted with a message stating that this process was successful, and I am now able to see the basic page at ‘apps.musimatic.xyz’ without a problem:

Going forward, I plan on being able to deploy a ‘React’ website that hosts my projects site on that section of the site, so it should be pretty cool to see where it goes next. At least the heavy lifting of the networking side of this is complete, so that should be good going forward.

For now, I have created a corresponding GitHub repo for the ‘apps’ portion of my website which can be found here:

Also, if I plan on creating related ‘<a></a>’ anchor tags on that ‘/var/www/apps’ subdomain for ‘index.html’ for any specific projects, I noted the following as an example:

One step at a time, but a definitely great (and somewhat involved) step forward has been taken today.

~ Sam