Deploy Vite React App to GitHub Pages tep:

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.

The above is the detailed content of Deploy Vite React App to GitHub Pages tep:. For more information, please follow other related articles on the PHP Chinese website!