Continuous Deployment (CD)

While CI ensures that every code change is automatically built, tested, and verified, CD takes it further—automatically deploying those verified changes to production (or staging) environments.

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

Netlify does the heavy lifting if you just connect the repository!

Do note that just connecting the repo to Netlify can do the heavy lifting of setting up the continuous deployment. There are certain limitations for private repositories or organization accounts where setting up your own workflow can save you a bit of money.

AI Generated Notes

The steps of the CD given below has been generated by AI. So, things might break or work unexpectedly! If you get stuck somewhere, you can always reach out in the discord community.

Things should ideally work because I use the same workflow file for one of my production sites.

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:

.github/workflows/deploy.yml

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:

Build your Vite project
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 🚀