使用 GitHub Actions 自動部署博客教程

時間 2020-02-24

標籤使用 github actions 自動部署博客教程欄目 Git 简体版

原文原文鏈接

本篇以 Github Pages 爲例，而且假設你已經掌握了 GitHub Pages 的使用。html

假設你的文章和靜態文件在同一個倉庫，使用 master 分支管理文章和代碼，使用 gh-pages 分支存放生成的靜態文件vue

通常部署博客的流程是：git

寫一篇文章
生成靜態文件：npm run build
切換 gh-pages 分支
複製靜態文件到 gh-pages 分支
訪問網址驗證是否成功

博客就是用來寫文章的，每次寫篇文章還要搞那麼多操做。github

當你使用了 GitHub Actions 以後，流程能夠簡化爲：npm

寫一篇文章
提交到 GitHub

結束了，是否是很方便？ubuntu

從機械的流程中解脫，專一於寫做。服務器

那麼開始打造咱們的 GitHub Actions 吧。網站

我建立了一個示例項目在個人 GitHub 倉庫，用的是 VuePress（一個 Vue 官方的靜態站點生成器）。ui

設置 Secrets

後面部署的 Action 須要有操做你的倉庫的權限，所以提早設置好 GitHub personal access（我的訪問令牌）。搜索引擎

生成教程能夠看 GitHub 官方的幫助文檔：建立用於命令行的我的訪問令牌。

授予權限的時候只給 repo 權限便可。

令牌名字必定要叫：ACCESS_TOKEN，這是後面的 Action 須要用的。

編寫 workflow 文件

持續集成一次運行的過程，就是一個 workflow（工做流程）。

項目結構如圖：

建立.github/workflows/main.yml文件（能夠到個人示例倉庫中查看），內容以下：

name: Deploy GitHub Pages

# 觸發條件：在 push 到 master 分支後
on:
  push:
    branches:
      - master

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

      # 生成靜態文件
      - 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 }}
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist

這裏我就不對語法做講解了，須要瞭解 workflow 的基本語法能夠查看官方幫助，也能夠參考阮一峯老師的 GitHub Actions 入門教程。

這裏我寫了三步：

拉取代碼。用到了一個 GitHub 官方 action：actions/checkout 。
生成靜態文件。直接運行腳本，若是你不是用的 VuePress 或者腳本不同，要修改爲你本身的。
部署到 GitHub Pages。使用了第三方做者的 action：JamesIves/github-pages-deploy-action@releases/v3。我詳細介紹下這個 action：

使用 with 參數向環境中傳入了三個環境變量：

ACCESS_TOKEN：讀取 GitHub 倉庫 secrets 的 ACCESS_TOKEN 變量，也就是咱們前面設置的
BRANCH：部署分支 gh-pages（GitHub Pages 讀取的分支）
FOLDER：須要部署的文件在 docs/.vuepress/dist 路徑，也就是咱們使用 npm run docs:build 生成的靜態文件的位置

這裏有一點須要注意：我使用的是 v3 版本，須要使用 with 參數傳入環境變量，且須要自行構建；網上常見的教程使用的是 v2 版本，使用 env 參數傳入環境變量，不須要自行構建，可以使用 BUILD_SCRIPT 環境變量傳入構建腳本

至此，配置工做均已完成。提交你的代碼，就會開啓自動構建。

之後，你每次有代碼 push 到 master 分支時，GitHub 都會開始自動構建。

驗證

部署失敗

按照教程是不會失敗的，可是建議你瞭解下失敗的狀況。

若是部署失敗你會收到一封部署失敗的郵件

點擊能夠跳轉到倉庫的 Action 頁面查看日誌

展開錯誤的部署 job 查看日誌

能夠看到有這麼一個錯誤日誌：No such file or directory，經排查，是沒有生成靜態文件，所以致使路徑不存在。

我這個錯誤是因爲參考了網上常見的教程致使的。網上大部分教程（包括前面提到的阮一峯老師的教程）使用的是： JamesIves/github-pages-deploy-action 的 v2 版本，然而引用的時候寫的都是： JamesIves/github-pages-deploy-action@master，引用的 master 分支。在做者寫的時候可能當時這個 action 最新的就是 v2 版本，因此沒有什麼問題。然而如今 master 分支已是 v3 版本了，語法有變化，徹底按照教程就會出錯。若是繼續使用他的教程能夠改爲 JamesIves/github-pages-deploy-action@releases/v2。

修復後從新提交，GitHub 會再次部署。

部署成功

點擊倉庫的 Actions，查看部署狀況。

若是正在部署中，應該是圖中標出的這個樣子。

這裏顯示全部的部署（應該叫作 Workflow，便於理解，就叫部署了）記錄。圖中有三種狀態，分別是：部署中（黃色動態圖標）、部署完成（綠色對號圖標）、部署失敗（紅色錯號圖標）。

點擊進入查看部署狀況。

部署成功，全是綠色~

接下來訪問網站驗證一下：https://lasyislazy.github.io/gh-pages-action-demo/

完美結束，享受 GitHub Actions 帶來的愉快體驗吧~

其餘

鑑於仍是有不少人不是用的 GitHub Pages，我這裏再提供一下其餘方式的思路，其實都是同樣的，大概分紅三步：

拉取代碼
生成靜態文件
部署到服務器

前兩步都是同樣的，不一樣的方式區別也就在於第三步。

使用 GitHub Pages 的話可使用 JamesIves/github-pages-deploy-action 這個 action，使用其餘的方式其實也能夠找到對應的 action。

例如，個人網站是部署在虛擬主機空間上的，平時部署是用 FTP 的方式替換主機空間上的靜態文件，所以找到了一個能夠部署到 FTP 上的 acton SamKirkland/FTP-Deploy-Action，而後第三步就變爲了：

- name: FTP Deploy
        uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: xxx.xxx.com
          FTP_USERNAME: xxxx
          FTP_PASSWORD: ${{ secrets.BLOG_FTP_PASSWORD }}
          LOCAL_DIR: docs/.vuepress/dist
          REMOTE_DIR: /htdocs
          ARGS: --delete --transfer-all --exclude=logreport --verbose

通常都是傳一些環境變量進去就能夠了，須要哪些環境變量去這個 action 的 GitHub 上看下介紹就行了。

最後再說一下怎麼找 action，如下是幾個經常使用的網址：