Setup CI/CD with GitHub Actions

In other words, CI makes sure your code is always ready to deploy, and CD makes sure it actually gets deployed.

The underlying concepts, setup, and automation tools are largely the same. You’ll still use GitHub Actions (or similar workflow automation) to define pipelines that handle your build, test, and release processes.

For now, we’ll keep this section short since CD closely mirrors CI in structure and philosophy.

I’ll cover the full CI/CD pipeline setup in a dedicated one-off video, using the SuperImpress project—an open-source product being built publicly as part of the Frontend Hire Community learning.

I don't have an exact timeline but that session will show how to:

• Automatically deploy code after successful CI checks
• Manage environment-specific deployments (staging, production)
• Roll back safely when things go wrong

But if you want to try out CD now

Here’s a quick way to set up automatic deployment to Netlify using GitHub Actions for a React + Vite project.

1. Create a Netlify Site

• Log in to Netlify.
• Click “Add new site → Import from Git.”
• Connect your GitHub repository.
• Set the build command to pnpm build (or npm run build) and publish directory to dist/.
• Once deployed, copy the Site ID and Personal Access Token from your Netlify user settings.
  • Go to User Settings → Applications → Personal Access Tokens to generate one.

2. Add GitHub Secrets

In your GitHub repo:

• Go to Settings → Secrets and variables → Actions → New repository secret.
• Add the following secrets:
  • NETLIFY_AUTH_TOKEN → your Netlify Personal Access Token
  • NETLIFY_SITE_ID → your site’s unique ID

3. Add a GitHub Actions Workflow

Create a new workflow file:

name: Build and Deploy to Netlify
 
on:
  push:
    branches:
      - main
  pull_request:
 
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      deployments: write
 
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
 
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 22
 
      - name: Install pnpm
        uses: pnpm/action-setup@v4
 
      - name: Install dependencies
        run: pnpm install
 
      - name: Build and export static site
        run: pnpm build
 
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2.0
        with:
          publish-dir: './dist'
          production-branch: main
          production-deploy: ${{ github.ref == 'refs/heads/main' }}
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: 'Deploy from GitHub Actions'
          enable-pull-request-comment: true
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        timeout-minutes: 5

4. Push to main

Whenever you push changes to your main branch, GitHub Actions will:

1. Build your Vite project
2. Deploy the build output (dist/) to Netlify automatically

You’ll see a new deployment job appear under the Actions tab in your repo. Once it finishes, your site will be live with the latest version of your code 🚀