VuePress is a well-received documentation plug-in in the community, and many projects have started to use VuePress to build team documents and product official websites. Now you can also host your VuePress documents on cloud development. There is no need to put up with the poor performance and slow speed caused by the fluctuation between Chinese and American networks. Let’s Go

CloudBase is a product solution of cloud integration. It adopts serverless architecture, eliminates operation and maintenance transactions such as environment construction, supports one cloud and multiple terminals, and helps to quickly build small programs, Web applications and mobile applications.

Cloud development static website hosting support through the cloud development SDK call server resources such as: cloud function, cloud storage, cloud database, so as to expand the static website to the full stack website

Whether Tencent cloud · cloud development users, or small program · cloud development users, as long as the payment by volume, you can enjoy cloud development static website hosting services.

System is dependent on

Before proceeding, make sure you have the Node.js runtime environment installed on your computer. If not, visit nodejs.org to download the installation.

Install the cloud development CLI tool and VuePresss

Run the following command to install the CLOUD development CLI tool and VuePress

npm i -g @cloudbase/cli vuepress
Copy the code

Initialize a VuePress project locally

First, create a directory locally, using TCB as an example

mkdir tcb && cd tcb
Copy the code

Once in the TCB directory, create a default Hello World file

echo "# Hello TCB & Vuepress" > README.md
Copy the code

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

vuepress dev
Copy the code

Wait for it to compile, open your browser and go to localhost:8080

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

This means that we have completed the initialization of the project.

Create a cloud development environment

With Vuepress built locally, let’s create a cloud development environment to deploy Vuepress SS. Open Tencent cloud console and find cloud development in the product

Go to the cloud development management console and click New Environment to create a new environment for deployment

Create a new environment called Docs and select charge by volume to open the environment

Once you’ve opened your environment, remember your environment ID, which we’ll use later.

After creating an environment, click Environment to enter the environment management page. Click “Static Sites” on the left menu bar

And in the static website page open function

When you see an interface like this, it means that it has been opened.

You can now manually upload a file to test by uploading a file. Later, we will use the cloud development Cli to do this.

Initialize the cloud development Cli

After completing the configuration of the cloud development environment, we need to initialize the CLOUD development CLI, so as to realize the page uploading through CLI (of course, you can also upload directly through the web, but if VuePress has many document pages, it is easier to upload using CLI).

Enter the following code on the command line

tcb login
Copy the code

Will remind you that you need to authorize the page

Confirm authorization on the page that is displayed

After authorization is confirmed, you will see the console output the corresponding command

The deployment of

This way, your cloud development CLI is initialized. Next, it’s time to upload and deploy VuePress.

Deploy VuePress

Next, let’s build and deploy VuePress.

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

vuepress build
Copy the code

When the build is complete, you will be reminded that the generated static file is in.vuepress/dist

Next we just need to upload the contents of the.vuepress/dist folder to the cloud development static web hosting.

Run the following command to go to the dist folder

cd .vuepress/dist
Copy the code

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

tcb hosting:deploy ./ -e EnvID
Copy the code

Just a moment, the file will be uploaded

At this point, you can also see these files in the Cloud Development Management Console, indicating that the upload was successful.

access

Click Settings to enter the Settings page, you can find the default domain name, click the domain name, you can see the environment you just deployed.

For example, my deployment looks like this

One More Thing

With just a few simple steps, you can deploy VuePress to cloud development without the Github Pages lag. Now you can also 0 yuan migration oh!

Depending on the payment model, cloud development offers free resources in the following ways:

Annual and monthly billing: free version package;

Charging by volume: providing free resources on a logical monthly basis;

Not only that, but if you are an automation enthusiast, you can also try to implement the cloud development Cli configuration into your CI environment for automatic deployment

About Cloud Development

CloudBase is a product solution of cloud integration. It adopts serverless architecture, eliminates operation and maintenance transactions such as environment construction, supports one cloud and multiple terminals, and helps to quickly build small programs, Web applications and mobile applications.

Cloud development official account: Tencent Yunyun Development

Cloud development technical document: Cloudbase.net

Cloud development technology exchange plus Q group: 601134960