Creating and Deploying a VuePress App with ZEIT Now

Create your VuePress app and deploy it 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 ZEIT 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: Deploying Your VuePress Project with ZEIT Now

There are two ways to deploy with ZEIT Now. We recommend using a ZEIT Now for Git Integration for ease-of-use. Alternatively, Now 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


To deploy your VuePress app with a ZEIT Now for Git Integration, make sure it has been pushed to a Git repository.

Import the project into ZEIT Now using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the default branch (commonly "master") will result in a Production Deployment.



Written By
Written by unicodeveloperunicodeveloper