使用vuepress-deploy自動部署vuepress靜態網站至GitHub Pages

vuepress是個靜態網站（博客）生成器，具備很是好的加載性能和搜索引擎優化，若是你使用過vue的話，不妨試試，必定會讓你愛不釋手。

vuepress提供了幾種部署方法，有本地腳本、Travis CI、Netlify，可是不能徹底知足個人需求。因此我開發了一個vuepress-deploy的自動化部署工具。能夠去GitHub Action市場查看：https://github.com/marketplace/actions/vuepress-deploy

<!-- more -->

特性

• 自動部署，可自由設置觸發時機（如push完代碼後）
• 同時跑多個部署任務
• 能夠部署到本倉庫、亦可部署到任何有權限的倉庫
• 支持自定義GitHub Pages域名，即支持自定義CNAME

在你項目倉庫.github/workflows目錄下建立一個 .yml文件，舉例：vuepress-deploy.yml。

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: vuepress-deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        TARGET_REPO: username/repo
        TARGET_BRANCH: master
        BUILD_SCRIPT: yarn && yarn build
        BUILD_DIR: blog/.vuepress/dist/
        CNAME: https://www.dachangxiaoyuan.top

上述配置的結果是：每次推送代碼，將自動構建、部署到username/repo的master分支。就是這麼簡單~

若是不瞭解 github workflow什麼的，看下面的 詳細教程

使用示例

倉庫：

• 示例源碼倉庫：https://github.com/jenkey2011/vuepress-deploy-demo
• 示例目標倉庫：https://github.com/jenkey2011/vuepress-deploy-demo-target

對應狀況與部署文件設置：

• A TO A:gh_pages: deploy-to-current-repo-gh_pages.yml
• A TO B:master: deploy-to-other-repo-master.yml
• A TO B:custom_branch: deploy-to-other-repo-custom_branch.yml

效果查看：

• 部署任務詳情: https://github.com/jenkey2011/vuepress-deploy-demo/actions
• A TO A:gh_pages: https://github.com/jenkey2011/vuepress-deploy-demo/tree/gh_pages
• A TO B:master:https://github.com/jenkey2011/vuepress-deploy-demo-target/tree/master
• A TO B:custom_branch:https://github.com/jenkey2011/vuepress-deploy-demo-target/tree/custom_branch

參數

參數	含義	類型	是否必須
ACCESS_TOKEN	github的token	secrets	是
TARGET_REPO	目標倉庫，例： jenkey2011/blog。默認當前倉庫	env	否
TARGET_REPO	目標倉庫的分支，例：gh-pages。默認 gh-pages	env	否
BUILD_SCRIPT	構建腳本 例： yarn && yarn build	env	是
BUILD_DIR	構建產物的目錄 e.g.: blog/.vuepress/dist/	env	是
CNAME	Github Pages 站點別名	env	no

詳細教程

建立token

點擊你的頭像 > Settings > Developer settings > Personal access tokens > Generate new token.
權限至少要勾選repo，不清楚的，直接無腦全選就行~ 問題不大，不要慌。

詳細信息看：https://help.github.com/en/github/authenticating-to-github/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on

建立secrets

你的vuepress項目源碼倉庫下 > Settings > Secrets， 建立ACCESS_TOKEN， 值就填寫你剛纔建立的token，肯定。

建立一個任務文件

在項目根目錄下，建立.github/workflows，而後再建立一個 .yml文件，名字隨便取，例：vuepress-deploy.yml。

詳細信息看：https://help.github.com/en/actions/automating-your-workflow-with-github-actions/configuring-a-workflow

相關連接

• vuepress: https://vuepress.vuejs.org/zh/
• vuepress-deploy: https://github.com/jenkey2011/vuepress-deploy

【原文地址】：使用vuepress-deploy自動部署vuepress靜態網站至GitHub Pages