How to create a VuePress website and deploy it to Netlify

Sat Apr 25 2020

VuePress and Netlify make it easy to generate and deploy static sites. Here's how you get your first VuePress site installed and online in just a few minutes.

# Before you start

You will need the usual front-end dev tools installed on your computer - Git, Node and your favourite code editor.

Grab a fresh GitHub repo for your site and clone it on your computer.

# VuePress in 5 steps

Add this to your .gitignore file

/node_modules
**/dist

Create a .vuepress folder with a config.js file and add

module.exports = {
  title: "My First Vuepress Site",
  description: "Welcome to my first VuePress site"
};

Create index.md and add something like

# Homepage

Welcome to my VuePress site

In the terminal run npm init -y and then npm i vuepress -D
Add build and dev scripts to your package.json file

{
    "name": "vuepress-site",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "vuepress build",
        "dev": "vuepress dev"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "vuepress": "latest"
    }
}

You should now have all of these files:

VuePress files

You are all set for a first look at your VuePress site locally. npm run dev launches a live server so that you can see changes in your browser as you develop your site.

All good? Commit and push your changes to GitHub.

# Deploy your site on Netlify

Change the build command to npm run build and publish directory to .vuepress/dist.

Netlify VuePress build settings

Hit "Deploy site"!

After a short wait while Netlify runs your build, your site will deploy your site to a randomly generated url. You can change the name of your site or add your own domain name via 'Domain settings'.

Voilà! Not only is your website deployed, it will magically redeploy with every change to master on GitHub.

To demonstrate the Netlify CI process and make the site feel a bit more real, let's add another page and a menu.

Create a folder called _pages and add about.md with some markdown content like so:

---
title: About me
permalink: '/:slug'
---

# My life story
I was born on a rainy Tuesday in...

The bit between ---'s is known as front matter and its purpose is to add data that is used when VuePress generates your site. In this case, the title is what gets displayed in the browser tab and setting permalink: /:slug means that _pages will be removed from the path in the page url.

Now that you have a new page, you need a way to navigate to it.

Edit your .vuepress/config.js file like so:

module.exports = {
  title: "My First Vuepress Site",
  description: "Welcome to my first VuePress site",
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "About", link: "/about/" }
    ]
  }
};