Creating and Deploying a VuePress App with ZEIT Now

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 ZEIT Now.

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 on Now 2.0!

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 ZEIT Now.',
  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: Deploy VuePress with Now

With your project set up, you are ready to deploy your VuePress app with Now.

If you have not yet installed Now, you can do so by installing Now CLI.

You can deploy your VuePress app with a single command:

now

Deploying the app with the now command.

When your app is deployed, you will receive a deployment URL like the following: https://vuepress-nv3m85eee.now.sh/

If you want to deploy your VuePress project when you push to a Git repository, you can use either Now for GitHub or Now for GitLab to have your project automatically deployed on every push, and aliased on push to master.