關于 GitHub Pages

GitHub Pages 是一項靜態站點托管服務，它直接從 GitHub 上的倉庫獲取 HTML、CSS 和 JavaScript 文件，通過構建過程運行文件，然后發布網站。

本文最終效果是搭建出一個域名為 https://<user>.github.io 的網站

創建 GitHub Pages 站點倉庫

1. 輸入倉庫名稱，必須命名為 <user>.github.io，<user>是你的用戶名
2. 選擇倉庫可見性：Public（公開）
3. 選擇 “使用 README 初始化此存儲庫”
4. 創建倉庫
5. 將需要部署的靜態頁面代碼提交到這個倉庫

配置 GitHub Pages

1. 在倉庫下找到設置 Settings，在邊欄部分找到 Pages
2. 選擇倉庫分支；選擇 index.html 文件所在路徑，一般是 root
3. 點擊保存，過幾分鐘刷新下頁面
4. 點擊 Visit site 訪問

Vue 項目的打包部署流程

其實原理是一樣的，在 Vue 項目下運行 npm run build 將打包后的 dist 文件發布到 GitHub Pages 站點倉庫。
但是過程比較繁瑣，可以使用腳本來實現自動化部署

自動發布腳本中，倉庫 origin 選擇 SSH 的地址，例如 git@github.com:user/repo.git。

不過在這之前需要先在 GitHub 上添加 ssh 公鑰

1、新建一個 deploy.sh 文件

#!/usr/bin/env sh# 忽略錯誤
set -e# 構建
npm run build# 進入待發布的目錄
cd distgit init
git add -A
git commit -m 'ci: deploy'# 部署到 https://<user>.github.io
git push -f git@github.com:hai-zou/hai-zou.github.io.git mastercd -

2、在 package.json 中添加一條命令行

{..."scripts": {"deploy": "bash scripts/deploy.sh"},...
}

3、最后運行 npm run deploy 就能夠把代碼提交到 Github Pages 倉庫

注意

如果你的項目使用的是 history 模式路由，在生產環境下，訪問非根路徑的頁面就會得到一個 404 錯誤。
這是因為瀏覽器在訪問 https://example.com/user 獲取不到 html 資源。
但是使用 hash 模式就沒有這個問題，https://example.com/#/user 哈希字符（#）后面那部分 url 不會被發送到服務器，所以可以直接請求到根路徑上的index.html文件。

可以查看官方給出的 解決辦法

GitHub Pages 上如何解決這個問題呢？

GitHub Pages 站點在訪問錯誤路徑的時候會跳轉到 404 頁面，利用這個機制，我們可以在根目錄下創建一個跟 index.html 一樣的 404.html 文件，
這樣在訪問錯誤路徑的時候也能請求到根路由的資源，然后通過框架內部的路由機制進行跳轉

修改一下發布腳本，在進入發布目錄之后添加一行命令，將 index.html 的內容 copy 到 404.html

# 進入待發布的目錄
cd dist# 這里是處理vue使用history模式路由，導致頁面出現404問題
cp index.html 404.html