使用vuepress自动化部署工具生成静态网站至GitHub Pages

原创 码农  2020-02-21 10:09:47  阅读 103 次 评论 0 条

使用vuepress自动化部署工具生成静态网站至GitHub Pages 使用vuepress自动化部署工具生成静态网站至GitHub Pages 建站

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

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

特性

  • 自动部署,可自由设置触发时机(如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/repomaster分支。就是这么简单~

如果不了解github workflow什么的,看下面的详细教程

使用示例

仓库:

  • 示例源码仓库:https://github.com/jenkey2011/vuepress-deploy-demo

  • 示例目标仓库:https://github.com/jenkey2011/vuepress-deploy-demo-target

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

  • A TO A:gh_pagesdeploy-to-current-repo-gh_pages.yml

  • A TO B:masterdeploy-to-other-repo-master.yml

  • A TO B:custom_branchdeploy-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_TOKENgithub的tokensecrets
TARGET_REPO目标仓库,例: jenkey2011/blog默认当前仓库env
TARGET_REPO目标仓库的分支,例:gh-pages默认 gh-pagesenv
BUILD_SCRIPT构建脚本 例: yarn && yarn buildenv
BUILD_DIR构建产物的目录 e.g.: blog/.vuepress/dist/env
CNAMEGithub Pages 站点别名envno

详细教程

创建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


本文地址:https://www.itcodeit.com/post/80.html
版权声明:本文为原创文章,版权归 码农 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?