Vuepress + GitHub Actions 實現(xiàn)博客自動部署！

本文已同步至：https://cunyu1943.github.io，歡迎關注后續(xù)更新！

前言

正常我們利用 Vuepress 搭建一個文檔博客之后，往往都是通過如下步驟來部署一篇博客：

1. 首先寫文章；

2. 寫完文章之后生成靜態(tài)文件，這里一般使用的是?npm run build?命令，但也有使用?yarn build?的；

3. 將我們生成的靜態(tài)文件推送到 Github Pages；

4. 訪問我們對應的網(wǎng)址，查看我們的推送是否成功。

上述步驟看似簡單，但一旦文檔過多時，生成靜態(tài)文件就十分耗費時間。這時候我們就想了，有不有一種方法，能夠幫我們自動構建靜態(tài)文件然后部署到 Github Pages 上呢。剛好，Github 官方提供了這個一個工具：Github Actions。利用它，我們就能夠?qū)⒅匦霓D(zhuǎn)移到創(chuàng)作之后，每次創(chuàng)作之后推送到遠程之后它就會自動后續(xù)工作，接下來我們就來看看如何利用 Github Action 實現(xiàn)自動部署我們的博客。

生成 Token

要部署 Actions，那么它就需要有能夠操作我們倉庫的權限，因此需要提前設置個人訪問令牌（Github personal access）。設置方法如下：進入 Github 后，點擊我們的頭像，然后依次進入?Settings -> Developer settings -> Personal access tokens，對應地址就是?Token 生成^[1]。然后點擊右上方的?Generate new token，接著輸入 token 的名字，這個名字可以隨意，不過還是推薦根據(jù)它的用途來命名。然后選?Expiration，也就是這個 Token 的有效期，如果我們要長期用，建議選為?No expiration，意思就是無期限。最后就是選權限，一般來講這里選?repo?就夠了，但是如果你不確定，那就全都選上也行。然后點擊?Generate Token，會生成一個令牌，注意這里它只會出現(xiàn)一次，一旦刷新該網(wǎng)頁就不見了，所以最好把它復制到你的備忘錄備份一下，而且我們待會也是需要用到這個 Token 的。

設置 Secrets

進入你存放你博客源碼的項目，然后依次點擊?Settings -> Secrets，接著點擊右上角的?New repository secret，新建一個?Secret。這里的名字要命名為?ACCESS_TOKEN，然后?Value?就是我們上一步中所生成的 Token。

編寫 Action

進入項目的的?Actions?選項，然后新建一個?workflow（我是因為已經(jīng)建立過了，所以才是下面的界面），默認新建的?workflow?名字是?main.yml?這個可以自己自定義，根據(jù)你自己喜好來就行了。

生成后的?main.yml?位于項目的?.github/workflows?目錄下。

接下來是在?main.yml?中填入如下信息即可，具體實例的可以參考我的博客實例：

https://github.com/cunyu1943/cunyu1943.github.io/

#?name?可以自定義
name:?Deploy?GitHub?Pages

#?觸發(fā)條件：在 push 到 main/master 分支后，新的 Github 項目?應該都是 main，而之前的項目一般都是 master
on:
??push:
????branches:
??????-?main

#?任務
jobs:
??build-and-deploy:
????#?服務器環(huán)境：最新版 Ubuntu
????runs-on:?ubuntu-latest
????steps:
??????#?拉取代碼
??????-?name:?Checkout
????????uses:?actions/checkout@v2
????????with:
??????????persist-credentials:?false

??????#?生成靜態(tài)文件
??????-?name:?Build
????????run:?npm?install?&&?npm?run?docs:build

??????#?部署到?GitHub?Pages
??????-?name:?Deploy
????????uses:?JamesIves/github-pages-deploy-action@releases/v3
????????with:
??????????ACCESS_TOKEN:?${{?secrets.ACCESS_TOKEN?}}?#?也就是我們剛才生成的?secret
??????????BRANCH:?gh-pages?#?部署到?gh-pages?分支，因為?main?分支存放的一般是源碼，而?gh-pages?分支則用來存放生成的靜態(tài)文件
??????????FOLDER:?docs/.vuepress/dist?#?vuepress?生成的靜態(tài)文件存放的地方

驗證

經(jīng)過上面的的步驟配置好之后，就可以點擊倉庫的?Actions?來查看部署情況了。

如果是綠色的，說明自動部署成功了，如果是紅色，那就說明部署失敗。這個時候我們可以點進去看看部署失敗的日志信息。

以我部署失敗的一個實例來講，可以看到主要是在部署步驟出了問題，我們就可以根據(jù)給出的錯誤日志來找出問題所在，然后找方法解決它了。

我這里錯誤的大體意思就是說我 Vuepress 項目下的的?dist?目錄不存在，而解決方法則是在 Vuepress 的配置文件中的?dist?設置為?docs/.vuepress/dist?即可。

總結

以上就是關于 Vuepress + Github Actions 實現(xiàn)自動部署的所有內(nèi)容了，如果對你有所幫助，那就幫忙點贊關注吧！

最后，貼出我的博客地址，可以去看看效果！

• 項目文件：https://github.com/cunyu1943/cunyu1943.github.io
• 預覽地址：https://cunyu1943.github.io/

參考資料