0. 关于Vuepress
其实Vuepress不仅限于搭建个人博客，还可以是个人网站以及任何静态网页。当然Vuepress的好处还是在于它是基于Markdown的，对于使用Markdown写作的用户来说非常方便。
Vuepress v1版本基于Vue 2，而VuePress v2基于Vue 3，且支持TypeScript。
考虑到目前v1版本的主题和插件比较丰富，因此本博客是基于Vuepress v1的。之后将会写基于v2版本的开发指导。
1. 创建Vuepress项目
1.1 基于主题创建项目
基于已有的主题创建项目是构建博客最快的一种方式，所以优先介绍这种方式。
市面上有一些做的比较漂亮的Vuepress主题，可以利用现有的这些主题快速搭建博客。然后只需要进行一些个性化的设置以及上传自己的md格式的内容即可。下面介绍几个我认为做的比较优秀的主题。
官方默认主题
默认主题的样式请参考官方文档。
Demo：https://vuepress.vuejs.org/zh/
安装
貌似使用yarn比使用npm更快，所以先安装yarn
npm install -g yarn
官方提供了快速构建的脚手架，一键安装。
在一个空目录下直接安装并运行：
yarn create vuepress-site
cd docs
yarn install
yarn run dev
官方Blog主题
这是Vuepress官方出的一款博客主题，有自适应的功能。
Demo：https://billyyyyy3320.com/
Github：https://github.com/vuepress/vuepress-theme-blog
使用脚手架安装Blog主题（更推荐）
使用官方提供的脚手架能一键安装。
create命令已经废弃了，由create vuepress-site替代。但是create vuepress-site不提供Blog主题的安装，只有文档主题。所以这里还是用create。
在空目录下：
# 遇到 Select the boilerplate type 选择blog
yarn create vuepress my-blog #my-blog是项目名
由于可能不是最新的Blog主题，所以最好再手动安装一下：
yarn add @vuepress/theme-blog -D
最后运行即可：
yarn run dev
基于已有项目引入Blog主题
首先从零开始创建一个Vuepress项目（或者基于官方主题构建，然后把不必要的文件删掉）：
yarn init
yarn add -D vuepress
mkdir docs && echo '# Hello VuePress' > docs/README.md
在package.json中添加脚本：
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
在根目录下安装主题：
yarn add @vuepress/theme-blog -D
配置config.js：
// .vuepress/config.js
module.exports = {
theme: '@vuepress/blog',
themeConfig: {
// 请参考文档来查看所有可用的选项。
}
}
然后运行即可：
yarn run dev
该主题的推荐目录结构如下：
├── blog（即为这里的docs）
│ ├── _posts
│ │ ├── 2018-11-7-frontmatter-in-vuepress.md #example
│ │ ├── 2019-2-26-markdown-slot.md #example
│ │ └── 2019-5-6-writing-a-vuepress-theme.md #example
│ └── .vuepress
│ ├── `components` _(**Optional**)_
│ ├── `public` _(**Optional**)_
│ ├── `styles` _(**Optional**)_
│ │ ├── index.styl
│ │ └── palette.styl
│ ├── config.js
│ └── `enhanceApp.js` _(**Optional**)_
└── package.json
所以只需在docs下新建目录_posts，然后把md文件放进去即可。
md文件的格式：
---
title: Hello World
date: 2020-01-11
author: Billyyyyy3320
location: Taipei
tags:
- JavaScript
- Vue
---
> This is official blog theme.
My content.
如果没有进一步自定义样式的需求，就可以基于此主题开始写作了，毕竟内容才是整个网站的灵魂。
reco主题
Demo：https://vuepress-theme-reco.recoluan.com/
Github：https://github.com/vuepress-reco/vuepress-theme-reco
实现了自适应，深色模式，有多个插件可用。
使用主题脚手架安装（更推荐）
该主题提供了脚手架，可以一键安装：
yarn global add @vuepress-reco/theme-cli
#在空项目目录下
theme-cli init
yarn install
基于默认主题安装reco
由于reco主题几乎继承 VuePress 默认主题的一切功能。
所以可以从零开始或基于默认主题构建Vuepress项目，再引入reco主题。
yarn add vuepress-theme-reco
// .vuepress/config.js
module.exports = {
theme: 'reco'
}
当然，安装后运行项目肯定不会和使用脚手架安装的效果一样，需要手动配置config.js。
如果嫌麻烦，还是用主题脚手架安装吧。
1.2 自定义主题
如果不想基于任何第三方主题，那么可以考虑自定义主题。也可以将自定义的主题发布出去，让更多人使用自己的主题。
首先，为了简单起见，使用脚手架构建一个项目：
在空目录下：
# 遇到 Select the boilerplate type 选择blog或docs都行
yarn create vuepress my-blog #my-blog是项目名
按如下结构构建目录，删除不需要的文件：
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (必要的)
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
其中theme目录：
theme
├── global-components
│ └── xxx.vue
├── components
│ └── xxx.vue
├── layouts
│ ├── Layout.vue (必要的)
│ └── 404.vue
├── styles
│ ├── index.styl
│ └── palette.styl
├── templates
│ ├── dev.html
│ └── ssr.html
├── index.js
├── enhanceApp.js
└── package.json
如果从零开始构建自定义主题显然效率太低。可以将一些开源的主题直接拿来为我所用，在此基础之上进行再创造。
比如，直接可以将官方Blog主题的源码拷下来放在theme目录下：https://github.com/vuepress/vuepress-theme-blog