Follow me VuePress There's more and more in blogs , Every time I pack a project and upload it to Github It's going to take a while on the road , I know in some articles before Github Actions Can help me deploy projects automatically , Just try it today .

In the use of Github Actions before , The deployment process is like this ：

• Write an article
• Generating static files
• Deploy static files to Github Page On

Used Github Actions after , The process becomes ：

• Write an article
• Submit the article to Github On

The configuration file

And then we'll show you how to use this weapon . First, you need to create a new... Under your project .github/workflows/ Folder , And then workflows New under folder xxx.yml file , This file name is arbitrary , But it must be YAML file , For example, I added a new file named deploy.yml, Give me my configuration ( Removed some personalized configuration )

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout ️
        uses: actions/[email protected]

      - name: Install and Build  
        run: |
          npm install
          npm run build

      - name: Deploy 
        uses: JamesIves/[email protected]
        with:
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

When you turn to Github When code is submitted , It will automatically detect .github/workflows/ Catalog , If there is a configuration , According to your configuration workflow Automatically deploy projects .

From the configuration above , It is mainly divided into three departments ：

• name： This workflow The name of , Take whatever you like

• on： The trigger condition

  on:
    push:
      branches:
        - master
  

  When we say to master Branch push It will trigger the workflow

• jobs： Define the tasks to be performed , For example, we defined a task above build-and-deploy, Each task contains the following configuration

  • runs-on： The virtual machine environment needed to run ,Github It provides us with the following environment

    • ubuntu-latest, ubuntu-18.04 or ubuntu-16.04
    • windows-latest, windows-2019 or windows-2016
    • macOS-latest or macOS-10.14

    Here we chose ubuntu-latest

  • steps： The steps to run the task

And then we'll explain the steps we're going to take , Our steps include three steps , The first step is to pull the code of the main branch

- name: Checkout ️
  uses: actions/[email protected]

The second step , Run two commands npm install And npm run build

- name: Install and Build  
  run: |
    npm install
    npm run build

The third step , take The generated static folder is deployed to gh-pages On the branch

- name: Deploy 
  uses: JamesIves/[email protected]
  with:
    BRANCH: gh-pages
    FOLDER: docs/.vuepress/dist
    ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

Configure key

Use Github Actions Is the need to ACCESS-TOKEN, Now that they can use it Github 了 , I'm sure I know how this thing came into being , If not , Request reference Official documents .

We need to be in the warehouse Setting Choose from Secrets

Click... On the top right New repository secret

Name It must be written as ACCESS_TOKEN,Value It's your token, When you're done, click Add secret, If there's no problem filling in , After clicking, you will be prompted to add successfully .

Every time you're going to Vuepress Project submitted to Github Last time ,Github Will automatically help you deploy the project .

stay Actions You can see the deployment of the project in this option , As you can see above, I tried three times , The third time it worked , The first two were stepping on the pit , Here are the two pits I stepped on .

Step on the pit

stay VuePress On the official website , The build script command given is

npm run docs:build

I feel in trouble , Change it to npm run build, So the first time you run it , Just remind me that I don't have this script

I changed it , So if the script you build doesn't match mine , It still needs to be changed .

Another pit , When it's configured , I'll take my VuePress Blog submitted to Github, But after running for a while, there was an error

Judging from the type of error, it seems to be super memory , And then after my search , stay Github One of the issue Found in the terms of settlement , Add the following environment variables

env:
  NODE_OPTIONS: '--max_old_space_size=4096'

The changed configuration file is as follows

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout ️
        uses: actions/[email protected]

      - name: Install and Build  
        run: |
          npm install
          npm run build
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'

      - name: Deploy 
        uses: JamesIves/[email protected]
        with:
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}