[Git Note] — 快速部署 Vue Cli 靜態資源至 GitHub Pages

發表於 更新於 分類於 ， ， 文章字數： 3.2k 所需閱讀時間 ≈ 3 分鐘

Github Pages

Introduction & 前言

相信有在用 全球最大男性交友平台 的人一定都有使用過 **Github Pages**，如果沒有用過簡單說就是可以幫你把靜態資源，例如 index.html 的文檔轉換成靜態網頁，然後會有一串可以預覽的網址給使用者或是其他人直接看內容，不用再 clone 下來才能看，最大的優點為免費，有點類似於後端的 Heroku。

而這篇文章要告訴你，如果是用前端框架 Vue Build 出來的靜態資源該怎麼一鍵部署上 **Github**。

Summary & 摘要

其實之前一直都想研究，但是每次都偷懶，結果最近在上 Node.js 的課程時助教還是建議我要學習如何把 靜態資源 跟 Source Code 分開。

為什麼要分開呢？因為 Vue 建立出來的靜態資源會放在 dist 資料夾內，而 Github 產生給你的靜態資源網址你必須在後面自己加上 /dist/index.html 之外，還必須新增 vue.config.js 告訴 Vue 你現在的 publicPath 是哪裡，不然就會發生 CSS、JS 抓不到的情況！

標準的路徑錯誤

長話短說

如果已經會新增 Repositories 可以跳至下一個步驟查看暴力解法，或是跳至下下一個步驟查看推薦的解法。

這邊先示範怎麼擁有 靜態資源的網址 並分享給其他人看，關於怎麼建立 Repositories 這邊就不在敘述，有興趣可以參考 高老師 - 新增、初始 Repository。

一切就緒後就到該 Repository，比如這個專案 RexHung0302/Hexschool-firebase-bmi-practice，然後找到上面一排功能選項點選 Settings，進入設定頁面後往下拉找到標題為 GitHub Pages 的地方，會發現這邊目前的 Source 是 None，拉開他，然後選擇你的分支，如果你只有自己在做這個專案，並且很懶，沒有把 靜態資源 跟 Source Code 分開，那你大慨就只有 master 這個主要分支，不要猶豫選擇吧。

標準的路徑錯誤

接著就會出現預覽的網址，如下圖：

靜態頁面網址

暴力解決

這邊先舉例如果不靠一鍵部署的話，我們該怎麼解決關於 Vue Build 出來，靜態資源路徑問題。

參照 Vue 官方指南，你必須在 vue.config.js 中设置正确的 publicPath，如果按照我們 這個專案 我們必須新增 vue.config.js 這隻檔案，內容為下方設定：

1
2
3
module.exports = {
  publicPath: '/Hexschool-firebase-bmi-practice/dist/'
}

前方為 Repository 的名稱，然後緊接著 dist 資料夾，這樣 Github 就會把這邊當成根目錄，所以在你 build 完之後，有用到網址為 ./ 開頭的，都會從 https://github.com/RexHung0302/Hexschool-firebase-bmi-practice/dist/ 這個地方找起，不然會從 https://github.com/RexHung0302/Hexschool-firebase-bmi-practice 這個地方找起，會錯誤。

然後按照剛剛第一個步驟產生的網址，後面再加上相對應的路徑去找你的 靜態資源 index.html，例如 https://github.com/RexHung0302/Hexschool-firebase-bmi-practice/dist/index.html。

推薦解法

這邊就是推薦的做法，不只不用再去想怎麼設定 vue.config.js，之後只需要靠一個按鍵便可以自動部署。

首先在你的根目錄創建 deploy.sh，然後內容貼上下列程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/usr/bin/env sh

# 發生錯誤時執行終止指令
set -e

# 打包編譯
npm run build

# 移動到打包資料夾下，若你有調整的話打包後的資料夾請務必調整
cd dist

# 部署到自定義網域
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:RexHung0302/Hexschool-firebase-bmi-practice.git master:gh-pages
# 除此之外，也可以改走 HTTPS 模式
git push -f https://github.com/RexHung0302/Hexschool-firebase-bmi-practice.git master:gh-pages

cd -

以上範例參考助教 Ray 的 一個指令快速部署 Vue Cli 到 GitHub Pages 文章。

接著輸入 sh deploy.sh，你就會發現多了一個分支 gh-pages 並且 靜態資源 都被推上去了。

切換分支

成功上傳

*Linux 系統下可以直接使用 sh 指令，所以 MacOS 用戶可以直接使用指令，但如果你是 Window 必須在安裝 **Git Bash*。

人生的 But！

人生總是有許多意外，更不用說 Coding 時了，在你要使用 sh deploy.sh 指令時可能會出現以下的錯誤訊息：

1
2
3
4
5
6
Warning: Permanently added the RSA host key for IP address '140.82.113.4' to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

這是什麼呢？其中有兩個問題，一個是你必須將 IP address ‘140.82.113.4’ 加入你的 /etc/hosts 內：

1
2
3
$ sudo vim /etc/hosts

// 新增 IP address

切換分支

相關問題可參考 Github遇到Permanently added the RSA host key for IP address ‘192.30.252.128’ to the list of known host。

這樣就解決第一個問題了，那第二個問題呢，這個比較麻煩一點，這是關於 權限問題，有可能是你並沒有新增 ssh key 在 Github 的 ssh key setting 裡，所以這邊我們要先去看看你有沒有新增過 public key。

1
2
3
$ cd ~/.ssh/

$ ls

如果有 id_rsa 及 id_rsa.pub 可跳過新增步驟，如果沒有就輸入 ssh-keygen，這時候他會問你名稱要叫什麼，直接 enter 即可，如果輸入名稱，最後產出來的檔案會變成 name 及 name.pub，新增結束後，再輸入 cat id_rsa.pub 並複製內容，詳細流程為下：

1
2
3
$ ssh-keygen

$ cat id_rsa.pub

複製結束後到 Github 點選右上角頭像，然後選擇 Settings。

Settings

接著選擇左邊的 SSH and GPG keys 然後點選右上方的 New SSH key，接著輸入自己好辨識這個 key 的 title，提醒自己而已，無其他用處。然後貼上剛剛複製的 ssh key，點擊 Add SSH key，完成！

SSH and GPG keys

最後再試一次 sh deploy.sh 如果還有權限問題就改為輸入 sudo sh deploy.sh。

Conclusion & 結論

這次拖助教的福，終於下定決心好好研究一番，之後就會盡量把 靜態資源 跟 Source Code 分開，專案看起來會更乾淨一些！

參考網站