VuePress搭建文档网站/个人博客（简单配置、易上手）

---

天行健，君子以自强不息；地势坤，君子以厚德载物。

---

每个人都有惰性，但不断学习是好好生活的根本，共勉！

---

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

---

金陵子弟来相送，欲行不行各尽觞。
请君试问东流水，别意与之谁短长？
——《金陵酒肆留别》

---

---

本篇为博客的简易配置

关于其他详细配置项，如站点基础配置参数、主题配置、打包工具配置、通用配置等等
可参考文章专栏链接：VuePress个人博客专栏

---

VuePress搭建站点的简易配置

1. 配置文件config.js

VuePress站点的基本配置文件是.vuepress/config.js

1.1 配置文件优先级

需要注意，配置文件也支持ts，会有更好的类型提示，即可将文件定义为.vuepress/config.ts
如果同时配置了多个config配置文件（如config.ts、config.js、config.mjs），生效的优先级如下
优先级从高到低：

ts>js>mjs 
.vuepress/config.ts>.vuepress/config.js>.vuepress/config.mjs

1.2 指定配置文件

除默认的配置文件外，还可以通过–config命令指定配置文件，命令如下

vuepress dev docs --config my-config.ts

1.3 配置文件内容

config.js基础的配置内容如下

import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'export default defineUserConfig({bundler: viteBundler(),theme: defaultTheme(),lang: 'zh-CN',title: '你好， VuePress ！',description: '这是我的第一个 VuePress 站点',
})

2. 关于博客站点的简易配置

现在开始，逐一实现博客的页面文件、路由、导航栏等配置

2.1 页面文件的创建

vuepress搭建的站点，页面显示的内容就是markdown文件中的内容
我们需要创建一些markdown文件并填充一些内容
docs目录下的README.md文件（如没有该文件可直接创建）
该文件就是访问站点的首页默认展示的页面文件
内容填充如下
README.md

# 寒山李白的个人博客## 1. 作者介绍
### 1.1 姓名
寒山
李白
寒山李白### 1.2 籍贯
安徽### 1.3 技能
睡觉
吃饭
码字
王者### 1.4 爱好
爬山
跑步
冥想### 1.5 名言
多学技能，多读书，有个信仰，自律点## 2. 博客介绍### 2.1 主题
学习新技能，实践见真知### 2.2 内容
该博客内容以娱乐为主### 2.3 宗旨
不断克服困难，永攀第二### 2.4 合作
和自己合作，和自己和解## 3. 将进酒
君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。 ### 3.1 将近酒
君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。 
### 3.2 将进酒
君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。 
### 3.3 将进酒
君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。 

此时可访问页面，效果如下

在docs目录下创建文件LIBAI.md，内容填充如下

# 李白诗集精选李白的唐诗精选内容

在docs目录下创建note目录，在note目录下创建两个md文件
dufu.md

# dufudufu

wangwei.md

# wangweiwangwei

文件创建完毕，接下来进行页面内容中的链接配置

2.2 链接配置

在页面中除了文字还可以配置链接，链接可进行跳转，链接可以是文件路径也可以是url网址
在README.md文件中添加以下几种链接
相对路径链接（LIBAI.md）

<!-- 相对路径 以当前路径为起点-->
[李白个人主页](./LIBAI.md)

绝对路径链接（dufu.md）

<!-- 绝对路径 docs为根路径 -->
[杜甫个人主页](/note/dufu.md)

url链接（百度）

<!-- url链接 -->
[百度地址](https://www.baidu.com)

页面效果展示

2.3 导航栏配置

在首页的右上方，除了主题黑白按钮外，还可以配置一些路由导航，可以是文件路由也可以是网页路由
导航栏配置是在docs/.vuepress/config.js文件中的theme部分中用navbar进行配置

  theme: defaultTheme({// 导航栏navbar: [{//导航栏配置部分}],}),

2.3.1 文件路由配置

文件路由配置，分为首页导航、单层导航、导航栏组

      // 首页导航栏配置，默认路径为/{text: '首页',link: '/'},// 其他页面文件的导航配置{text: '杜甫',link: '/note/dufu.md'},{text: '王维',link: '/note/wangwei.md'},// 导航栏组的配置{text: '诗人名单',prefix: '/note/',children: [{text: '杜甫',link: '/note/dufu.md'},{text: '王维',link: '/note/wangwei.md'},]},

2.3.2 网页路由配置

网页路由导航的配置，即直接跳转到别的网址

      // url导航栏配置{text: '百度',link: 'https://www.baidu.com'},

2.3.3 完整代码及页面展示

docs/.vuepress/config.js完整代码如下

import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'export default defineUserConfig({// 导包配置bundler: viteBundler(),// 主题配置theme: defaultTheme({// 导航栏navbar: [// 首页导航栏配置，默认路径为/{text: '首页',link: '/'},// 其他页面文件的导航配置{text: '杜甫',link: '/note/dufu.md'},{text: '王维',link: '/note/wangwei.md'},// 导航栏组的配置{text: '诗人名单',prefix: '/note/',children: [{text: '杜甫',link: '/note/dufu.md'},{text: '王维',link: '/note/wangwei.md'},]},// url导航栏配置{text: '百度',link: 'https://www.baidu.com'},],}),// 语言配置lang: 'zh-CN',// 标题配置title: '欢迎来到寒山李白的博客！',// 描述description: '这是我的第一个 VuePress 站点',
})

页面效果展示

点击导航栏可进行跳转，查看不同的文件页面

3. 总结

到此，关于个人博客的基础配置就完成了
可以进行简单的博客配置，创建属于自己的博客内容
当然了，这只是本地启动的一个服务，如果想部署到服务器，或者配置更多功能
可以参考文章专栏：VuePress个人博客专栏

---

感谢阅读，祝君暴富！

---