How to Set Up GitHub Actions for Automatic Deployment: A Step-by-Step Guide

How to Set Up GitHub Actions for Automatic Deployment: A Complete Walkthrough Imagine pushing code to your main branch and watching your web application go live within seconds, with zero manual steps. That is exactly what GitHub Actions makes possible. In this guide, we will walk you through configuring GitHub Actions to automatically deploy a web application every time code is pushed. Whether you are deploying to Netlify or your own VPS via SSH, this tutorial has you covered. No prior CI/CD experience required. What Is GitHub Actions and Why Use It for Deployment? GitHub Actions is a built-in automation platform provided by GitHub. It lets you define workflows that run in response to events in your repository, such as a push, a pull request, or a scheduled trigger. Here is why developers love using it for automatic deployment: Free for public repositories and generous free minutes for private repos Native integration with your GitHub repository (no external service needed) Support for environments, secrets, concurrency groups, and protection rules A massive marketplace of reusable actions built by the community Fine-grained control over when and how deployments happen Prerequisites Before we start, make sure you have the following: A GitHub account and a repository with your web application code A basic understanding of Git (push, pull, branches) A deployment target: either a Netlify account or access to a VPS with SSH Familiarity with YAML syntax (we will explain the structure as we go) How GitHub Actions Workflows Work Every GitHub Actions automation starts with a workflow file. This is a YAML file stored in your repository at: .github/workflows/your-workflow-name.yml A workflow file contains the following key components: Component Description name A human-readable name for the workflow on The event that triggers the workflow (e.g., push to main) jobs One or more jobs that run on a virtual machine (runner) steps Individual commands or actions within a job runs-on The operating system for the runner (e.g., ubuntu-latest) Step-by-Step: Set Up GitHub Actions for Automatic Deployment to Netlify Netlify is one of the most popular platforms for hosting static sites, JAMstack applications, and frontend projects. Let’s set up a workflow that builds and deploys your site to Netlify on every push to main. Step 1: Get Your Netlify Credentials You need two pieces of information from Netlify: NETLIFY_AUTH_TOKEN: Go to User Settings > Applications > Personal access tokens in Netlify and generate a new token. NETLIFY_SITE_ID: Find this in your Netlify site dashboard under Site configuration > General > Site ID. Step 2: Store Secrets in Your GitHub Repository Never hardcode credentials in your workflow files. Instead, store them as GitHub Secrets: Go to your repository on GitHub Click Settings > Secrets and variables > Actions Click New repository secret Add NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID as separate secrets Step 3: Create the Workflow YAML File In your repository, create the following file: .github/workflows/deploy.yml Paste the following content: name: Deploy to Netlify on: push: branches: – main jobs: build-and-deploy: runs-on: ubuntu-latest steps: – name: Checkout repository uses: actions/checkout@v4 – name: Set up Node.js uses: actions/setup-node@v4 with: node-version: ’20’ – name: Install dependencies run: npm ci – name: Build the project run: npm run build – name: Deploy to Netlify uses: nwtgck/actions-netlify@v3 with: publish-dir: ‘./dist’ production-branch: main production-deploy: true env: NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} Step 4: Push and Watch It Work Commit and push the workflow file to your main branch Go to the Actions tab in your GitHub repository You will see your workflow running automatically Once it completes successfully, your site is live on Netlify That is it. Every future push to main will trigger the same build and deploy process automatically. Step-by-Step: Set Up GitHub Actions for Automatic Deployment to a VPS via SSH If you host your application on your own server (a VPS from providers like DigitalOcean, Hetzner, or Linode), you can use GitHub Actions to deploy via SSH. Step 1: Set Up SSH Key Access On your local machine, generate an SSH key pair if you do not already have one dedicated to deployments: ssh-keygen -t ed25519 -C “github-actions-deploy” Then add the public key to your VPS: ssh-copy-id -i ~/.ssh/id_ed25519.pub user@your-server-ip Step 2: Store SSH Credentials as GitHub Secrets Add the following secrets to your repository (Settings > Secrets and variables > Actions): SSH_PRIVATE_KEY: The contents of your private key file SSH_HOST: Your server IP address or hostname SSH_USER: The username on the server (e.g., deploy or root) Step 3: Create the Workflow YAML File name: Deploy to VPS on: push: branches: – main jobs: deploy: runs-on: ubuntu-latest steps: – name: Checkout repository uses: actions/checkout@v4 – name: Set up Node.js uses: actions/setup-node@v4 with: node-version: ’20’ – name: Install dependencies run: npm ci – name: Build the project run: npm run build – name: Deploy via SSH uses: appleboy/ssh-action@v1 with: host: ${{ secrets.SSH_HOST }} username: ${{ secrets.SSH_USER }} key: ${{ secrets.SSH_PRIVATE_KEY }} script: | cd /var/www/your-app git pull origin main npm ci –production npm run build pm2 restart your-app Note: Adjust the script section to match your server setup. If you use Docker, systemd, or another process manager, replace the pm2 restart line accordingly. Alternative: Upload Build Artifacts via SCP If you prefer to build on GitHub’s runner and then upload the result, you can use the appleboy/scp-action instead: – name: Copy files to server uses: appleboy/scp-action@v1 with: host: ${{ secrets.SSH_HOST }} username: ${{ secrets.SSH_USER }} key: ${{ secrets.SSH_PRIVATE_KEY }} source: ‘dist/*’ target: ‘/var/www/your-app’ This approach is useful when you do not want to run npm run build on the server itself. Understanding the Workflow YAML Structure Let’s break down the key sections of a workflow file so you fully understand what each part does: Trigger (on) on: push: branches: – main This tells GitHub to run the workflow only when code is pushed to the main branch. You can add other triggers like pull_request, schedule, or workflow_dispatch (manual trigger). Jobs and Runners jobs: build-and-deploy: runs-on: ubuntu-latest A job runs on a fresh virtual machine. ubuntu-latest is

How to Set Up GitHub Actions for Automatic Deployment: A Step-by-Step Guide Read More »