GitHub Pages 靜態網站托管

GitHub Pages：免費又方便的網站託管服務

GitHub Pages 是一個由 GitHub 提供的靜態網站託管服務，讓你可以直接從 GitHub 儲存庫發布你的網站。它非常適合個人網站、部落格、作品集和專案文件。

上傳 Vue CLI 程式到 GitHub Pages 的詳細步驟

步驟一：本地開發並編譯

1 . 建立 Vue CLI 專案:

vue create my-project

2 . 編譯專案:

npm run build

這會在 dist 資料夾生成編譯後的靜態檔案。

步驟二：設定 GitHub 儲存庫

1 . 建立新的 GitHub 儲存庫: 在 GitHub 上建立一個新的儲存庫，名稱可以與你的專案名稱相同。

初始化 Git: 在你的專案目錄下初始化 Git：

git init

2 . 提交檔案:

git add .
git commit -m "Initial commit"

3 . 連接遠端儲存庫:

git remote add origin https://github.com/你的帳號/你的專案名稱.git

git remote add origin https://github.com/daniel-qa/my-project.git

4 . 推送程式碼:

git push -u origin main

步驟三：配置 GitHub Pages

前往 GitHub 儲存庫的 Settings: 找到你的專案，點擊 Settings。

找到 Pages 區段: 在 Pages 區段中，選擇你的來源分支（通常是 main）。

部署: GitHub Pages 會自動部署你的網站，並給你一個網址。

步驟四：修改 public 資料夾名稱 (選項)

原因: Vue CLI 預設生成的 dist 資料夾名稱可能與 GitHub Pages 的預期不符。

解決方法: 在 vue.config.js 檔案中新增以下配置：

module.exports = {
  publicPath: '/my-project/' // 替換成你的專案名稱
}

要把這行設定加進去

publicPath: '/my-project/'  // 确保替换成你的 GitHub 仓库名称

重新編譯你的專案。

部署時，確保將 dist 資料夾中的內容複製到 GitHub 儲存庫的根目錄。