使用vuepress-deploy自动部署vuepress静态网站至GitHub Pages

2020/2/21 11:17:50

编程Tag： Vuepress

本文主要是介绍使用vuepress-deploy自动部署vuepress静态网站至GitHub Pages，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vuepress是个静态网站（博客）生成器，具有非常好的加载性能和搜索引擎优化，如果你使用过vue的话，不妨试试，一定会让你爱不释手。

vuepress提供了几种部署方法，有本地脚本、Travis CI、Netlify，但是不能完全满足我的需求。所以我开发了一个vuepress-deploy的自动化部署工具。可以去GitHub Action市场查看：github.com/marketplace…

特性

自动部署，可自由设置触发时机（如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什么的，看下面的详细教程

使用示例

仓库：

示例源码仓库：github.com/jenkey2011/…
示例目标仓库：github.com/jenkey2011/…

对应情况与部署文件设置：

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

效果查看：

部署任务详情: github.com/jenkey2011/…
A TO A:gh_pages: github.com/jenkey2011/…
A TO B:master:github.com/jenkey2011/…
A TO B:custom_branch:github.com/jenkey2011/…

参数

参数	含义	类型	是否必须
`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