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 VuePress scripts to the package.json file in the root project directory.

{
    ...
    "scripts": {
      "dev": "vuepress dev",
      "build": "vuepress build",
    }
}

A package.json file.

Now, you can run VuePress with the following command:

yarn 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": "vuepress build"
    }
}

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/

Resources

For more information on configuring VuePress, please refer to their documentation.

To configure Now further, please see these additional topics and guides:


How Was This Guide?

Written By
Written by unicodeveloperunicodeveloper
on January 26th 2019