preface

I was reviewing my JavaScript basics recently. I had just finished reading JavaScript Advanced Programming (4th Edition) and was looking for some good code bases to reinforce what I had learned. Lodash came naturally to me.

Lodash is a consistent, modular, high-performance JavaScript utility library. In the author’s company use rate is quite high, I believe in everyone’s project is the same, so I want to study lodash source code, by the way to do some source code analysis, not happy alone, write some articles to share with you.

Which brings me to the topic of this article, quickly building a documentation website. I do have a server with a domain name of https://lcs.show, but the bandwidth is limited and you have to configure your own NGINX, GitHub Action, and HTTPS certificates.

I happened to see Tencent Cloud CloudBase service, which can quickly build a static website. If you don’t have a domain name, it will automatically assign a domain name (but it will be difficult to remember). If you can register a domain name, you can also easily apply for and configure HTTPS certificates. If used in conjunction with GitHub actions, it can be said that server maintenance is completely eliminated.

Here’s how to set it up and deploy it.

Setup and deployment

This paper takes VuePress as an example to build and deploy, VitePress, Next, Docsify and other deployments are much the same.

Project initialization

  1. Install the CLI
npm install -g @cloudbase/cli@latest
Copy the code
  1. Example Initialize an application
tcb new cloudbase-test vuepress
Copy the code

You need to log in to use the CLI. If the CLI detects that you are not currently logged in, it will automatically open the browser and jump to the Login page of Tencent Cloud. After successful login, return to the command line and proceed to the next step:

Next, choose a server site that you think is suitable. Here, I choose Shanghai.

If you do not have an environment, you can directly select “Create a new environment”. The CLI will automatically open the browser and jump to the “Create a New Environment” page. Create a new environment as shown in the figure below.

Click Next after the selection is complete:

After successful creation, return to the command line, the environment will be initialized, wait a few minutes to directly create the project. When successfully created, the following directory structure of the project will be generated:

├── CloudBaserc. json ├── Guides │ ├─ readme.md │ ├─ package.jsonCopy the code

Project deployment

  1. Install dependencies
npm i
Copy the code
  1. Build the deployment
npm run deploy
Copy the code
  1. The deployment was successful

Run the NPM run deploy command. After a while, the deployment is successful. The command line returns an access domain name. The author for cloudbase-test-9gccjnk3e393c02a-1256377994.tcloudbaseapp.com/vuepress/, click to access the sample site, the following:

Up to this point, the deployment work is actually finished, and there is no need to configure NGINX and other complicated operations, which is the charm of cloud services. At the same time, the service is billed by volume, and the cost for the author can be said to be very low.

However, this is not enough. Once we have configured the GitHub Action, we will be able to fully automate the deployment process and focus our daily efforts on documentation.

Making the Action configuration

If you initialize a project, you will see a cloudBaserc. json file in the project. This file is the CloudBase configuration file, and there is an envId configuration item in the file. This is sensitive information, please do not upload to GitHub. Remove this configuration from cloudBaserc. json!

Since you can’t upload, how do you configure it? The answer is simple: use GitHub secret. You need to create a new key in the Tencent Cloud Console. After creating a new key, open your GitHub repository and set it as follows:

Create three secrets: ENVID, SECRETID, and SECRETKEY. ENVID is displayed in the application list. The configuration is as follows:

Next create the deploy. Yml file in the.github/workflows directory of your project as follows:

name: Automatic deployment

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: deploy
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Deploy to Tencent CloudBase
        uses: TencentCloudBase/cloudbase-action@v2
        with:
          secretId: The ${{ secrets.SECRETID }}
          secretKey: The ${{ secrets.SECRETKEY }}
          envId: The ${{ secrets.ENVID }}
Copy the code

Push your project code to GitHub to automate the deployment, and you can focus on documentation instead of server maintenance.

Happy to move bricks ~

conclusion

Cloud services like Tencent Cloud Cloudbase can really be a lot more convenient, you can directly deploy your own static blog or documents and other sites, one key deployment, no operation and maintenance, not beautiful.

I’m currently working on lodash source code parsing at lodash.lcs.show, GitHub at github.com/jacob-lcs/l… Of course, it is still in the early stages, so if you are interested, please pay attention to it