使用Github Actions功能實現Vuepress項目push後自動部署到Github Page

前序

前一段時間使用vuepress生成了自己的博客網站，發佈到Github.io的流程是：寫好博客後，打包項目，然後執行bash文件（http://caibaojian.com/vuepress/guide/deploy.html）將打包後的文件部署到mybells.github.io倉庫中。然後就可以在https://mybells.github.io/查看博客了。

但是最近瀏覽阮一峯的網絡日誌時學習到了《GitHub Actions 入門教程》，學習後發現如果使用GitHub Actions，部署項目就變得更簡單了。只需要推送項目文件，GitHub Actions就會在虛擬機中自動執行一系列命令，省去了打包和執行bash文件的步驟。

GitHub Actions 是 GitHub 的持續集成服務。可以去Github官網學習。

使用Github Page

如果想把github項目部署到Github Page上有兩種方法。我使用的第一種。

第一種是直接在github上新建一個<user>.github.io的倉庫,名字必須是這個。打包文件push到這個倉庫中就可以在<user>.github.io上瀏覽了。

第二種是在推送的倉庫中新建一個gh-pages分支，名字必須是這個否則Settings中選擇不了其他名字的分支。然後在項目Settings的Options中的Github pages選項中選中gh-pages分支。並支持修改主題和域名。就可以在<user>.github.io/你的倉庫名地址瀏覽了。

兩種方法具體步驟可以查看Github Pages。

使用Github Actions

1. 點擊要使用倉庫的Actions。選擇設置一種workflow模板。
   
2. 這裏我選擇Node.js的模板
   選擇後配置相關動作和流程，然後提交就可以了。提交後會在倉庫中生成./github/workflows/xxx.yml文件以後每次執行配置的動作就可以自動執行配置的流程。
   
3. vuepress項目中的workflow配置代碼

name: github pages

on:
  push:
    branches:
    - master

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - run: npm ci # 相當於npm install
    - run: npm run docs:build

    #發佈到mybells.github.io/master
    - name: Deploy mybells.github.io/master
      uses: peaceiris/actions-gh-pages@v2
      env:
        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        EXTERNAL_REPOSITORY: mybells/mybells.github.io #可以新建一個mybells.github.io倉庫發佈到master
        PUBLISH_BRANCH: master
        PUBLISH_DIR: docs/.vuepress/dist
      with:
          emptyCommits: false

    # #發佈到MyBlog/gh-pages 查看https://mybells.github.io/MyBlog/，需要修改base配置爲MyBlog，修改圖片路徑
    # - name: Deploy MyBlog/gh-pages
    #   uses: peaceiris/actions-gh-pages@v2
    #   env:
    #     ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
    #     PUBLISH_BRANCH: gh-pages #也可以在本項目MyBlog新建gh-pages分支，名字一定要是gh-pages這樣github page設置才能識別到這個分支，其他名字識別不到。https://help.github.com/cn/github/working-with-github-pages/creating-a-github-pages-site#creating-your-site
    #     PUBLISH_DIR: docs/.vuepress/dist
    #   with:
    #       emptyCommits: false

以上代碼的意思是：

1. 當push文件到倉庫上時觸發流程。
2. 使用actions/checkout@v1插件拉取代碼。並下載依賴包npm install和打包項目npm run build。
3. 使用peaceiris/actions-gh-pages@v2插件發佈到相關倉庫中。

GitHub Pages actionActions推送插件使用方法可以查看傳送門。

也可以在Github市場中下載使用其他一些工作流程插件。

最後的最後就可以愉快的瀏覽自己寫的博客了。
我的項目博客地址https://github.com/mybells/MyBlog，可以參考這個項目中的配置。有幫助的點個star喲。