free Real-Time Deployment to GitHub Pages with CI/CD for React +vite+tailwind app

Have you ever wanted to see your app updates live the moment you push to a branch? In this post, I’ll walk you through how I set up a CI/CD pipeline using GitHub Actions to deploy my Node.js application to GitHub Pages automatically and in real time whenever I push to the dev branch.
This is a good practice to simulate and see how the application looks like and test functionalities online before pushing it in production(main).
--Why CI/CD for GitHub Pages?
Continuous Integration and Continuous Deployment (CI/CD) helps automate the process of building, testing, and deploying your code. By integrating this into your GitHub workflow, you:
Catch bugs early with automated tests
Ensure consistent builds
Instantly reflect changes on your hosted site

🛠️ The Setup:
Here’s the GitHub Actions workflow I created, named CI/CD. It does two main things:
Build and test the app on every push or pull request.
Deploy the app to GitHub Pages—but only if the push is to the dev branch.

name: CI/CD

                    on:
                    push:
                    branches: ["*"]
                    pull_request:
                    branches: ["*"]

                    permissions:
                    contents: write
                    pages: write
                    id-token: write

                    jobs:
                    build-and-test:
                    runs-on: ubuntu-latest
                    steps:
                     - name: Checkout code
                    uses: actions/checkout@v4
                    - name: Set up Node.js
                    uses: actions/setup-node@v4
                    with:
                   node-version: "20"
                   - name: Install dependencies
                   run: npm install
                   - name: Build
                  run: npm run build
                  - name: Test
                 run: npm test

                 deploy:
                 if: github.ref == 'refs/heads/dev'
                 runs-on: ubuntu-latest
                 needs: build-and-test
                 steps:
                - name: Checkout code
                uses: actions/checkout@v4
              - name: Set up Node.js
               uses: actions/setup-node@v4
               with:
               node-version: "20"
           - name: Install dependencies
            run: npm install
           - name: Build
           run: npm run build
          - name: Deploy to GitHub Pages
           uses: peaceiris/actions-gh-pages@v4
           with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

🔍 How It Works
Triggering: The workflow runs on any push or pull request to any branch.

Build & Test: It installs dependencies, builds the app, and runs tests.

Conditional Deploy: The deploy job only runs if the push is to the dev branch.

Deployment: It uses peaceiris/actions-gh-pages to publish the contents of the ./dist folder to GitHub Pages

🌐 Hosting on GitHub Pages
Make sure your repository is configured to serve GitHub Pages from the gh-pages branch (which the action creates and updates). You can set this in your repo settings under Pages > Source.

This setup has been a game-changer for my development workflow. I can push to dev, and within seconds, my changes are live. It’s perfect for previewing features before merging to main.

If you’re building a frontend app and want instant feedback, give this workflow a try. And if you have questions or want to improve it further (like adding caching or linting), let’s chat in the comments!