VitePress 课程

这是一个完整的 VitePress 教学课程，包含从零开始构建静态站点生成器的所有材料。

课程概述

本课程将带你从零开始构建一个完整的静态站点生成器，学习 VitePress 的核心原理和实现细节。课程分为 8 节课，每节课 20-40 分钟，总时长约 45-60 分钟。

课程文件导航

理论部分

文件	描述	类型
01-intro.md	背景研究，包括项目概述、历史背景、技术栈	📚 理论
02-arch.md	架构分析，包括高层架构、核心模块、数据流	📚 理论
03-code-walkthrough.md	源代码导览，包括项目结构、核心文件详解	📚 理论

实践部分

文件	描述	类型
04-core-feature/	手写核心功能实现，包含完整源码和测试	💻 实践
05-lesson-plan.md	分步课程计划，8 节课的详细内容	📖 教程

索引文件

文件	描述	类型
index.json	JSON 格式的文件清单	📋 索引
index.md	Markdown 格式的课程主页（本文件）	📋 索引

目录结构

vitepress-course/
├── 01-intro.md              # 背景研究
├── 02-arch.md               # 架构分析
├── 03-code-walkthrough.md   # 源代码导览
├── 04-core-feature/         # 手写核心功能实现
│   ├── src/                 # 源代码
│   ├── test/                # 测试文件
│   ├── content/             # Markdown 内容
│   └── README.md            # 项目文档
├── 05-lesson-plan.md        # 分步课程计划
├── 06-slides.html           # 配套幻灯片
├── index.json              # JSON 索引
└── index.md                # Markdown 索引（本文件）

快速开始

1. 阅读背景研究

从 01-intro.md 开始，了解 VitePress 的背景和历史。

2. 学习架构

阅读 02-arch.md，理解 VitePress 的架构设计。

3. 源代码导览

通过 03-code-walkthrough.md 了解源代码结构。

4. 实践核心功能

进入 04-core-feature/README.md 目录，运行测试和构建：

cd 04-core-feature
npm install
npm test
npm run build

5. 学习课程

按照 05-lesson-plan.md 的步骤学习。

课程大纲

第 1 课：课程介绍与环境准备（5 分钟）

了解课程内容和目标，搭建开发环境，项目初始化，运行第一个测试。

第 2 课：Markdown 解析基础（10 分钟）

Markdown 语法简介，标题解析算法，正则表达式应用，单元测试编写。

第 3 课：代码块和列表解析（10 分钟）

代码块语法，列表语法，状态机设计，多行内容处理。

第 4 课：HTML 渲染（10 分钟）

将 tokens 转换为 HTML，实现 HTML 转义，生成语义化 HTML。

第 5 课：Frontmatter 解析（10 分钟）

Frontmatter 语法，YAML 格式，正则表达式匹配，元数据提取。

第 6 课：文件系统操作（10 分钟）

Node.js 文件系统 API，递归算法，路径处理，异步操作。

第 7 课：构建流程（10 分钟）

构建流程设计，HTML 模板生成，并行处理，性能优化。

第 8 课：完整构建与部署（10 分钟）

完整构建流程，静态站点部署，性能优化技巧，扩展功能建议。

学习成果

完成本课程后，你将能够：

✅ 理解静态站点生成器的工作原理，✅ 掌握 Markdown 解析和 HTML 渲染，✅ 熟练使用 Node.js 文件系统 API，✅ 编写高质量的单元测试，✅ 构建自己的文档站点。

参考资源

VitePress 官方文档，Markdown 规范，Node.js 文档，测试驱动开发。

许可证

MIT License

联系方式

架构师AI杜

---

所有教学材料已保存。准备录制。

扫描二维码关注"架构师AI杜"公众号，获取更多技术内容和最新动态