Automating React App Deployment to GitHub Pages using GitHub Actions

I was working on my new portfolio and didn’t want to use Vercel like everyone else. I realized there must be other people who want to try something different, so I decided to deploy my React app to GitHub Pages and automate the process using GitHub Actions. If you're looking for an easy and automated way to deploy your app whenever you push changes, this method is perfect.

Instead of manually deploying your app using npm run deploy, you can set up GitHub Actions to automate the process. This way, every time you push to your repository, GitHub will automatically build and deploy the app to GitHub Pages. Let's walk through setting this up!

Step 1: Install the gh-pages package

gh-pages is a small tool that makes it easy to publish files to GitHub Pages directly from your repo.

Run this command inside your project:

npm install --save-dev gh-pages

Step 2: Set up GitHub Actions Workflow

First, create a GitHub Actions workflow file in your repository. This file will define the process for building and deploying your app.

In your project, create a .github/workflows directory, then inside it, create a file named deploy.yml.

name: Deploy React App to GitHub Pages

on:
  push:
    branches:
      - main  # or any branch you want to deploy from

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

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 22  # You can use any Node.js version

      - name: Install dependencies
        run: npm install

      - name: Build the app
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-gh-pages@v2
        with:
          personal_token: ${{ secrets.GITHUB_TOKEN }}
          branch: gh-pages  # this is where the app will be deployed
          folder: build  # this is the folder that contains the production build

Your GITHUB_TOKEN should already be defined in your .env file

Step 3: Set up the Homepage in package.json

In your package.json, add the homepage field to point to your GitHub Pages URL:

"homepage": "https://<your-username>.github.io/<your-repo-name>"

This ensures that React knows the correct base path when building assets.

Step 4: Push Changes and Automate Deployment

Now that you’ve set up the GitHub Actions workflow, the next step is to push your changes to GitHub:

git add .
git commit -m "Set up GitHub Actions for deployment"
git push origin main

Once pushed, GitHub will automatically trigger the GitHub Actions workflow defined in deploy.yml. It will:

• Checkout the code,
• Install dependencies,
• Build the React app,
• Deploy it to the gh-pages branch.

Step 5: Enable GitHub Pages

To make your app live on GitHub Pages:

1. Go to the Settings tab of your repository.
2. Scroll down to GitHub Pages under the "Pages" section.
3. Select gh-pages as the source branch.
4. Save the changes.

GitHub will now serve your app at https://<your-username>.github.io/<your-repo-name>.

Conclusion

With GitHub Actions, deploying your React app to GitHub Pages becomes a fully automated process. No more manual npm run deploy or updating branches. Simply push to your repository, and GitHub Actions will handle the build and deployment process for you.

This method is ideal for those who want a simple, free, and automated deployment setup for their React projects. You can set this up in minutes, and every time you push to your repository, your app is automatically built and deployed. Perfect for portfolios, demos, or small projects.