Vuepress is a static website (blog) generator with great load performance and seo. If you’ve used Vue, try it. You’ll love it.

Vuepress offers several deployment methods, including native scripting, Travis CI, and Netlify, but it doesn’t quite meet my needs. So I developed a vuepress-deploy automated deployment tool. Check out the GitHub Action marketplace at github.com/marketplace…

features

  • Automatic deployment, trigger timing can be set freely (e.gpushAfter the code)
  • Run multiple deployment tasks simultaneously
  • You can deploy to this warehouse or to any authorized warehouse
  • Support customizationGitHub PagesThe domain name supports customizationCNAME

Create a.yml file in the. Github /workflows directory of your project repository, for example 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: The ${{ 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
Copy the code

The result of this configuration is that every time you push code, it will automatically build and deploy to the master branch of username/repo. It’s that simple

If you don’t know anything about Github Workflow, check out the github Workflow tutorial below

Use the sample

Warehouse:

  • Example source repository: github.com/jenkey2011/…
  • Example target repository: github.com/jenkey2011/…

Corresponding situation and deployment file setting:

  • 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

Effect view:

  • Deployment task details: 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/…

parameter

parameter meaning type Whether must
ACCESS_TOKEN Making the token secrets is
TARGET_REPO Target warehouse, for example:jenkey2011/blog.Default current repository env no
TARGET_REPO Branch of the target warehouse, for example:gh-pages.Gh – pages by default env no
BUILD_SCRIPT Example build script:yarn && yarn build env is
BUILD_DIR Catalog of build artifactsblog/.vuepress/dist/ env is
CNAME Github Pages site alias env no

Detailed tutorial

Create a token

Click on your avatar > Settings > Developer Settings > Personal Access Tokens > Generate new Tokens. Permission to at least check the REPo, not clear, direct brainless all select line ~ problem is not big, do not panic.

Details see: help.github.com/en/github/a…

Create the secrets

For your vuepress project, go to Settings > Secrets, create ACCESS_TOKEN, and fill in the value of the token you just created.

Create a task file

In the root directory of the project, create. Github /workflows, and then create a. Yml file, for example, vuepress-deploy.yml.

Details see: help.github.com/en/actions/…

A link to the

  • vuepress: vuepress.vuejs.org/zh/
  • vuepress-deploy: Github.com/jenkey2011/…

Automatically deploy vuepress static websites to GitHub Pages using vuepress-deploy