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

# dufu

dufu

wangwei.md

# wangwei

wangwei

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

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个人博客专栏

---

感谢阅读，祝君暴富！

---