基于VuePress的博客搭建指南

其实关于如何利用VuePress搭建博客的相关内容在官方文档已经介绍得比较充分了，我相信大部分问题都可以在其中找到答案，但即便如此，我觉得还是有必要对自己探索和使用VuePress的过程做一个回顾和总结，梳理一下思路，记录遇到的问题，此外如果能够为遇到类似问题的人提供一些解决问题的思路那再好不过了。

基本配置

按照官方的快速上手步骤创建好项目之后，需要做的就是配置，正如VuePress对自己的定义所说：Vue 驱动的静态网站生成器，对，它就是一个生成器，不需要我们做开发工作，只需往里面放入必须的原料-文章，以及做一些配置工作，它就可以生成我们所需要的博客站点。配置分为全局配置和针对每个单独页面的页面配置，一般将默认配置放入全局配置，针对单独页面的特殊配置放入页面配置。

全局配置

全局配置写在docs>.vuepress>config.js文件中，全局配置涉及到的内容很多，除了基本配置之外，还包含主题配置：themeConfig、插件配置：plugins，md配置：Markdown，构建流程配置：configureWebpack等。可以参照官方文档中的词条一个个去看它们的作用，其中默认主题配置根据项目使用的主题可能会有不同的配置内容，如果直接使用默认主题的话则可以根据主题说明文档下的默认主题配置说明来进行配置。

修改config文件之后需要重启dev-server配置才能生效

页面配置

官方文档中没有提到页面配置这个概念，但其实页面配置就写在每篇markdown文件的Front Matter之中，在其中我们可以设置一些参数的值，或者创建自定义变量（这在之后开发主题中会用到）

一个简单的Front Matter例子：

---
title: 基于vuePress的博客搭建指南
lang: zh-CN
description: 一篇使用VuePress搭建个人博客的不完全指南
date: 2021-1-20
---

每个冒号后必须接一个空格，否则页面会报错

在Front Matter中默认主题的预定义变量有：

• navbar 是否开启导航栏
• sidebar 是否开启侧边栏
• prev 上一篇文章链接
• next 下一篇文章链接
• search 是否开启搜索栏
• tags 添加标签，为搜索功能建立索引

使用博客主题

如果你想搭建一个美观的个人博客，使用以上配置恐怕不能满足你的需求，因为它的默认主题是为了技术文档而设计的。为了更好的使用体验，可以使用官方的博客主题

安装

yarn add vuepress @vuepress/theme-blog -D

注意使用博客主题的默认目录结构与vuepress初始的目录结构有所不同，如果目录不正确的话运行会报错，第一次使用的人可能会不知道是什么原因

vuepress/theme-blog推荐目录结构