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