Creating and Deploying a VuePress App 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

There are two ways to deploy with Vercel. We recommend using a Vercel for Git Integration for ease-of-use. Alternatively, Vercel CLI can be used to generate a manual Preview Deployment.

Once deployed, you will get a URL to see your app live, such as the following: https://vuepress.now-examples.now.sh