Step-by-Step Guide to Deploy React Website to GitHub Pages Using GitHub Actions

Day #19 of the #100daysofMiva coding challenge has been hectic troubleshooting GitHub pages via GitHub actions and deploying both static website and through framework. I decided to write a step by step guide to deploying a React website to GitHub pages using GitHub actions.

1. Create a React App (If not already created)

If you don't have a React app yet, create one using the following command:


npx create-react-app my-app
cd my-app

2. Set Up GitHub Repository

Initialize a Git repository in your React project:


git init
git add .
git commit -m "Initial commit"

Push it to GitHub:


git remote add origin https://github.com/your-username/your-repo.git
git branch -M main
git push -u origin main

3. Install gh-pages for GitHub Pages

You need to install gh-pages as a dependency to deploy the site to GitHub Pages.


npm install gh-pages --save-dev

4. Update package.json for GitHub Pages

Add the following lines to your package.json file:

Set the homepage URL, which tells GitHub Pages where to find your React app:


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

Add the predeploy and deploy scripts:


"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

5. Create a GitHub Action Workflow

To automate the deployment using GitHub Actions, you'll create a new workflow.

In the root of your repository, create the following folder structure:


.github/workflows/deploy.yml

Inside the deploy.yml file, add the following configuration for the GitHub Action:


name: Deploy React App to GitHub Pages

on:
  push:
    branches:
      - main  # Deploy only when pushing to the main branch

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      # Step 1: Checkout the repository
      - name: Checkout Repository
        uses: actions/checkout@v3

      # Step 2: Set up Node.js
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'  # Specify the Node.js version

      # Step 3: Install dependencies
      - name: Install Dependencies
        run: npm install

      # Step 4: Build the React app
      - name: Build React App
        run: npm run build

      # Step 5: Deploy to GitHub Pages
      - name: Deploy to GitHub Pages
        run: npm run deploy
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

6. Push Your Code to GitHub

Push your code to GitHub, and the GitHub Action will automatically deploy your app to GitHub Pages:


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

7. Enable GitHub Pages

Go to your repository on GitHub.
Navigate to Settings > Pages.
Under Source, select the gh-pages branch. After a few minutes, your site will be live at https://your-username.github.io/your-repo.

Optional: Deploying to Other Platforms (Netlify, Vercel)
Netlify:

You can use the netlify-cli to deploy to Netlify:


npm install netlify-cli -g
netlify deploy --prod

Or create a GitHub Action using the Netlify Deploy Action:


name: Deploy to Netlify
on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1
        with:
          publish-dir: './build'
          production-deploy: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Vercel:

For Vercel, after setting up your Vercel project, you can use Vercel CLI:


npm install vercel -g
vercel --prod

Alternatively, use the Vercel GitHub Action for seamless integration:


name: Deploy to Vercel
on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy to Vercel
        run: vercel --prod
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

Blog

Step-by-Step Guide to Deploy React Website to GitHub Pages Using GitHub Actions

TD!

Join Our Newsletter. No Spam, Only the good stuff.

Related