如何把 VuePress 部署到 GitHub Pages 上

前言

因為 Build 第二次就把第一次的經驗全忘光了，因此乖乖來寫文件。Orz

1. 找到你的 .yml 檔案

通常路徑在 .github/workflows 裡面

2. 研究 .yml 的格式

如果你要全部手寫，可以參考下面幾篇文章

• VuePress 官方文件 (opens new window)
• TravisCI 官方文件 (opens new window)
• [Vue] 將 Vue 專案部署至 Github Pages (opens new window)
• [奶綠茶大大]深入但不淺出，如何用 github actions 自動發佈 gh-pages (opens new window)

我是參考奶綠茶大大的文章，自己寫過一次。 另外也有用別人的 VuePress Theme ，載下來的時候就有 default 寫好 .yml。

需要注意的地方有幾個：

.yml裡面的：

• PUBLISH_DIR: 代表你要部署資料的原路徑。這裡一定要寫對，不然會各種 fail 。

package.json裡面的 scripts：

• build 的路徑：要與上面 .yml 檔案的目錄名一致。

3. 調整檔案路徑後，直接推上去！

推上去之後，前往你 Repo 的 Actions 檢查一下吧！

• 如果出現錯誤，看一下是不是路徑設定還是哪裡有問題，再繼續修改。
• 如果沒有出現錯誤，應該會看到如圖示上一樣的綠色勾勾。

回到 Source Code 頁面，看一下 Branch 上是不是有 gh-pages 了。

4. 記得去 Repo Settings 把 gh-pages branch 設為你的來源

5. 最後點開你的 gh-page site 檢查檔案載入是否有問題

記得設定 base url

我就忘記設定 base url 這個東東。

記得在你的 config.js 裡面設置正確的 base 。

6. 噠噠～應該就完成啦 🎉

如果還沒跑出來，記得等他個十分鐘。 結束～