使用VitePress搭建自己的静态个人博客或知识库

使用VitePress搭建自己的静态个人博客或知识库

VitePress 是一个由 Vite 和 Vue 驱动的静态站点生成器，以其简单、强大、快速的特点而受到开发者青睐。它专注于内容创作，提供即时启动的服务器、闪电般的热更新体验，并支持使用 Vue 语法和组件。本文将详细介绍如何使用 VitePress 搭建一个属于自己的静态个人博客或知识库。

1. VitePress 介绍

VitePress 是一个由 Vite 和 Vue 驱动的静态站点生成器，具有以下特点：

1. 专注内容：只需 Markdown 即可轻松创建美观的文档站点。
2. 享受 Vite 无可比拟的体验：服务器即时启动，闪电般的热更新，还可以使用基于 Vite 生态的插件。
3. 使用 Vue 自定义：直接在 Markdown 中使用 Vue 语法和组件，或者使用 Vue 组件构建自定义主题。
4. 速度真的很快！：采用静态 HTML 实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。

2. 安装

2.1 初始化项目

pnpm init

或者

npm init -y

2.2 安装 VitePress

pnpm add vitepress

2.3 使用 VitePress 指令快速搭建项目

pnpm vitepress init

执行 pnpm run docs:dev 启动项目。

3. 首页配置文件介绍

在 .vitepress/theme/index.js 文件中进行首页配置：

---
layout: home
hero:
  name: SunFei博客
  text: VitePress + Vue 搭建
  tagline: JavaScript Html CSS ThreeJs Uniapp Echarts ...

  image:
    src: /sq.svg
    alt: VitePress

  actions:
- theme: brand
      text: 快速开始
      link: /markdown-examples
- theme: alt
      text: vitepress官方
      link: https://vitepress.dev/

features:
- icon: ⚡️
    title: 前端知识
    details: HTML CSS JavaScript TypeScript Vue3等部分的基础以及进阶的内容知识点,整合自己以及别人的资料 
- icon: 🖖
    title: 数据结构与算法
    details: 介绍了基本数据结构以及相关的经典算法，强调问题-数据-算法的抽象过程，关注数据结构与算法的时间空间效率，培养编写出高效程序从而解决实际问题的综合能力。
- icon: 🛠️
    title: 常用前端工具
    details: 提供一系列的提高前端开发效果的工具网站,例如UI渐变色生成器 盒子阴影调试 Flex Grid 布局调试 包括常用的图标库...
- icon: 💓
    title: 个人项目难点总结
    details: 个人在开发项目中所遇到的技术难点,以及解决方案...
---

配置完成后，首页将显示如下：

4. config.mjs 文件说明

4.1 站点标题和介绍

export default defineConfig({
  title: "测试1",
  description: "xxxxxxx",
})

4.2 导航栏 logo 图标和文字

export default defineConfig({
  title: "测试1",
  description: "xxxxxxx",
  themeConfig: {
    siteTitle: 'Sun_Fei',
    logo: '/planet.svg',
  }
})

4.3 顶部导航项

themeConfig: {
  nav: [
    { text: '首页', link: '/' },
    { text: '样例', link: '/markdown-examples' },
    { text: '学习笔记', link: '/study/studyNotes' }
  ],
}

4.4 侧边导航栏配置

themeConfig: {
  sidebar: [
    {
      items: [
        {
          text: '学习笔记',
          collapsible: true,
          collapsed: true,
          items: [
            { text: 'Vue学习笔记', link: '/study/vue.md' },
            { text: 'Node学习笔记', link: '/study/node.md' },
            { text: 'React学习笔记', link: '/study/react.md' }
          ]
        },
        { text: 'Markdown Examples', link: '/markdown-examples'},
        { text: 'Runtime API Examples', link: '/api-examples' }
      ]
    }
  ],
}

4.5 底部版权配置

sidebar: [],
footer: {
  message: 'Released under the MIT License.',
  copyright: 'Copyright © 2023-present SunFei',
},

5. 网站样式美化

在 theme/index.js 文件中引入自定义样式：

import DefaultTheme from 'vitepress/theme'
import './custom.css'
export default DefaultTheme

在 theme/custom.css 文件中编写样式代码：

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, rgb(244, 145, 15), #7eaadf);
  --vp-home-hero-image-background-image: linear-gradient(135deg, #ff9100 10%, #ffc400 50%);
  --vp-home-hero-image-filter: blur(100px);
  --vp-button-brand-text: #ffffff;
  --vp-button-brand-bg: #ff9100;
  --vp-button-brand-hover-border: #00FFEE;
  --vp-button-brand-hover-text: #000000;
  --vp-button-brand-hover-bg: #00FFEE;
  --vp-c-brand: #ff8400;
  --vp-c-brand-light: #ff8400;
  --vp-c-brand-dark: #ff8400;
}

6. 其他设置

6.1 代码块行数显示和高亮

在 config.mjs 文件中进行配置：

markdown: {
  theme: 'material-theme-palenight',
  lineNumbers: true,
},

7. config.mjs 文件代码

完整配置示例：

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: "测试1",
  description: "xxxxxxx",
  themeConfig: {
    siteTitle: 'Sun_Fei',
    logo: '/planet.svg',
    nav: [
      { text: '首页', link: '/' },
      { text: '样例', link: '/markdown-examples' },
      { text: '学习笔记', link: '/study/studyNotes' }
    ],
    sidebar: [
      {
        items: [
          {
            text: '学习笔记',
            collapsible: true,
            collapsed: true,
            items: [
              { text: 'Vue学习笔记', link: '/study/vue.md' },
              { text: 'React学习笔记', link: '/study/react.md' },
              { text: 'Node学习笔记', link: '/study/node.md' },
            ]
          },
          { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      }
    ],
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ],
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2023-present SunFei',
    },
  },
  markdown: {
    theme: 'material-theme-palenight',
    lineNumbers: true,
  },
})

8. 结语

先说到这里吧，后续我会搭建一个基础模块，放在 Gitee 和 GitHub 上，大家如果想使用 VitePress 搭建自己的博客，可以采用。当然也可以自己从 0 到 1 搭建，更有参与感，成就感。

Gitee 地址: gitee.com/sunfei666/vitepress-blog

GitHub 地址: github.com/SunFei12345/vitepress-blog