demand

To deploy to Github Pages, you need to start yarn Docs: Build each time, and then put the packaged content on the GH_Pages branch. It is very difficult. Therefore, you need an automatic deployment technology.

Method of use

Create an action

Create a.github/workflow/[your Action name].yml file in your repository

The name of action
name: Deploy GitHub Pages

Trigger condition: after push to main branch
on:
  push:
    branches:
      - main

# task
jobs:
  build-and-deploy:
    Server environment: The latest version of Ubuntu
    runs-on: ubuntu-latest
    steps:
      # pull code
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      Generate static files
      - name: Build
        run: npm install && npm run docs:build

      # Deploy to GitHub Pages
      - name: Deploy
        # Use an action written by someone else
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          The ACCESS_TOKEN name here needs to correspond to the ACCESS_TOKEN name described below
          ACCESS_TOKEN: The ${{ secrets.ACCESS_TOKEN }}
          Which branch is the packaged file deployed to
          BRANCH: gh-pages
          Where is the packaged file
          FOLDER: docs/.vuepress/dist

Copy the code

To generate the token

Create a Github key from the official document and copy it after it is generated

Go to your own warehouse

  • Click on thesettings
  • Click on the left side of theSecrets
  • Click the button on the rightnew repository secret
  • Create the name and.ymlIn thesecret.xxxTo correspond, the value is written to the Github key you just generated

The use of the actions

When you create an action, you specify that it will be triggered when pushed to the main branch. By doing this, you can see your Actions in the Actions TAB of the Github repository

If?

If an actions fails, a failure email will be sent to your Github QQ mailbox. You can also see the reason why your actions failed in the actions section of the repository

Deployment of making Pages

  • Click on the warehouseSettings
  • Click on the leftPages
  • Select the branch to deploy
  • Click on thesave
  • Successful, click on the link above to see Github Pages

Next, you can have fun with Github Pages and VuePress