From GitHub Site From Starting:

Create an empty repository on GitHub without README File

Add it to local Choose a Folder and Add a remote that points to the GitHub repository

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin <https://github.com/{username}/{repo-name}.git>
git push -u origin main

Create a React app
```
npm create vite@latest
```

Add a base property to the vite.config.js file

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// Get the repository name dynamically
const repoName = 'Give Repo Name here';

export default defineConfig({
  plugins: [react()],
  base: `/${repoName}/`
});

Create ./.github/workflows/deploy.yml and add the code below

<aside> ⚠️ Warning

It is crucial that the .yml file has the exact code below. Any typing or spacing errors may cause deployment issues.

</aside>

name: Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v2
        with:
          name: production-files
          path: ./dist

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v2
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

public/404.html (for GitHub Pages) → Neglect this step

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Not Found</title>
</head>
<body>
  <script>
    // Redirect all 404 errors to index.html
    window.location.replace('/' + window.location.pathname + window.location.search);
  </script>
</body>
</html>

Push to GitHub

git add . 
git commit -m "add: deploy workflow" 
git push

Active workflow (GitHub)

Settings > Actions > General > Workflow permissions > Read and Write permissions

Actions > failed deploy > re-run-job failed jobs

Pages > Branch > gh-pages > save

From VS Code to Deploy New Project:

Create react app
Push to GitHub From VS Code Directly By selecting Public or Private Repository and branch
Follow Steps - 4 , 5 , 6 , commit all changes 8.1 , 8.3

From VS Code to Re-Deploy Existing Project:

Do commit all changes

Last Updated : July 28, 2024