preface

Previous: Build a canonical TypeScript SDK project engineering environment from scratch

In this article, Github Actions will be configured based on the project built above. The configuration will include the following two aspects:

  • Automatic updatesStatic resource(VuepressThe Docs document) toGithub 上
  • automaticBuild buildingAnd publish the product toNPM 上

This is a brief introduction to Github Actions. If you want to learn more complex things, check out the Actions website

Github

The complete configuration code has been published on Github. If there is any unclear configuration, you can check the code

Previously prepared

Before we configure, we need some prior preparation: create Github Token and NPM Token, otherwise we cannot push resources to Github and NPM

Create a lot Token

To publish Docs on Github, we need to create a Github Token and create a link to github.com/settings/to…

After logging in to the Github account, the page linked above looks like the following.

Note is the name of the Token, which we define here as Deploy

Expiration is the validity period of the Token. I set Expiration to 90 days, which can be configured as required

And the permissions we need to give it workflow and Repo permissions

Then, after we click Generate Token below, a token will be generated for us. The generated token will only be displayed this time. We can save it and Generate another one if we lose it accidentally.

Create NPM Token

We log on to the official website of NPM, log in to our account, hover the mouse over our picture in the upper right corner, and click On Access Tokens to enter the interface of creating Tokens.

Once on the page, we clicked on the Generate New Token button in the upper right corner

Click Generate New Token to enter the page shown below. We can choose Automation or Publish

The created Token is displayed in this location, again, only once, and we need to record it

Add Secret to the project repository

We have applied for NPM Token and Github Token above, but we still need to configure these two tokens into the secrets in the project Settings, as shown in the picture. Enter our project, click Setting, and then click secrets. Then click the New Repository Secret button in the upper right corner

Name is the Name of the Token, and Value is the specific Value of the Token

We set Name to NPM_PUBLISH and Value to the NPM Token we applied for.

Also, set Name to Deploy and Value to the Github Token we applied for

After setting, the following figure is shown:

Configuration workflows

With all the tokens configured, we can go into our actual code to configure workflows

Here we do the following steps first:

  1. Create in the project root directory.githubFolder.
  2. in.githubcreateworkflowsFolder.
  3. inworkflowscreatedeploy.ymlFile.

The code for the deploy.yml file is as follows:

If you want to build a tag on github, you will need to build a tag on github. If you want to build a tag on Github, you will need to build a tag on Github. Jobs: docs_and_publish: # name: job name displayed in Github name: buildLibrary runs-on: Ubuntu -latest steps: # name: name of the current step - name: Checkout # Uses: actions/checkout@v2 - name: Setup node.js v14.x # Setup node.js environment uses: actions/setup-node@v1 with: node-version: '14.x' -name: Install run: NPM install # install dependencies - name: Build run: NPM run Build # pack-name: Docs run: NPM run Docs: Build # pack-name: NPM run Deploy uses: peaceiris/actions-gh-pages@v3 # Use action with: publish_dir deployed to GitHub Pages: /docs/.vuepress/dist # github_token: ${{secrets.deploy}} # secret name commit_message: - name: Publish to NPM # Publish to NPM run: | npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN npm publish env: NPM_TOKEN: ${{ secrets.NPM_PUBLISH }}Copy the code

The NPM run docs:build command can be converted to the required command according to the type of document it uses.

validation

We have configured the configuration above, now let’s test the effect; Since we only execute the script when we listen for tag changes, let’s go to Github and print a tag

Click Draft A New Release button to enter the create Release interface

In the red box above, enter the version of the tag we want to type and click Publish Release.

After release is committed, we go into actions until the script is finished: √

Going back to the front page of our project, you can see releases and Environments are not empty.

Let’s open our static resources link again and see: you can see that the Docs document has been automatically updated with the tagged version

Let’s finally go to NPM to see if it has automatically published the NPM package for us

Effect pull group!

At the end

As configured above, when we tag Github, it triggers the script we wrote to build the static resource and publish the NPM package.

If you have any questions about the content of this article, please leave them in the comments section