Getting Started

Prerequisites

• Node.js v12+
• Yarn v1 classic (Optional)

TIP

• With pnpm, you need to set shamefully-hoist=true in your .npmrc file.
• With yarn 2, you need to set nodeLinker: 'node-modules' in your .yarnrc.yml file.

Manual Installation

This section will help you build a basic VuePress documentation site from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 3.

• Step 1: Create and change into a new directory

mkdir vuepress-starter
cd vuepress-starter

• Step 2: Initialize your project

git init
yarn init

git init
npm init

• Step 3: Install VuePress locally

yarn add -D vuepress@next

npm install -D vuepress@next

• Step 4: Install VuePress Theme Star

yarn add -D vuepress-theme-star

npm install -D vuepress-theme-star

• Step 5: Config Theme

Create docs/.vuepress/config.js or docs/.vuepress/config.ts

module.exports = {
  theme: '@starzkg/star',
}

• Step 6: Add some scripts to package.json

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

• Step 7: Add the default temp and cache directory to .gitignore file

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

• Step 8: Create your first document

mkdir docs
echo '# Hello VuePress' > docs/README.md

• Step 9: Serve the documentation site in the local server

yarn docs:dev

npm run docs:dev

VuePress will start a hot-reloading development server at http://localhost:8080. When you modify your markdown files, the content in the browser will be auto updated.

By now, you should have a basic but functional VuePress documentation site. Next, learn about the basics of configuration in VuePress.