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 aconfig.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 thennpm i vuepress -D
- Add
build
anddev
scripts to yourpackage.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:
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
Login to Netlify and follow the steps to create a new site from your GitHub repo.
Change the build command to npm run build
and publish directory to .vuepress/dist
.
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.
# Adding pages and navigation
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/" }
]
}
};
Netlify will immediately notice when these changes reach your master branch on GitHub. As soon as it's done building, your site will be updated.