Prepare Your Domain (Subdomain)

Log in to your DigitalOcean account, go to your root domain, and add a new A record pointing to your VPS IP address.
Wait for DNS propagation, which can take a few minutes to several hours.

SSH into your VPS

To SSH into your VPS, use the following command:

ssh mounis@mounis.net

Create Directory for Your App

Once logged in, create a directory for your app. Then, change the ownership of the directory to your user. Replace mounis with your username and run the following command: 

sudo mkdir -p /var/www/deploy-to-vps
sudo chown -R mounis:www-data /var/www/deploy-to-vps

Create Nginx Config for the Site

Create the config file:

sudo vi /etc/nginx/sites-available/deploy-to-vps.mounis.net

Paste the following basic config (for now, HTTP only):

server {
    listen 80;
    server_name deploy-to-vps.mounis.net;

    root /var/www/deploy-to-vps;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Save and exit the editor, then enable the site by creating a symlink: 

sudo ln -s /etc/nginx/sites-available/deploy-to-vps.mounis.net /etc/nginx/sites-enabled/

Test the Nginx configuration, and if the test is successful, restart Nginx: 

sudo nginx -t
sudo systemctl restart nginx

Now the site should be accessible at: http://deploy-to-vps.mounis.net

Issue SSL Certificate using Certbot

To secure your site with HTTPS, you can use Certbot to issue a free SSL certificate. Run the following command to issue a certificate: 

sudo certbot --nginx -d deploy-to-vps.mounis.net

Follow the prompts to complete the certificate issuance. Certbot will automatically configure Nginx to use the new certificate and set up automatic renewal. After the process is complete, your site should now be accessible via HTTPS at: https://deploy-to-vps.mounis.net

Set Up GitHub Actions for Deployment

To automate the deployment process, you can set up a GitHub Actions workflow by creating a file named .github/workflows/deploy.yml in your repository: 

name: Deploy to VPS
on:
  push:
    branches:
      - trunk
jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Deploy to VPS
        uses: appleboy/scp-action@v0.1.4
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.PRIVATE_KEY }}
          passphrase: ${{ secrets.PASSPHRASE }}
          source: "static/*"
          target: "/var/www/deploy-to-vps"
          strip_components: 1

GitHub Actions Secrets

Add the following secrets to your GitHub repository under Settings > Secrets and variables > Actions:

  • HOST: Your VPS IP address or domain.
  • USERNAME: Your SSH username (e.g., mounis).
  • PRIVATE_KEY: Your SSH private key.
  • PASSPHRASE: The passphrase for your SSH key (if any).

Once the workflow and secrets are set up, pushing to the trunk branch will automatically deploy your changes.

Done

Your static app is now deployed to your VPS! Visit your site at: https://deploy-to-vps.mounis.net

Feel free to customize the Nginx configuration and GitHub Actions workflow as needed. For more advanced configurations, refer to the Nginx and GitHub Actions documentation.

Happy deploying!