# VuePress Setup

# Installation

Vuepress requires Node.js >= 8 and package manage npm. To check the node and npm version installed, run the following in terminal:

node -v && npm -v

Create a new project folder and change into directory:

mkdir macada-vuepress && cd $_

Create new package.json and initialize Git:

npm init && git init

Install VuePress locally with:

npm install -D vuepress

Add the following script into package.json to run development server npm run dev or generate static assets npm run build:

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

# Creating Markdown pages

Create markdown file READEME.md in the root folder, which will compile into index.html.

# Title
Some Content
- A List
-[Link Text](link file)
-[Example File](example.md)

VuePress Link can be created [Link Text](link file route)

Markdown files will compile to html files. For example:

/READEME.md → / (/index.html)
/doc/README.md → /doc/ (index.html)
/doc/post1.md → /doc/post1.html

# Directory Structure

A VuePress recommended document structure should look like this:

.
├── macada-vuepress
│   ├── .vuepress (Optional)
│   │   ├── components (Optional)
│   │   ├── theme (Optional)
│   │   │   └── Layout.vue
│   │   ├── public (Optional)
│   │   ├── styles (Optional)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (Optional, Danger Zone)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (Optional)
│   │   └── enhanceApp.js (Optional)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

# Configuration

Create .vuepress directory in the project root folder and add a config.js file in there.
Add the following in the .vuepress/config.js file to export JavaScript object:

module.exports = {
    title: 'Macada Docs',
    description: 'Macada Vuepress',
    dest: "dist",
    themeConfig: {
        navbar: [
            { text: 'Tutorials', link: '/tutorials/' },
            { text: 'Reference', link: '/reference/'},
        ],
    }
}

title: Title of the site. Prefix of all page titles. Displayed in default nav bar.
description: Description of the site. Render as a tag in html
dest: Output directory of vuepress build or npm run build
navbar links to 'Tutorials' and 'Reference'

# Deploy

All docs in docs directory
Use default build directory .vuepress/dist
Following script in package.json:

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

# Netlify

Git push to remote server

    git init
    git remote add origin https://gitlab.com/jycm/simple.git
    git add .
    git commit -m "Initial commit"
    git push -u origin master

In netlify setup a new project from Github/Gitlab using following settings:
- Build Command: npm run docs:build
- Publish directory: docs/.vuepress/dist