利用 GitHub Actions 實現自動部署靜態部落格

zerodegree發表於2020-06-08
Github

前言

::: warning

我使用vuepress搭建了一個靜態部落格，掛在了 Github pages 和 Coding pages 上面。

coding pages在國內的訪問速度比github pages要快很多，而且還可以被百度收錄。

一開始的部署方式是使用sh部署指令碼把程式碼提交到這兩個平臺的倉庫分支，雖然已經很方便了，但是我還想把部落格未打包的原始碼提交到Github主分支上。這就需要我操作兩次命令，我就想能不能只需要一次操作就可以同時把原始碼、部署程式碼一次性提交到兩個平臺呢？

:::

demo

實現

首先，需要獲取token，後面會用到。獲取方法：github獲取token官方文件、coding獲取token官方文件。

然後，將這兩個token同時儲存到github倉庫的 Settings/Secrets 裡面。變數名可以隨便取，但是注意要和後面的ci.yml檔案內的變數名一致，這裡取的是 ACCESS_TOKEN 和 CODING_TOKEN

GitHub Actions 的配置檔案叫做 workflow 檔案，存放在程式碼倉庫的.github/workflows目錄。

workflow 檔案採用 YAML 格式，檔名可以任意取，但是字尾名統一為 .yml，比如 ci.yml。一個庫可以有多個 workflow 檔案。GitHub 只要發現.github/workflows目錄裡面有 .yml 檔案，就會自動執行該檔案

我的 ci.yml 檔案：


name: CI

# 在master分支發生push事件時觸發。

on: 

  push:

    branches:

      - master

jobs: # 工作流

  build:

    runs-on: ubuntu-latest #執行在虛擬機器環境ubuntu-latest

    strategy:

      matrix:

        node-version: [10.x]

    steps: 

      - name: Checkout # 步驟1

        uses: actions/checkout@v1 # 使用的動作。格式：userName/repoName。作用：檢出倉庫，獲取原始碼。 官方actions庫：https://github.com/actions

      - name: Use Node.js ${{ matrix.node-version }} # 步驟2

        uses: actions/setup-node@v1 # 作用：安裝nodejs

        with:

          node-version: ${{ matrix.node-version }} # 版本

      - name: run deploy.sh # 步驟3 （同時部署到github和coding）

        env: # 設定環境變數

          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密變數

          CODING_TOKEN: ${{ secrets.CODING_TOKEN }} # 騰訊雲開發者平臺（coding）私密token

        run: npm install && npm run deploy # 執行的命令  

        # package.json 中新增 "deploy": "bash deploy.sh"

具體步驟不解釋了，不知道yaml結構的請自行google

再來看看將要被執行的 deploy.sh 部署程式碼：


#!/usr/bin/env sh

# 確保指令碼丟擲遇到的錯誤

set -e

npm run build # 生成靜態檔案

cd docs/.vuepress/dist # 進入生成的資料夾

# deploy to github

echo 'blog.zerodegree.top' > CNAME

if [ -z "$GITHUB_TOKEN" ]; then

  msg='deploy'

  githubUrl=git@github.com:zerocola777/blog.git

else

  msg='來自github action的自動部署'

  githubUrl=https://zerocola777:${GITHUB_TOKEN}@github.com/zerocola777/blog.git

  git config --global user.name "zerodegree"

  git config --global user.email "77849093@qq.com"

fi

git init

git add -A

git commit -m "${msg}"

git push -f $githubUrl master:gh-pages # 推送到github

# deploy to coding

echo 'www.zerodegree.top\nzerodegree.top' > CNAME  # 自定義域名

if [ -z "$CODING_TOKEN" ]; then  # -z 字串 長度為0則為true；$CODING_TOKEN來自於github倉庫`Settings/Secrets`設定的私密環境變數

   codingUrl=git@e.coding.net:zerodegree/zerodegree.git

else

   codingUrl=https://VzpWUthwxq:${CODING_TOKEN}@e.coding.net/zerodegree/zerodegree.git #注意！！！這裡需要使用coding提供的個人令牌的使用者名稱和token

 fi

git add -A

git commit -m "${msg}"

git push -f $codingUrl master # 推送到coding

cd -

rm -rf docs/.vuepress/dist

至此，我前面提到的需求就實現啦，只需要把原始碼push到github倉庫這一個步驟，後面的部落格打包、部署到github和coding等工作都由GitHub Actions來自動完成。

ps. leanku好像有些markdown語法不支援，不過大家應該都看得懂，就不修改了。。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章