如何搭建 VitePress

前言

前段时间找工作，面对自己平平无奇的简历，萌生了搭建自己的博客的想法。

说干就干，在群里潜水的时候，有一个前同事在群里发了他搭建的基于 VuePress 和 VitePress 的博客。看了以后被这种简约的风格打动了，于是开始了自己的 VitePress 搭建之旅。

环境

node: 16.15.1

实现

搭建项目

遇事不决看文档，推荐是看中文文档搭建起来，再看英文文档查配置参数，并和项目文件相互佐证。

VitePress 中文文档 文档不全，因为是爱发电，所以更新不及时，不包含配置参数文档

VitePress 英文文档 文档全且新，但是全英文，包含配置参数文档

VitePress 项目地址 Github地址

构建基础功能

构建博客的基础功能，能够开门见客。

1. 在 docs 文件夹下新建 index.md

docs/index.md

2. 使用 yml 语法书写首页配置

这是我的首页的配置，对于普通的需求来说够用了。

1layout: home
2
3hero:
4  name: LibraHeresy's # 首页左侧主标题
5  text: Blog # 首页左侧次标题
6  tagline: 记录技术经验 # 首页左侧补充信息
7  image: # 首页右侧图
8    src: <https://avatars.githubusercontent.com/u/43395850?s=400&u=75df1aaf5efcbbcdded576bf50905a15e228742d&v=4>
9    alt: 网站的 logo 图片
10  actions: # 首页左侧标题下按钮
11    - theme: brand
12      text: 去看看
13      link: /blog/home
14    - theme: alt
15      text: 我的 github
16      link: <https://github.com/LibraHeresy>
17    - theme: alt
18      text: 我的 gitee
19      link: <https://gitee.com/LibraHeresy>
20features: # 首页下方推荐盒子
21  - icon: 🛠️
22    title: Taro CI持续集成框架的配置与使用
23    details: Taro CI持续集成框架的配置与使用
24    link: /blog/TaroCI持续集成框架的配置与使用/page
25    linkText: 了解更多
26  - icon: ⚡️
27    title: 如何搭建VitePress
28    details: 如何搭建VitePress
29    link: /blog/如何搭建VitePress/page
30    linkText: 了解更多
31  - icon: 🖖
32    title: 使用Github Pages部署静态页面
33    details: 使用Github Pages部署静态页面
34    link: /blog/使用GithubPages部署静态页面/pages
35    linkText: 了解更多

3. 配置 config.js（全局配置文件）

docs/.vitepress/config.js

1const config = {
2  title: "LibraHeresy", // 网页左上角标题
3  titleTemplate: "天秤的异端", // 页签右标题
4  base: "/vite-press/",
5  description: "Blog", // 描述
6  lastUpdated: true, // 最后更新时间
7  themeConfig: {
8    // 导航栏
9    nav: [
10      { text: "首页", link: "/" },
11      { text: "博客", link: "/blog/home" },
12      { text: "短文", link: "/essay/home" },
13      { text: "闲谈", link: "/chat/home" },
14    ],
15    // 侧边栏
16    sidebar: {
17      "/blog/": [
18        { text: "简述", link: "/blog/home" },
19        {
20          text: "Taro CI持续集成框架的配置与使用",
21          link: "/blog/TaroCI持续集成框架的配置与使用/page",
22        },
23        { text: "如何搭建VitePress", link: "/blog/如何搭建VitePress/page" },
24        {
25          text: "使用Github Pages部署静态页面",
26          link: "/blog/使用GithubPages部署静态页面/page",
27        },
28      ],
29      "/essay/": [
30        { text: "简述", link: "/essay/home" },
31        {
32          text: "如何快速完成Microsoft Rewards积分任务",
33          link: "/essay/如何快速完成MicrosoftRewards积分任务/page",
34        },
35      ],
36      "/chat/": [
37        { text: "简述", link: "/chat/home" },
38        { text: "书架", link: "/chat/书架/page" },
39      ],
40    },
41    // 页脚
42    footer: {
43      message: "Released under the MIT License.",
44      copyright: "Copyright © 2023-present LibraHeresy",
45    },
46    // 搜索框
47    search: {
48      provider: "local",
49    },
50    // 自定义更新时间头
51    lastUpdatedText: "最后更新时间",
52    // 右上角社交链接
53    socialLinks: [{ icon: "github", link: "https://github.com/LibraHeresy" }],
54  },
55};

总结

至此，一个基本功能满足的博客就算搭建好了，因为这个模板还面向一部分的文字工作者，所以难点在于各种配置参数的填写。

总体来说，体验良好，比较推荐。