Schritt: Vite React App auf GitHub-Seiten bereitstellen:

Initialisieren Sie Git, schreiben Sie alle Dateien fest und übertragen Sie sie in Ihr neues Repo:

1. Schritt:

git init
git add -A

2. Schritt:

git commit -m „first commit“
git branch -M main
git remote add origin https://github.com/[username]/[repo_name].git # Ersetzen Sie es durch Ihren Benutzernamen und die Repo-URL
git push -u origin main

3. Schritt:

Basispfad in vite.config.ts festlegen

/ 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
});

4. Schritt:

GitHub-Workflow hinzufügen

Erstellen Sie eine Datei „deploy.yml“ im Verzeichnis .github/workflows. Kopieren Sie diesen Workflow und fügen Sie ihn ein:

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

Auf Ihrer Repo-Seite:

• 1. Gehen Sie zu Einstellungen → Aktionen → Allgemein,
• 2. Scrollen Sie nach unten zu Workflow-Berechtigungen,
• 3. Wählen Sie Lesen und Schreiben und speichern Sie:

Aktionen erneut ausführen:

Aktionen → Eine fehlgeschlagene Bereitstellung auswählen → Fehlgeschlagene Jobs erneut ausführen. Warten Sie, bis Sie fertig sind.

GitHub-Seiten konfigurieren:

• Gehen Sie zu Einstellungen → Seiten
• Wählen Sie unter Quelle „Aus Zweig bereitstellen“ und wählen Sie den Zweig „gh-pages“ aus.
• Klicken Sie auf Speichern.

Die wichtigsten Dinge.

Projektname, Linkname (Basiswert) oder Repo-Name werden meist mit demselben Namen erstellt.

Das obige ist der detaillierte Inhalt vonSchritt: Vite React App auf GitHub-Seiten bereitstellen:. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!