Cloud development VuePress document deployment

VuePress is a well-regarded document plug-in in the community, and many projects are starting to use VuePress to build the team's document and product network. N ow you can also host your VuePress documents on cloud development! N o longer have to endure the network performance between China and the United States network fluctuations caused by poor performance and slow speed problems! Let's Go

CloudBase is a cloud-based, all-in-one product solution that uses serverless architecture, environment-free construction, and other operations, supporting one cloud and many ends, helping to quickly build small programs, web applications, and mobile applications.

Cloud development static site hosting supports the use of cloud development SDK to invoke service-side resources such as cloud functions, cloud storage, cloud databases, etc., thereby expanding static sites to full stack sites

Whether it is Tencent cloud development users, or small program cloud development users, as long as the opening of pay-per-view, you can enjoy cloud development static website hosting services.

System dependency

Before you go on, make sure you have Node installed in your PC .js the environment. If it is not installed, you can nodejs.org download the installation.

Install cloud development cli tools and VuePresss

Follow these commands to install the Cloud Development cli tool and VuePress

npm i -g @cloudbase/cli vuepress

Initialize a VuePress project locally

First, create a directory locally, in this case tcb

mkdir tcb && cd tcb

Once in the tcb directory, create a default hello world file

echo "# Hello TCB & Vuepress" > README.md

Then, execute the command, start, and see the effect.

vuepress dev

Wait for it to compile, open the browser, and visit localhost:8080

You can see the page generated by the document you just created

In this way, we have completed the initialization of the project.

Create a cloud development environment

After completing the on-premises Vuepress build, let's create a cloud development environment to deploy VuePresss. Open the Tencent Cloud Console and find cloud development in the product

Go to the cloud development management console, click New Environment, Create New Environment for deployment

Create a new environment, called docs, and choose to bill by volume to open the environment

After you open your environment, remember your environment ID, which we'll use later.

Once the creation is complete, click on the environment and go to the environment management page. Click on the "static site" in the menu bar on the left

And in the static website page opening function

When you see an interface like this, it's already open.

You can now manually upload a file test by uploading a file, and later we'll use cloud development Cli to complete the upload.

Initialize the cloud development Cli

Once we've configured our cloud development environment, we need to initialize the cloud development cli so that we can upload pages with cli (of course, you can upload directly from the web side, but VuePress is easier to upload with Cli if you have more document pages)

Enter the following code on the command line

tcb login

will remind you that you need to authorize on the web page

Confirm authorization on the pop-up page

After confirming the authorization, you will see the console output the appropriate command

That way, your cloud development cli is initialized. Next, you're ready to go to the last step and upload and deploy VuePress.

Deploy VuePress

Next, let's build and deploy VuePress.

Go back to the directory of VuePress we just created and execute the command to build a static page

vuepress build

When the build is complete, you'll be reminded that the static files generated are at .vuepress/dist

cd .vuepress/dist

Then execute the command to upload the file and remember to replace the EnvID here with the environment ID of your own environment.

tcb hosting:deploy ./ -e EnvID

Wait a moment and the file will be uploaded

At this point, you can also see these files in the cloud development management console, indicating a successful upload.

Access

Click settings, go to the settings page, you can find the default domain name, click on the domain name, you can see the environment you just deployed.

For example, this is what happened after my deployment

One More Thing

Deploy VuePress to cloud development in just a few simple steps, eliminating the need to endure the speed of Github Pages! Not moving fast yet?

Not only that, but if you're an automation enthusiast, try configuring the Cloud Development Cli into your CI environment for automatic deployment