先搞清楚：这门造轮子的课值不值得学
市面上教前端框架用法的教程很多，教你从底层写一个框架的却很少。这门基于 Vite 的静态站点生成实战，核心解决的是“知其然不知其所以然”的问题。日常工作里，大家用现成的文档工具往往只是配个侧边栏和导航，一旦遇到深度的定制需求，比如改写内部编译流程、接入特殊路由规则或者扩展 Markdown 编译能力，就会卡壳。这门课带你从零实现一个类 VitePress 的框架，把平时当成黑盒的工具拆开揉碎。如果你的目标是停留在调参层面，这门课偏重；但如果你想在工程化深度上突破瓶颈，想弄懂 SSR、SSG 以及约定式路由底层的运转逻辑，这套造轮子的过程非常扎实，能帮你把零散的底层知识串成完整的工程体系。
适合什么基础，建议怎么看
这套资料不适合刚摸熟 HTML 的新手。你需要对 ES6 语法、Node.js 基本接口有大致了解，最好之前用 Vite 跑过业务项目。课程前期的 MVP 版本开发是全篇的骨架，建议优先啃这块。其中 CLI 脚手架和 Dev Server 搭建部分，能让你明白本地开发环境是如何被驱动起来的；而 CSR、SSR、SSG 渲染模式原理及 SSG 核心流程这几节，是整门课的灵魂，直接决定你能否真正理解静态站点的生成机制，务必重点跟进。把这几块吃透后，再去看后期的库构建方案、代码规范工具链以及单元和 E2E 测试环境搭建，就能站在全局视角去理解一个成熟工具包应该具备的工程素养。
学完能独立做什么，资料怎么配合练习
跟完这套流程，你不再只是个调包侠。学完后，你能独立设计并实现一个轻量级的文档或博客站点生成器，知道如何开发 Vite 插件来处理约定式路由，懂得如何集成 remark 和 rehype 插件来扩展 MDX 编译能力，甚至能为自己的内部工具团队定制一套带配置解析器的文档基建。在看资料时，不要只用眼睛过一遍代码，必须跟着视频自己起一个空仓库。每看完一个模块，比如配置解析器或约定式路由开发，就暂停下来，自己把逻辑敲进编辑器里跑通。遇到 MDX 插件集成这种生态庞杂的环节，先按资料里的最小可用集跑通流程，再尝试替换一两个自定义插件去验证理解。只有把代码在自己的终端里跑出结果，才算真正把这套静态站点生成框架的底层逻辑吃透。
从 0 到 1 实现类 VitePress 框架，手把手带你造轮子
课程目录
* 开篇：项目介绍及课程安排
* 框架初体验：环境搭建和功能概览
* MVP 版本开发(一)： CLI 脚手架、Dev Server 搭建
* MVP 版本开发(二)：主题组件渲染实现
* MVP 版本开发(三)：CSR、SSR、SSG 渲染模式原理
* MVP 版本开发(四)：SSG 核心流程开发
* 库构建：如何为我们的工具包接入构建方案？
* 代码规范: 集成项目的编程规范工具链
* 前端测试：搭建单元测试和 E2E 测试环境
* 配置解析器：通用配置文件解析逻辑开发
* 数据整合：整理配置内容、生成站点数据
* 约定式路由(一)：前端路由设计和 Demo 实现
* 约定式路由(二)：Vite 构建插件开发
* MDX 编译：整体工具链及生态介绍
* MDX 插件集成：常用 remark/rehype 插件集成
* rehype 插件实战(一)：实现 preWrapper 插件
* rehype 插件实战(二): 实现代码高亮插件
* remark 插件实战: 实现 TOC 解析插件
* 热更新：开发阶段 MDX 模块热更新实现
* 多路由打包：生产环境 SSG 构建功能完善
* 原子化 CSS：为什么要选择 UnoCSS 开发？
* 页面数据流：通过 React Context 共享编译时信息
* 公共导航栏(一)：基本结构梳理和 UI 实现
* 公共导航栏(二)：深色模式实现
* Home 页面：根据数据自动组装首页内容
* 侧边栏模块：如何实现自动化的侧边栏生成？
* 正文页面：核心内容区渲染
* TOC 模块：实现丝滑的内容大纲体验
* 交互逻辑：TOC 相关交互开发
* TOC 热更新问题：使用自定义 HMR 事件
* Islands 架构：基本实现原理和运行流程
* Babel 插件：开发 babel-plugin-island 定制模块编译时
* 自定义 JSX Runtime：运行时拦截 React 的 JSX Runtime 逻辑
* Islands 打包：构造虚拟模块，打包 Islands 组件代码
* 模板拼接：注入 Islands 组件 bundle 和数据信息
* React 多实例：使用 Import Map 和预打包解决多实例问题
* 自定义 head 实现: 接入 react-helmet-async
* 生产预览：支持本地预览生产环境产物
* 持续集成与部署：项目的 CI 部署及 NPM 发包规范
* 结束语: 如何保持对技术的热爱？
