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

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

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

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

npm install gh-pages --save-dev

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

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

.github/workflows/deploy.yml

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 }}

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

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

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 }}

npm install vercel -g
vercel --prod

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 }}