This article is brought by Jacob, the front-end engineer of Shell Zhaofang. This article introduces how to use cloud to develop CloudBase and how to quickly build personal sites without server and domain name. Let’s learn

preface

Recently, I was reviewing the basics of JavaScript. I had just finished reading JavaScript Advanced Programming (4th Edition) and was looking for some good code libraries to reinforce what I had learned. Naturally, Lodash came to me.

This library in the author’s company utilization rate is very high, so I want to study the source code and output a series of analysis articles. And most of the online source code analysis is mostly their own document site, so to the topic of this article, quickly build a document site.

In fact, I have a server, but the bandwidth of the server is limited, plus I have to configure NGINX, GitHub Action and HTTPS certificate.

If you don’t have a domain name, you can automatically assign a domain name. You can also easily apply for and configure HTTPS certificates. If you use GitHub Action, it can be said that you do not need to consider the server maintenance content.

Let’s talk about how to set up and deploy.

Setup and Deployment

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

Project initialization

1. Install the CLI

npm install -g @cloudbase/cli@latest
Copy the code

2. Initialize an application

tcb new cloudbase-test vuepress
Copy the code

To use the CLI, you need to log in. If the CLI detects that you are not logged in, the browser will automatically open and jump to the Tencent cloud login page. After successful login, return to the CLI and proceed to the next step:

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

Next, the associated environment will be selected. If you do not have an environment, you can directly select “Create new Environment”. The CLI will automatically open the browser and jump to the “Create New Environment” page.

Click next after selecting:

When you return to the command line, you will see that you are initializing the environment. After a few minutes, you can create the project directly. A project with the following directory structure will be generated upon successful creation:

├── ├─ Guides │ ├─ ├─ Download.pdfCopy the code

Project deployment

1. Install dependencies

npm i
Copy the code

2. Build and deploy

npm run deploy
Copy the code

3. The deployment is successful

Run the NPM run deploy command. After a short while, the command line returns a domain name. 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, there is no need to configure NGINX and other complicated operations, this is the charm of cloud services, at the same time, the service charge by the volume, for the author can be said to be very low cost.

However, that alone is not enough. We need to configure GitHub Actions so that we can fully automate the deployment and focus our daily work on documentation.

Making the Action configuration

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

How should we configure it? The answer is very simple: use GitHub Secret. You need to create a new key in Tencent Cloud Console. After creating a new key, open your GitHub repository and set the following Settings:

Create secret ENVID, SECRETID, and SECRETKEY. ENVID is visible in the application list. After the configuration, the following information is displayed:

Next create the deploy.yml file under the.github/workflows directory of the 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: ${{ secrets.SECRETID }} secretKey: ${{ secrets.SECRETKEY }} envId: ${{ secrets.ENVID }}Copy the code

Then push your project code to GitHub for automated deployment, and you can focus on documentation instead of server maintenance.

conclusion

Cloud services like CloudBase can really facilitate a lot, you can directly deploy their own static blogs or documents and other sites, one-click deployment, without operation and maintenance, is not beautiful.

Lodash. LCS. Show: Lodash.

The GitHub address is github.com/jacob-lcs/l… Of course, it is still in the early stages. If you are interested, please pay attention.

Product introduction

Cloud Development (TCB) is a cloud native integrated development environment and tool platform provided by Tencent Cloud. It provides developers with highly available, automatic and flexible expansion of back-end cloud services, including computing, storage, hosting and other serverless capabilities, which can be used for cloud integrated development of various end applications (small programs, Public account, Web application, Flutter client, etc.) to help developers build and manage back-end services and cloud resources in a unified manner, avoiding tedious server construction, operation and maintenance during application development. Developers can focus on the implementation of business logic, with lower development threshold and higher efficiency.

Open cloud development: console.cloud.tencent.com/tcb?tdl_anc…

The product documentation: cloud.tencent.com/product/tcb…

Technical documentation: Cloudbase.net? From =10004

Technical exchange group, latest information follow wechat public account [Tencent Yunyun Development]