Hexo已经看腻了，来试试VuePress搭建我的博客

VuePress

先简单介绍一下VuePress，这是尤大在2018年4月份发布的一个新轮子。

一个基于 Vue SSR 的静态站生成器，原本的目的是爽爽的写文档，可是我发现用来撸一我的博客也很是不错。

这是VuePress的官方文档 这是VuePress的中文文档

上手搭建

你能够跟着文档上的例子本身玩一玩，不过因为VuePress的文档也是用VuePress来实现的，因此我取巧直接拿VuePress仓库中的docs目录拿来玩耍。

1. 首先安装VuePress到全局

npm install -g vuepress
复制代码

2. 而后把VuePress仓库克隆到你的电脑

git clone git@github.com:docschina/vuepress.git
复制代码

3. 在docs文件中执行（请确保你的 Node.js 版本 >= 8）

cd vuepress
cd docs
vuepress dev
复制代码

当你看到这一行就说明已经成功了：

VuePress dev server listening at http://localhost:8080/
复制代码

下面咱们打开http://localhost:8080/ 发现真的打开了vuepress文档：

下面的工做就是数据的替换了，但咱们应该先看一下docs的目录结构：

├─.vuepress
│  ├─components
│  └─public
│      └─icons
│   └─config.js // 配置文件
├─config // Vuepress文档的配置参考内容
├─default-theme-config // Vuepress文档的默认主题配置内容
├─guide // Vuepress文档的指南内容
└─zh // 中文文档目录
    ├─config
    ├─default-theme-config
    └─guide
└─README.md // 首页配置文件
复制代码

文档分红了两部分，中文文档在/zh/目录下，英文文档在根目录下。

其实目录里面的东西都挺好看懂的，首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容，从中文文档里也能够看到只有这三个目录被替换了。

首页配置

默认主题提供了一个主页布局，要使用它，须要在你的根目录 README.md 的 YAML front matter 中指定 home：true，并加上一些其余的元数据。

咱们先看看根目录下的README,md：

home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started →  // 按钮的文字
actionLink: /guide/ // 按钮跳转的目录
features: // 首页三个特性
- title: Simplicity First
  details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You // 页尾
复制代码

实在看不懂，官网有比我更详细的配置说明。

导航配置

导航配置文件在.vuepress/config.js中

在导航配置文件中nav是控制导航栏连接的，你能够把它改为本身的博客目录。

nav: [
    {
        text: 'Guide',
        link: '/guide/',
    },
    {
        text: 'Config Reference',
        link: '/config/'
    },
    {
        text: 'Default Theme Config',
        link: '/default-theme-config/'
    }
]
复制代码

剩下的默认主题配置官方文档都有很详细的文档说明这里就不在啰嗦了。

更改默认主题色

你能够在.vuepress/目录下建立一个override.styl文件。 vuepress提供四个可更改的颜色：

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色
复制代码

我把它改为了这样：

侧边栏的实现

因为评论区里问的人较多，因此在这里更新一下，其实我就算在这里写的再详细也不如你们去看官方文档。 侧边栏的配置也在.vuepress/config.js中：

sidebar: [
  {
    title: 'JavaScript', // 侧边栏名称
    collapsable: true, // 可折叠
    children: [
      '/blog/JavaScript/学会了ES6，就不会写出那样的代码', // 你的md文件地址
    ]
  },
  {
    title: 'CSS', 
    collapsable: true,
    children: [
      '/blog/CSS/搞懂Z-index的全部细节',
    ]
  },
  {
    title: 'HTTP',
    collapsable: true,
    children: [
      '/blog/HTTP/认识HTTP-Cookie和Session篇',
    ]
  },
]
复制代码

对应的文档结构：

├─blog // docs目录下新建一个博客目录
│  ├─CSS
│  ├─HTTP
│  └─JavaScript
复制代码

个人博客：brownhu

部署

在配置好你博客以后，命令行执行：

Vuepress build
复制代码

当你看到这一行就说明成功了：

Success! Generated static files in vuepress.
复制代码

将打包好的vuepress目录上传到你的github仓库，和github page配合，就能够配置好你的博客网站了。