Deploy VuePress v1 documentation to Vercel

Introduction#

You may have become tired of typing yarn docs:build in the terminal every day when using VuePress for documentation.

If you want to use CI but are struggling with configuration, I'm here to share with you how to deploy VuePress documentation to Vercel.

This article is only applicable to VuePress v1 documentation. For v2 documentation, please explore it on your own.

Steps#

Register on Vercel#

No need to say much, here is the registration link. It is recommended to use your GitHub account for OAuth login.

Create a Project#

After entering the Dashboard, click "New Project" in the upper right corner to create a new project.

Choose the repository where you store your documentation and click "Import". Here, I will demonstrate using the documentation of the PCL Survival Server.

Import Repository

If you want to deploy from an organization account, you need to create a team account first.

Please make sure to select Vue.js for FRAMEWORK PRESET.

Next, we go to the BUILD AND OUTPUT SETTINGS page, turn on the second switch, and enter .vuepress/dist in the adjacent text box (if your documentation is stored in a subdirectory like the docs folder, you need to add the name of this folder in front).

You can leave the rest blank, as shown in the following image (please do not copy it directly).

Configuration

Click the "Deploy" button and wait for the deployment.

If fireworks appear on the page, it means that your documentation has been successfully deployed.

Configure the Project#

Open the project, click "Settings", navigate to Git, and set the "Production Branch" to the branch where your documentation workspace is located.

Please note that the directory structure of the documentation workspace generally looks like this:

Documentation Directory Structure

Once set, click "Save" and then make a commit to the repository. The changes will be automatically deployed to the production environment.

With this, we have completed everything we need to do!