vuepress是个静态网站(博客)生成器,具有非常好的加载性能和搜索引擎优化,如果你使用过vue的话,不妨试试,一定会让你爱不释手。
vuepress提供了几种部署方法,有本地脚本、Travis CI、Netlify,但是不能完全满足我的需求。所以我开发了一个vuepress-deploy的自动化部署工具。可以去GitHub Action市场查看:https://github.com/marketplace/actions/vuepress-deploy
#特性
- 自动部署,可自由设置触发时机(如push完代码后)
- 同时跑多个部署任务
- 可以部署到本仓库、\u0004亦可部署到任何有权限的仓库
- 支持自定义GitHub Pages域名,即支持自定义CNAME
在你项目仓库.github/workflows目录下创建一个 .yml文件,举例:vuepress-deploy.yml。
<code>name: Build and Deployon: [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/<code>
上述配置的结果是:每次推送代码,将自动构建、部署到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
#参数
#详细教程
#创建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
閱讀更多 大廠小猿 的文章