丢掉烂大街的Hexo吧，用Vuepress搭建专属你的博客吧

一、先来聊聊搭建博客

1.1. 什么人喜欢折腾博客

通常如果不是爱折腾或者有特别需求的普通人，一般对于搭建博客的需求其实不大，通常主要一下几类人会搭建博客自己玩玩。

程序员 (喜欢写一些技术博客，分享一些问题)
设计工作者 (需要一个平台暂时自己，通常的网站满足不了他们)
技术爱好者 (不一定是干IT的，但是希望搞一个博客交流的)
文艺青年 (喜欢写写文章分享给大家的)
极客 (喜欢追求极致，喜欢做一些酷炫吊炸天的网站的异类)

对于上述几类人群，我们再细分一下，他们能够搭建博客的方式。

博客平台 (CSDN、博客园、Farbox之类的一站式平台，写好文章网上丢就可以了)
纯自己码 (需要超强的技术壁垒)
搭建博客的工具 (下面会进行详细说明，目前也是最主流的方式)
- WordPress
- Hexo
- Hugo
- Vuepress (本文主要说的)
- jekyll

1.2. 简单对比一下几个吧！(不废话，直接说缺点)

WordPress：第一个是麻烦，学习成本高，第二个必须要搞一个自己域名主机，操作很麻烦，新手门槛高。
Hexo：好，好，好，轻量、简单、实用、方便 —————but 烂大街了，现在随便百度还是谷歌搜一下都是Hexo搭建博客，NexT主题也被用烂大街了，导致搭一个博客一点新意都没，没有那种成就感。(当然你自己能另写主题就算了)
Hugo：小众文档少优化少主题少坑多
jekyll：跟Hugo也差不多
Vuepress：哈哈哈，比Hugo/jekyll 文档还少，主题更少 (惊不惊喜，意不意外) ，教程也少，要不然都是重复的。--------but 真心好看，是尤雨溪大神的力作，优化更不要说了，整体风格极简却又非常适合文档阅读，而且流畅，最重要，使用的人少，个性化定制多，只要你会点vue，你的博客只属于你。

1.3. 废话不多说，直接看效果

预览效果：https://domyselfzy.github.io/

首页

文章

时间线

关于我

二、正菜开始

2.1 直接开干

vuepress官网：https://vuepress.vuejs.org/zh/

如果想搭建一个简单的vuepress博客，很简单。

项目安装

不推荐全局安装方式，因为一个新手很难把握文件层级

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

目录如下：

package.json配置

需要在刚刚生成的文件夹下，找到package.json，在里面添加以下内容（如果没有自己新增）
```
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
```
运行命令
```
yarn docs:dev # 或者：npm run docs:dev
```
在浏览器地址上输入：http://localhost:8080/

于是你就看到以下这个页面了

构建和生成静态页面

yarn docs:build # 或者：npm run docs:build

至此，一个简单基于vuepress的博客就诞生了！是不是如此简单。

2.2 基于vuepress主题的搭建

肯定很多人看完第一眼感觉，靠，这么low，也好意思拿出来，就是一个白页嘛~

对，你说的都对，就是这么个白页，但是正是因为这个白页才体现它的强大。

why？？？

因为我们之后写博客基本都是基于markdown编写，所以我们之后vuepress的页面大部分情况都可以通过markdown进行布局。当然如果你是vue的高手，你也可以自己使用vue编写layout布局。

2.2.1 vuepress-theme-reco

这个主题应该是现存vuepress最好的一个主题之一，是博主午后南杂制作的一个超赞主题。

主题地址：https://vuepress-theme-reco.recoluan.com/

2.2.2 动手干

之前我们是以项目安装的方式进行构建

现在不需要了，直接安装主题就完了。（废弃之前的文件夹，重新指定一个新文件夹位置my-blog，可以所以指定）

# create
npx vuepress-theme-reco-cli init my-blog
# or
npm install  -g
reco-cli init my-blog

# install
cd my-blog
npm install

# run
npm run dev

# build
npm run build

安装的时候选择1.0版本