How to Set Up Automated Website Deployment with GitHub Actions (Complete CI/CD Tutorial)

When you make changes to your website, wouldn’t it be great if it were deployed automatically, without you manually uploading files or running build commands?

That’s exactly what CI/CD (Continuous Integration and Continuous Deployment) does.

In this guide, you’ll learn how to use GitHub Actions to automatically deploy your site to platforms like Vercel, Netlify, or even your own server.

What Is CI/CD?

Continuous Integration (CI) automates testing and building your code every time you push changes.

Continuous Deployment (CD) takes it a step further by automatically deploying those changes to production once they pass tests.

Together, they create a smooth, reliable workflow - perfect for modern web development.

See Also: How to Deploy a Website with Docker (Step-by-Step Tutorial)

Why Use GitHub Actions?

• Free for public repositories
• Works directly with GitHub commits
• Supports any framework (React, Next.js, Svelte, Astro, etc.)
• Can deploy to most hosts automatically (Vercel, Netlify, DigitalOcean, etc.)
• Build, test, and deploy from one YAML file

Step 1: Create Your GitHub Repository

If you don’t have one yet, initialize your project and push it to GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/project.git
git push -u origin main

Step 2: Create a GitHub Actions Workflow

Inside your repo, create the following path and file:

.github/workflows/deploy.yml

Paste this example configuration for a static site (e.g., React, Vite, or HTML):

name: Deploy Website

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Build project
        run: npm run build

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2
        with:
          publish-dir: ./dist
          production-deploy: true
          github-token: ${{ secrets.GITHUB_TOKEN }}
          netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}

Step 3: Add Secrets

Go to your repository → Settings → Secrets and Variables → Actions.
Add your hosting credentials (for example, Netlify or Vercel API tokens).

This keeps your keys secure and out of your codebase.

Step 4: Push and Watch It Work

Push your changes to GitHub:

git add .
git commit -m "Add GitHub Actions workflow"
git push

GitHub will automatically:

• Build your project
• Deploy it to your chosen host
• Provide real-time logs in the “Actions” tab

Step 5: Verify Your Deployment

Once complete, your site should automatically update whenever you push new code.

You can check the deployment status via:

• GitHub → “Actions” tab
• Hosting dashboard (Netlify, Vercel, etc.)

Bonus: Add Tests Before Deployment

You can add test steps before deployment:

- name: Run unit tests
  run: npm test

This ensures only working code gets deployed - a best practice for production apps.

Conclusion

Automated deployment saves time, reduces human error, and makes collaboration easier.

Once you set up GitHub Actions, every push becomes a live update, a professional-grade workflow for any developer.

Next, we’ll dive deeper into Jenkins CI/CD, a powerful open-source automation server used by big tech companies.