Introduction#
Perhaps you are tired of typing yarn docs:build in the terminal every day when using VuePress for documentation.
You want to use CI but struggle with configuring it.
Here, I will 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 more words, here is the registration link. It is recommended to log in with your GitHub account using OAuth.
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 PCL Survival Server.
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 prepend the name of that folder).
You can leave the rest blank, as shown in the following image (please do not copy it directly).
Click the "Deploy" button and wait for the deployment.
If fireworks appear on the page, it means your documentation has been successfully deployed.
Configure the Project#
Open the project, click "Settings", and navigate to Git. 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:
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!