VitePress 博客搭建指南

这是一篇关于如何使用 VitePress 搭建个人博客的教程。

为什么选 VitePress

VitePress 是由 Vue 团队维护的静态站点生成器，相比其他方案有这些优势：

1. 基于 Vite：秒级热更新，开发体验极佳
2. Vue 3 驱动：可以用 Vue 组件扩展主题
3. Markdown 优先：写文章只需要 Markdown
4. 内置搜索：开箱即用的本地搜索

项目结构

docs/
├── .vitepress/          # 配置和主题
│   ├── config.js        #   网站配置
│   └── theme/           #   自定义 Vue 组件
├── posts/               # 博客文章（按分类子目录）
│   ├── frontend/
│   ├── backend/
│   └── life/
└── index.md             # 首页

如何新增文章

在对应分类目录下新建 .md 文件：

---
title: 文章标题
date: 2024-07-24
category: 前端
tags: [Vue3, JavaScript]
description: 文章摘要
---

## 正文开始

修改样式

所有样式在 docs/.vitepress/theme/style.css 中。主要调整：

• :root 中的 CSS 变量控制全局配色
• .dark 类控制暗色模式
• .vp-doc 下的选择器控制文章排版

后续计划

• [ ] 添加评论系统
• [ ] RSS 订阅
• [ ] SEO 优化
• [ ] 图片懒加载

---

写博客是知识内化的最佳方式之一。坚持记录，保持输出！