Hexo已经看腻了，来试试VuePress搭建个人博客

Posted 2023-03-23

参考技术A

先简单介绍一下VuePress，这是尤大在2018年4月份发布的一个新轮子。

一个基于 Vue SSR 的静态站生成器，本来的目的是爽爽的写文档，但是我发现用来撸一个人博客也非常不错。

这是VuePress的官方文档
这是VuePress的中文文档

你可以跟着文档上的例子自己玩一玩，不过由于VuePress的文档也是用VuePress来实现的，所以我取巧直接拿 VuePress仓库 中的 docs 目录拿来玩耍。

当你看到这一行就说明已经成功了：

下面我们打开 http://localhost:8080/
发现真的打开了vuepress文档：

下面的工作就是数据的替换了，但我们应该先看一下docs的目录结构：

文档分成了两部分，中文文档在/zh/目录下，英文文档在根目录下。

其实目录里面的东西都挺好看懂的，首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容，从中文文档里也可以看到只有这三个目录被替换了。

默认主题提供了一个主页布局，要使用它，需要在你的根目录 README.md 的 YAML front matter 中指定 home：true ，并加上一些其他的元数据。

我们先看看根目录下的README,md：

实在看不懂， 官网 有比我更详细的配置说明。

导航配置文件在 .vuepress/config.js 中

在导航配置文件中nav是控制导航栏链接的，你可以把它改成自己的博客目录。

剩下的默认主题配置官方文档都有很详细的文档说明这里就不在啰嗦了。

你可以在 .vuepress/ 目录下创建一个 override.styl 文件。
vuepress提供四个可更改的颜色：

我把它改成了这样：

由于评论区里问的人较多，所以在这里更新一下，其实我就算在这里写的再详细也不如大家去看官方文档。
侧边栏的配置也在 .vuepress/config.js 中：

对应的文档结构：

我的博客： brownhu

在配置好你博客之后，命令行执行：

当你看到这一行就说明成功了：

将打包好的vuepress目录上传到你的github仓库，和github page配合，就可以配置好你的博客网站了。