最近有个开源项目非常火，那就是尤小右开发的 VuePress，VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码，并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePress 针对 Markdown 文件做了一些扩展使其功能更加强大，本文将围绕搭建一个 Github 的静态博客展开。
为项目加入 VuePress
第一步为您的项目安装 VuePress，如果您的项目代码中并没有 package.json文件，请先执行 npm init。
npm install -D vuepress // 或者 yarn add -D vuepress// 在项目根目录下新加 docs 文件夹
mkdir docs
// 新建一个 Markdown 文件
echo "# Hello VuePress!" > docs/README.md
第二步在 package.json 中加入这些脚本，并运行。
// package.json
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}// 本地运行文档
npm run docs:dev
// 编译打包生产静态 HTML 文件
npm run docs:build
VuePress 对 Markdown 做了一些扩展，使得我们可以在 Markdown 文件中使用 YAML 语法，VuePress 使用 —来隔离 Markdown 语法。
---
// 该语法表示使用当前页面标题自动生成侧边栏
sidebar: auto
---VuePress 基础配置
通过 VuePress 配置文件我们可以使用一些自定义的功能，譬如添加侧边栏，添加导航栏等。首先在 docs 目录下新建一个 .vuepress目录，并在该目录下方新建 config.js。
VuePress 默认将文件打包在 .vuepress/dist目录下，我们可以通过 dest属性修改文件输出目录，例如将文件输出在项目根目录下的 dist文件夹中。
通过设置 repo属性，VuePress 会在导航栏中添加一个 Github 仓库的链接。
在 VuePress 中通过设置 title属性来设置网站的标题，它将会被用作所有页面标题的前缀，在默认主题下，它将应用在导航栏上。
在使用 VuePress 编写博客并发布到 Github pages 的时候，我们可能会遇到下图所显示的问题，页面已经有了，但是样式和 js 没有加载成功。我们可以通过配置 base 属性来解决这个问题， base 属性的默认值是 /。假如您准备将代码部署到 taoxusheng.github.io/mt-blog/ , 那么 base属性就应该被设置成 /mt-blog/。注意：base 属性的值总是以 / 开始并以 / 结束。
// dcos/.vuepress/config.js
module.exports = {
title: 'my-blog', // 设置网站标题
dest: './dist'， // 设置输出目录
base: '/mt-blog/'，// 设置站点根路径
repo:
'https://github.com/TaoXuSheng/mt-blog' // 添加 github 链接
