Creating and Deploying a VuePress App with Vercel
Create your VuePress app and deploy it with Vercel.
VuePress is a vue-powered static generator. It is used for generating static sites with a focus on writing.
This guide will cover how to create and deploy a VuePress app to Vercel.
Already have a VuePress project? Skip to deploying!
Step 1: Getting Started with VuePress
The first step is to create a project and cd
into it via your terminal.
mkdir vuepress-project && cd vuepress-project
Creating and entering into the vuepress-project
directory.
Next, initialize the project and install VuePress as a local development dependency. Use the following command:
npm init -y && npm i -D vuepress
Initializing the project and installing VuePress as a development dependency.
Once the dependencies are installed, create a README.md
with the following contents:
# Hello From Vuepress!
Next, create a guide
directory within the project and add a README.md
file with the following code:
# Guides This page lists and describes your project with guides!
Step 2: Configure and Run VuePress
We have created a few documentation files. Now, we are ready to configure VuePress.
With a few documentation pages created, you now need to configure VuePress.
Create a .vuepress
folder inside the project directory with a config.js
file and insert the following code:
module.exports = { title: 'My VuePress Project', description: `A simple VuePress project deployed with ${PRODUCT_NAME}.`, themeConfig: { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guides/' }, ], }, dest: 'public', }
A config.js
configuration file.
Next, add both a development and build script to the package.json
file in the root project directory.
{ ... "scripts": { "dev": "vuepress dev", "build": "vuepress build" } }
Adding development and build scripts to the package.json
file.
Step 3: Deploying Your VuePress Project with Vercel
To deploy your VuePress app with a Vercel for Git, make sure it has been pushed to a Git repository.
Import the project into Vercel using your Git of choice:
After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.
Once deployed, you will get a URL to see your app live, such as the following: https://vuepress.now-examples.now.sh