使用 VuePress 搭建个人博客
最近想要自己搭建一个个人主页， 用来记录一些自己学习到的内容，分享做出的东西或者一些想法。之前也在博客园上写过一段时间博客，但是想要把博客园定制成自己想要的样子，并不是很方便。
同时，想要做的并非简单的分享一些技术内容，还想记录一些其他的事情，所以就想到了在 git page 上搭建一个个人主页。
网上看了一下，现成的工具有 hugo、 hexo、 vuepress。看到最后，因为比较了解vue，所以最终选择了 vuepress。
什么是 VuePress
VuePress 是一个由 Vue 驱动的静态网站生成器，支持 Markdown，并且只需要一些简单的配置，就能生成出一个很好看的主页。VuePress 也自带一个默认的主题，VuePress 的官方页面就是这个生成的。上手 VuePress 的第一感觉就是，高效和简洁。
搭建 VuePress 项目
首先，先创建一个项目目录。并初始化项目，添加依赖
mkdir vuepress-starter && cd vuepress-starter
npm init
npm install -D vuepress然后修改一下运行命令：
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}按照官网的指引，可以添加第一篇文档并启动：
mkdir docs && echo '# Hello VuePress' > docs/README.md
npm run docs:dev使用一个 VuePress 的博客主题
上一步，已经搭建了一个静态网站，但是，他还不是一个博客，接下来需要引入一个博客主题，博客主题可以让我们很方便的搭建一个博客。
经过对比，最终我选择了 vuepress-theme-reco 的博客主题。可以参考主题的官网 vuepress-theme-reco，他继承了原来 VuePerss 默认主题的特性，也添加了新的适用于博客配置。
首先引入主题
npm install vuepress-theme-reco --save-dev然后再配置 docs/.vuepress/config.js 下配置使用该主题：
module.exports = {
theme: 'reco'
}配置博客页面
首先配置博客主页，需要在 docs/README.md 中，配置主页内容，由于我比较喜欢简单点的页面，所以，就去掉了繁杂的一些配置。
---
home: true
bgImage: '主页图片地址'
bgImageStyle: {
height: '250px' #主页图片高度
}
heroText: null # 主页图片上的文字
tagline: null
---接下来可以配置 VuePress，这里不仅可以使用 VuePress 默认的配置选项，里面还有博客主题的配置。
module.exports = {
title: '博客标题',
theme: '主题',
themeConfig: {
type: 'blog', // 类型 一般为blog
logo: '左上角logo连接',
author: '全局配置文章作者',
authorAvatar: '主页右侧头像',
nav: [
{ text: '首页', link: '/', icon: 'reco-home' } //导航栏
],
search: true, // 是否搜索文章功能
blogConfig: { // 博客配置
category: {
location: 8, // 在导航栏菜单中所占的位置，默认2
text: '分类' // 默认文案 “分类”
},
tag: {
location: 7, // 在导航栏菜单中所占的位置，默认2
text: '标签' // 默认文案 “分类”
},
socialLinks: [ // 社交账号配置
]
}
}
}然后再在当前目录或者当前目录下新建目录，添加一个 mardown 文件，运行项目，就能看到一个崭新的博客页面了。