Deploy.md

這是一份完整教學，介紹如何將使用 Vite 建立的 React 專案部署到 GitHub Pages，並搭配 gh-pages 套件。

✅ 前置條件

  • 已完成 Vite + React 專案初始化

  • 已建立 GitHub repository（例如：benson1231.github.io）

  • 專案已使用 Git 管理

📦 安裝 gh-pages

npm install gh-pages --save-dev

🛠️ 修改 package.json

1️⃣ 新增 homepage 欄位（注意：此 repo 為根網域部署）

"homepage": "https://benson1231.github.io"

2️⃣ 增加 scripts

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint .",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

⚙️ 設定 vite.config.js

若你使用的是 benson1231.github.io 這種根目錄部署，base 設定需為空字串 ''：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: '', // 根網域部署請設為空字串
  plugins: [react()],
})

🔧 初始化 Git 並推送（如果還沒做）

git init
git remote add origin https://github.com/benson1231/benson1231.github.io
git add .
git commit -m "Initial commit"
git push -u origin main

🚀 部署到 GitHub Pages

npm run deploy

這會將 dist/ 目錄推送到 gh-pages 分支。

🌐 啟用 GitHub Pages

  1. 前往 GitHub repo 頁面：https://github.com/benson1231/benson1231.github.io

  2. 點選 Settings → Pages

  3. 在 Build and deployment 區塊設定：

    • Source: Deploy from a branch

    • Branch: gh-pages

    • Folder: / (root)

  4. 點擊 Save

等待 30 秒～1 分鐘，網站會部署成功！

✅ 完成！

你可以透過以下網址瀏覽你的網站：

🔍 https://benson1231.github.io

🩀 小提醒

  • 若使用子目錄（非 benson1231.github.io），則須將 vite.config.js 中的 base 設為 /repo-name/

  • 若使用 React Router，請記得處理 404 或 Hash 模式

PreviousreactNexttools

Last updated