This article is brought by Liu Chengshuai (Jacob), the front-end engineer of Shell House, and introduces how to use
Cloud development CloudBase, server free, domain name free way to quickly build a personal site. Let’s study together

preface

Lodash came naturally to my mind after a recent review of JavaScript basics and a recent reading of JavaScript Advanced Programming (4th Edition) and looking for some great code libraries to reinforce what I’ve learned.

This library in the author’s company usage is extremely high, so want to study the source code and output a series of analysis articles. And most of the online source code analysis is mostly built by their own document website, so on to the topic of this article, quickly build a document website.

I did have a server, but it had limited bandwidth, and I had to configure Nginx, GitHub actions, HTTPS certificates, and so on.

If you don’t have a domain name, it will automatically assign a domain name. It is also very easy to apply for and configure HTTPS certificate. If you use it with GitHub Action, it can be said that there is no need to consider server maintenance content.

Here’s how to build and deploy it.

Setup and Deployment

This paper takes VuePress as an example to build and deploy, while VitePress, Next, Docsify and other deployments are similar.

Project initialization

1. Install the CLI

npm install -g @cloudbase/cli@latest

2. Initialize an application

tcb new cloudbase-test vuepress

Login is required to use this CLI. If the CLI detects that you are not currently logged in, it will automatically open the browser and jump to the Tencent cloud login page. After successful login, it will return to the command line and continue the next step:

Next, select a server location that you think is appropriate. In this case, I choose Shanghai.

Next, I will select the associated environment. If you don’t have an environment at present, you can directly select “Create New Environment”. CLI will automatically open the browser and jump to the “Create New Environment” page.

Click Next when the selection is complete:





After successful creation, return to the command line, showing that the environment is being initialized, and wait a few minutes before you can directly create the project. A project with the following directory structure will be generated upon success:

├─ Guides │ ├── Readme.sigma - - Guides │ ├── Readme.sigma - - package.sigma

Project deployment

1. Install dependencies

npm i

2. Build deployment

npm run deploy

3. Deployment successful

After executing NPM run deploy for a while, the command line will return an access domain name. https://cloudbase-test-9gccjnk3e393c02a-1256377994.tcloudbaseapp.com/vuepress/, click to access the sample site, the following:

At this point, in fact, the deployment work is over, no need to configure NGINX and other complex and tedious operations, this is the charm of the cloud service, at the same time, the service is charged according to the amount, the cost can be said to be very low for the author.

However, that’s not enough. Once you configure GitHub Action, you can fully automate your deployment and focus on documentation.

Making the Action configuration

If you initialize a project, you will see a cloudBaserc. Json file in the project. This file is a CloudBase configuration file, and there is an envId configuration item in the file. Delete this configuration information from cloudBaserc.json!

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

Create three secrets, ENVID, SECRETID, and SECRETKEY, where ENVID can be seen in the application list. After the configuration is complete, look like this:

Next, in the project’s.github/workflows directory, create a deploy.yml file with the following contents:

Pull_request: branches: [master] jobs: deploy: run-on: ubuntu-latest name: deploy steps: - name: Checkout uses: actions/checkout@v2 - name: Deploy to Tencent CloudBase uses: TencentCloudBase/cloudbase-action@v2 with: secretId: ${{ secrets.SECRETID }} secretKey: ${{ secrets.SECRETKEY }} envId: ${{ secrets.ENVID }}

Push your project code to GitHub to automate your deployment, and then you can focus on documentation without worrying about server maintenance.

conclusion

Cloud services like Cloudbase can be really convenient, you can directly deploy your own static blog or document sites, one-click deployment, no need for operation and maintenance, how beautiful it is.

As I mentioned earlier, I’m currently working on a lodash source resolution at lodash.lcs.show.

GitHub address: https://github.com/jacob-lcs/lodash-source-code-analysis, of course, is still in the beginning stage, if you are interested, welcome to follow.

Product introduction

Cloud development (TCB) is the cloud native integrated development environment and tool platform provided by Tencent Cloud. It provides developers with high availability, automatic elastic expansion of back-end cloud services, including computing, storage, hosting and other serverless capabilities, which can be used for integrated cloud development of a variety of end-end applications (small programs, Official account, Web application, Flutter client, etc.), which helps developers to build and manage back-end services and cloud resources in a unified way, avoiding tedious server construction, operation and maintenance in the application development process, and allowing developers to focus on the implementation of business logic with lower development threshold and higher efficiency. Open cloud development: https://console.cloud.tencent.com/tcb?tdl_anchor=techsite product documentation: https://cloud.tencent.com/product/tcb?from=12763 technical documentation: https://cloudbase.net?from=10004 technology exchange group, the latest information on WeChat public number “tencent greetings development”