使用 Github Actions 部署 VuePress 部落格

lastknight 發表於 2021-05-31
Vue Github

隨著我 VuePress 部落格中的東西越來越多,每次我打包好專案然後上傳到 Github 上需要好一會兒時間,之前在一些文章中知道 Github Actions 可以幫我自動部署專案,正好今天嘗試嘗試。

在使用 Github Actions 以前,部署過程是這樣的:

  • 寫文章
  • 生成靜態檔案
  • 將靜態檔案部署到 Github Page

使用了 Github Actions 後,過程變為了:

  • 寫文章
  • 提交文章到 Github

配置檔案

接著我們介紹如何使用這一利器。首先你需要在你的專案下新建 .github/workflows/ 資料夾,接著在 workflows 資料夾下新增 xxx.yml 檔案,這個檔名隨意,但是必須是 YAML 檔案,比如我新增檔名為 deploy.yml,給出我的配置內容(去掉了一些個性化的配置)

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/[email protected]

      - name: Install and Build 🔧 
        run: |
          npm install
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/[email protected]
        with:
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
複製程式碼

當你向 Github 提交程式碼時,它會自動的檢測 .github/workflows/ 目錄,如果有配置的話,就會根據你的配置 workflow 自動部署專案。

從上面的配置看,主要分為三個部門:

  • name:這個 workflow 的名稱,自己隨便取

  • on:觸發條件

    on:
      push:
        branches:
          - master
    複製程式碼

    上述表示當我們向 master 分支 push 時就會觸發該 workflow

  • jobs:規定要執行的任務,例如上面我們定義了一個任務 build-and-deploy,每個任務包含如下配置

    • runs-on:執行所需要的虛擬機器環境,Github 為我們提供瞭如下環境

      • ubuntu-latestubuntu-18.04ubuntu-16.04
      • windows-latestwindows-2019windows-2016
      • macOS-latestmacOS-10.14

      這裡我們選擇了 ubuntu-latest

    • steps:任務執行的步驟

接著我們對我們執行的步驟進行說明,我們的步驟包含三步,第一步是拉取主分支的程式碼

- name: Checkout 🛎️
  uses: actions/[email protected]
複製程式碼

第二步,執行兩個命令 npm installnpm run build

- name: Install and Build 🔧 
  run: |
    npm install
    npm run build
複製程式碼

第三步,將 生成的靜態資料夾部署到 gh-pages 分支上

- name: Deploy 🚀
  uses: JamesIves/[email protected]
  with:
    BRANCH: gh-pages
    FOLDER: docs/.vuepress/dist
    ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
複製程式碼

配置金鑰

使用 Github Actions 是需要 ACCESS-TOKEN,既然都已經會使用 Github 了,就肯定知道這個東西怎麼生成了,如果不會,請求參照官方文件

我們需要在倉庫的 Setting 中選擇 Secrets

image-20210531185033956

點選右上方的 New repository secret

image-20210531185129280

Name 必須寫為 ACCESS_TOKENValue 就是你的 token,填寫完畢點選 Add secret,如果填寫沒有問題的話,點選之後就會提示新增成功。

每次當你將 Vuepress 專案提交到 Github 上的時候,Github 就會自動幫你部署專案。

image-20210531185615412

Actions 的這個選項中可以看到專案的部署情況,上面可以看到我嘗試了三次,第三次成功了,前兩次是踩坑,下面就介紹了我踩的兩次坑。

踩坑

VuePress 官網上面,給出的構建指令碼命令是

npm run docs:build
複製程式碼

我覺得麻煩,改為了 npm run build,所以第一次執行的時候,就提示我沒有這個指令碼

image-20210531190036475

我改過來了,所以如果你構建的指令碼命令和我的不一致的話,還是要改的。

另一個坑,上面配置好了以後,我將我的 VuePress 部落格提交到 Github,但是執行一段時間之後爆出了錯誤

image-20210531190224283

從錯誤的型別看好像是超記憶體了,然後經過我的搜尋,在 Github 的一個 issue 中找到了解決辦法,新增下面的環境變數

env:
  NODE_OPTIONS: '--max_old_space_size=4096'
複製程式碼

更改後的配置檔案如下

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/[email protected]

      - name: Install and Build 🔧 
        run: |
          npm install
          npm run build
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'

      - name: Deploy 🚀
        uses: JamesIves/[email protected]
        with:
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
複製程式碼

在最後給出我的個人部落格Coder