Vuepress + GitHub Actions 實(shí)現(xiàn)博客自動(dòng)部署！

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

前言

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

1. 首先寫文章；

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

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

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

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

生成 Token

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

設(shè)置 Secrets

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

編寫 Action

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

生成后的?main.yml?位于項(xiàng)目的?.github/workflows?目錄下。

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

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

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

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

#?任務(wù)
jobs:
??build-and-deploy:
????#?服務(wù)器環(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?分支，因?yàn)?main?分支存放的一般是源碼，而?gh-pages?分支則用來存放生成的靜態(tài)文件
??????????FOLDER:?docs/.vuepress/dist?#?vuepress?生成的靜態(tài)文件存放的地方

驗(yàn)證

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

如果是綠色的，說明自動(dòng)部署成功了，如果是紅色，那就說明部署失敗。這個(gè)時(shí)候我們可以點(diǎn)進(jìn)去看看部署失敗的日志信息。

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

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

總結(jié)

以上就是關(guān)于 Vuepress + Github Actions 實(shí)現(xiàn)自動(dòng)部署的所有內(nèi)容了，如果對(duì)你有所幫助，那就幫忙點(diǎn)贊關(guān)注吧！

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

• 項(xiàng)目文件：https://github.com/cunyu1943/cunyu1943.github.io
• 預(yù)覽地址：https://cunyu1943.github.io/

參考資料