Github Actions can help you when you want to see the effects of your project online.

Yes, that’s it ⬇️

Without further ado, we now use it to create a blog of our own, and implement the push code after the site content automatically updated.

1. Obtain the Personal Access Token and set it in the repository

1.1 Obtaining a Personal Access Token

Click Generate New Token to Generate a new token and copy it (note: this token is only displayed when it is successfully generated and cannot be viewed once it exits, so remember to save it).

1.2 Adding Secret to the warehouse

Go to the repository where you want to add Github actions and follow these steps:

After entering the New Secret page, fill in the Name and Value fields. Name is ACCESS_TOKEN, and Value is the Personal Access Token Value that you just saved.

2. Add a CI script

In the root directory of the project, create the YAML file to be executed

mkdir .github
cd .github
mkdir workflows
cd workflows
touch nodejs.yml
Copy the code

Add the following content to nodejs.yml

name: Build a blog
on:
  push:  # specify the trigger event
    branches:
      - dev  Specify the branch that triggers the action

jobs:
  main:
    runs-on: ubuntu-latest
    steps:

    # pull the Github repository code
    - name: Checkout
      uses: actions/checkout@v2
      with:
        persist-credentials: false

    Install dependencies
    - name: Install dependencies
      run: | npm install        
    Perform the build step
    - name: build
      run: | npm run build
    # execute deployment
    - name: The deployment of
      uses: JamesIves/github-pages-deploy-action@releases/v3 This action will automatically push code to the specified branch based on the configuration
      with:
        ACCESS_TOKEN: The ${{ secrets.ACCESS_TOKEN }} # Specify the key, as set in step 1
        BRANCH: gh-pages  ## Specifies the remote branch to push to
        FOLDER: docs Vuepress builds to the artifacts in the docs folder
Copy the code

3. Trigger the build

Commit code to dev branch:

git add .
git commit -m ' '
git push -u origin dev
Copy the code

Click on the Actions TAB for the Github repository to see a build process similar to the following:

You can see that the push event we defined in nodejs.yml is triggered, performing all the steps in Jobs, packaging and pushing the packaged content into the Docs folder to the Gh-Pages branch of the Github repository.

When complete Job is complete, go to the repository Settings => Pages menu, set the Source Branch field to gh-Pages, and select the root folder:

Click the Save button and wait for the following notification to indicate that the build is successful:

Click on the link to see the auto-built application. From now on, all you need to do is push to the branch specified in the YML file and it will automatically trigger the build and automatically update your site.

4. Extend applications – Automatically publish NPM packages

NPM publishing is essentially the same as the previous journey, except that the Github ACCESS_TOKEN obtained and set in step 1 becomes the ACCESS_TOKEN of NPM, and the Github Pages script deployed in step 2 becomes the NPM publishing script.

4.1 Obtain the NPM Access Token and set it to the repository

Go to NPM’s official website and log in to your account. Then click on your picture in the upper right corner and click on Access Tokens to enter token Management:

Click Generate New Token:

The following interface appears:

Because we need the token to Publish the NPM package, select Publish and click Generate token.

Click on the Token to copy it to the clipboard (note that the Token again only appears once, so keep it in a safe place).

Then go to Github repository Settings and add a secret with a key of NPM_TOKEN and the value of the newly obtained NPM Access Token as you did in step 1.

4.2 Adding the NPM Automatic Packet Sending Script

As mentioned above, the difference between deploying the application and publishing the NPM package is only in the last part. We will modify the script slightly by changing the deployment steps to NPM publishing.

name: Build a blog
on:
  push:  # specify the trigger event
    branches:
      - dev  Specify the branch that triggers the action

jobs:
  main:
    runs-on: ubuntu-latest
    steps:

    # pull the Github repository code
    - name: Checkout
      uses: actions/checkout@v2
      with:
        persist-credentials: false

    Install dependencies
    - name: Install dependencies
        run: | npm install
    Perform the build step
    - name: build
        run: | npm run build
    # execute deployment
    - name: Release to NPM
      uses: actions/setup-node@v1
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/  Set NPM address warehouse
      - run: npm publish # execute publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} # NPM_TOKEN just set
Copy the code

The resources

  • github action
  • Workflow syntax for GitHub operations