Deploy Vite React App to GitHub Pages 4 Step:

MD.MIRAJUL ISLAM — Sun, 05 Jan 2025 14:15:15 +0000

Initialize Git, commit all the files and push them to your new repo:

1st step:

git init
git add -A

2nd Step:

git commit -m “first commit” git branch -M main git remote add origin https://github.com/[username]/[repo_name].git # Replace with your username and repo URL git push -u origin main

3rd step:

Set base path in vite.config.ts

/ vite.config.ts
import { defineConfig } from “vite”;
import react from “@vitejs/plugin-react”;

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: “/vite-react-deploy/”, // YOUR REPO NAME HERE
});

4th step:

Add a GitHub workflow

Create a deploy.yml file inside the .github/workflows directory.Copy and paste this workflow:

name: Deploy

on:
  push:
    branches:
      - main

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

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

      - name: Setup Node
        uses: actions/setup-node@v3

      - 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@v3
        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@v3
        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

On your repo page:

1. Go to Settings → Actions → General,
2. Scroll down to Workflow Permissions,
3. Choose Read and Write, and save:

Re-run actions:

Actions → choose a failed deployment → Re-run failed jobs. Wait until in finishes.

Configure GitHub Pages:

Go to Settings → Pages
Under Source, choose “Deploy from branch” and select the “gh-pages” branch.
Click Save.

The Most important things.

Project name, Link name(base value) or Repo name most be same name create.

DEV Community: MD.MIRAJUL ISLAM