Creating and Deploying a VuePress project with Now

How to deploy your VuePress application to 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 application 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

Next, install VuePress as a local dev dependency. Use the following command:

yarn add --dev vuepress

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/' }]
  }
}

A config.js configuration file.

Next, add some development scripts to the package.json file in the root project directory.

{
    ...
    "scripts": {
      "dev": "vuepress dev",
      "now-dev": "vuepress dev docs --port=$PORT"
    }
}

Adding scripts to a package.json file.

The @now/static-build Builder supports a custom now-dev script that allows you to define custom development behavior while gaining extra features that mimic the Now platform locally.

Now, you can run VuePress by replicating the Now environment locally with a single command:

now dev

Step 3: Deploy VuePress with Now

First, we need to create a now.json configuration file to instruct Now on how to build the project.

Add the following code to the now.json file:

{
  "version": 2,
  "name": "vuepress",
  "builds": [
    { "src": "package.json", "use": "@now/static-build", "config": { "distDir": ".vuepress/dist" } }
  ]
}

A now.json configuration file that builds a VuePress project.

The version property specifies the Now 2.0 platform version.
The builds property allows Now to use a Builder with a specific source target. We used the @now/static-build to build and deploy a static project. This module takes a Node.js package.json file, installs its listed dependencies, executes a configured now-build script, and exposes the resulting dist directory as the build output for serving.

The distDir option in the build step instructs Now to identify .vuepress/dist as the static folder and build output directory.

Next, we need to add a script in the package.json file that specifies the command Now will run to "build" the application in the cloud.

{
    "scripts": {
        ...
        "build": "vuepress build",
        "now-build": "npm run build && mv docs/.vuepress/dist dist"
    }
}

A sample of a package.json file with scripts for VuePress and a now-build script to instruct Now how to build the application.

Finally, deploy the app with the Now CLI.

now

Otherwise, if you want your application to deploy automatically, you can install the Now for GitHub app and have updates for your GitHub repository deploy and alias on every push.

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