當我們用 Vite 開發完 React 專案後，將它部署到 GitHub Pages 是一個免費又方便的選擇。但如果想讓作品看起來更專業，綁定自己的專屬網域（例如 yourdomain.com）絕對是必經之路。
這篇文章將帶你走過完整的流程：從 Namecheap 的 DNS 設定、Vite 專案的網域設定，到透過 GitHub Actions 自動化部署，一次搞定！
🛠️ 事前準備
- 一個使用 Vite 建立的 React 專案。
- 已經將程式碼推上 GitHub 儲存庫。
- 在 Namecheap（或其他網域商）擁有一組自己的網域。
步驟一：在 Namecheap 設定 DNS
登入 Namecheap，進入你網域的 Advanced DNS 設定頁面。在開始新增紀錄前，請先刪除系統預設的紀錄（例如指向停車頁面的 CNAME 或 A Record），確保列表乾淨，以免流量被導向錯誤的伺服器。
接下來，請根據你的需求選擇 「主網域」 或 「子網域」 的設定方式：
方案 A：使用主網域 (例如 abc.ink)
如果你想讓訪客直接輸入網域就能看到專案，你需要新增 4 筆指向 GitHub 伺服器的 A Record。
點擊 Add New Record，並重複新增以下四筆紀錄：
- Type:
A Record| Host:@| Value:185.199.108.153 - Type:
A Record| Host:@| Value:185.199.109.153 - Type:
A Record| Host:@| Value:185.199.110.153 - Type:
A Record| Host:@| Value:185.199.111.153
💡 補充： 通常我們也會順便加一筆 CNAME Record (Host 填
www，Value 填你的帳號.github.io)，這樣別人習慣性打www.abc.ink時也能順利連上。
方案 B：使用子網域 (例如 app.abc.ink)
如果你的主網域要留給別的網站，專案只想放在子網域，那你只需要 1 筆 CNAME Record：
- Type:
CNAME Record - Host: 填入你的子網域前綴（例如
app或demo） - Value: 填入你的 GitHub Pages 預設網址
你的帳號.github.io(⚠️ 注意：前面不需要加https://)
步驟二：修改 Vite 專案設定
因為我們換了專屬網域，網站的「根目錄」改變了，且使用了自動化部署，所以必須在程式碼中做兩項關鍵修改：
1. 新增 CNAME 檔案 (最重要的一步！)
為了讓 GitHub 知道你要綁定哪個網域，我們需要建立一個 CNAME 檔案。
- 在專案的 根目錄 找到（或手動建立）一個名為
public的資料夾。 - 在
public資料夾內，新增一個名為CNAME的檔案（⚠️ 注意：字母需全大寫，且不要有任何副檔名如.txt）。 - 打開檔案，裡面只需寫入你最終決定的網址，例如：Plaintext
abc.ink(如果你選的是方案 B，這裡就填寫app.abc.ink)
💡 原理揭密： Vite 打包時會將
public內的檔案原封不動複製到輸出的dist資料夾中。這樣當 Actions 將打包好的檔案上傳到 GitHub 時，系統就能自動讀取到這份網域設定檔！
2. 更新 Base URL
打開專案根目錄的 vite.config.js (或 .ts)，確保你的 base 路徑設定為根目錄 /：
JavaScript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/', // 確保這裡是單一斜線
})
步驟三：推播程式碼與自動部署
確認你已經在專案中設定好了 GitHub Actions 的部署腳本（通常位於 .github/workflows/deploy.yml）。
接著，打開終端機，將剛剛的修改推上 GitHub：
Bash
git add .
git commit -m "Add CNAME and update base url for custom domain"
git push
🎈 見證奇蹟的時刻
推播上去後，GitHub Actions 就會開始自動打包。
這裡有一個超方便的隱藏機制： 過去我們可能需要手動到 GitHub 的 Settings 去填寫 Custom domain。但因為我們在步驟二已經把 CNAME 檔案包進了打包流程中，當 Actions 部署完成後，GitHub 會自動讀取該檔案，並在後台幫你把 Custom domain 填寫完畢！ 你只需要做最後的確認：
- 到 GitHub 儲存庫的 Settings > Pages。
- 往下捲動，確認 Custom domain 欄位已經自動出現你的網域。
- 等待 DNS 檢查通過 (顯示綠色的
DNS check successful)。 - 勾選下方的 Enforce HTTPS（如果反灰不能按，請耐心等個 15~30 分鐘，GitHub 核發免費 SSL 憑證需要一點時間）。
恭喜！你的 Vite React 專案現在已經在專屬網域上完美運行，並且擁有安全的 HTTPS 鎖頭標誌了！🎉
