前言
作为一个想成为前端工程师的大龄熊孩子，自学前端的日子已经挺久了。
然后自学的时候特想拥有一个自己的个人网站、个人博客之类的。有一天我在用vue + elementUi + koa2 + mongoDB搭建我期待已久的个人博客的时候。突然我想了一件事情，我究竟为什么要为了写个博客去用这么多技术栈呢？
于是乎懒癌发作，于是我找到了这个东西，就是VuePress。
1. VuePress
VuePress是一个极简静态网站生成器，并且包含由Vue来驱动的主题系统和插件API，诞生的初衷是为了Vue团队写文档时能更加愉♂悦（笑）。它的默认主题就是Vue的文档的样式。
它是由Vue、Vue Router和webpack驱动的单页应用，它会根据Docs目录下的md文件来了使用服务器渲染（SSR）生成静态页面，因为约定大于设置所以大部分都不需要设置什么，就像Nuxt一样。
2. 安装
就像平常写项目一样，我们用npm init来生成一个目录,在目录中新建docs文件夹，之后再新建一个README.md文件，在其中随便输入一段内容，比如“# hello vuepress”
npm i vuepress@next -g// 安装1.X版本 虽然还在alpha阶段 但是新增的功能巨好用
npm i vuepress@next -D// 本地也来一个
复制代码下面我们执行命令行vuepress dev docs， 输出如下为止
嗯，跑起来！我们继续
3. 使用以及配置
在docs文件夹下新建.vuepress文件夹并新建config.js文件。然后我们来做点配置（继续抄文档）
给./docs/README.me添加内容 (这个内容一定要放在顶部且在markdown文字内容之前)
---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
(markdown内容)
复制代码给./docs/.vuepress/config.js添加内容
module.exports = {
title: 'Darki',
themeConfig: {
nav: [
{text: 'home', link: '/'},
{text: 'guichu', items:[
{text: '葛平', link: '/geping/'},
{text: '元首', link: '/yuanshou/'}
]},
{text: 'darki', link: 'http://hujiashi.top'}
]
}
}
复制代码接下来我们在./docs/下新建./docs/guichu/geping/index.md和./docs/guichu/yuanshou/index.md，并在里面随便写的点什么之类的。 目录结构如下
接下来我们重启dev，等等，重启前为了方便我们按照官方推荐给 package.json文件添加一下内容
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
复制代码停止服务，重新在命令行输入npm run docs:dev(懒得再package.js里添加命令的朋友也可以用王X牌~泥垢了!!)也可以继续用vuepress dev docs
老铁没毛病~如图所见VuePress会根据md在目录内的位置通过vue-router自动生成路径，但是由于其为静态网站生成器，所以改动markdown文档需要重启服务。
以上内容均抄了官方文档，如有雷同，本来就一样的。
不过照搬文档不是我的本意，毕竟这个是系列的（一），该帮看文档的内容也先基本交代一下。
这个是下期预告。
如何设计自己的VuePress博客