Appearance
实训：静态站点生成器
你现在阅读的课程网站（包括本页）就是用 VitePress 构建的。本周我们刚在 markdown 里用 HTML 对照过 Markdown——本实训把"内容 → 网站"的流水线完整走通，分三个任务：
- vitepress基础 — 安装与启动、md → html 的构建、导航（nav）与侧栏（sidebar）配置
- 主题与插件 — 主题注入样式、插件注入行为，体会"内容 / 样式 / 行为"三层分离
- 评论插件 — 以 gitee/github 为后台给静态站点加评论，体验 serverless 与前后端分离
元信息
- 目标：理解"从内容到网站"——markdown 经静态网站生成器（SSG）构建为 html 站点；掌握 VitePress 安装与基础使用；通过主题与插件体会样式、行为如何在 md 之外注入；借平台后台实现评论，初识 serverless 与前后端分离
- 关键概念：静态网站生成器（SSG）、构建（build）、主题（theme）、插件（plugin）、serverless、前后端分离
- 关联阶段：cp1
- 常见误区：以为网站必须有一台"运行中"的服务器（构建产物是纯静态文件，动态能力可以借外部 API 补足）；以为静态与动态的边界是工具的边界（WordPress 装缓存插件会向静态逼近，VitePress 请求后端 API 就向动态伸展）
收束：VitePress 与 WordPress 对照
WordPress 是世界上用户最多的建站工具——PHP + MySQL 的内容管理系统（CMS）。两者目标相同：把内容变成网站；路线却相反。
| VitePress | WordPress | |
|---|---|---|
| 类别 | 静态网站生成器（SSG） | 内容管理系统（CMS） |
| 内容存放 | md 文件，跟着 git 走 | MySQL 数据库，跟着服务器走 |
| 页面生成 | 构建时一次性生成静态 html | 每次访问由 PHP 动态生成 html |
| 样式 | 主题（CSS/组件），构建期生效 | 主题（PHP 模板 + CSS），运行期生效 |
| 行为扩展 | 插件：改构建管线 | 插件：挂在服务器请求处理上 |
| 写作方式 | 编辑器写 md + git 版本管理 | 浏览器后台所见即所得 |
| 部署 | dist/ 纯静态文件，任意静态服务器/CDN | 服务器常驻运行 PHP 与数据库 |
| 动态能力 | 浏览器端调外部 API（如评论插件） | 数据库 + 运行期插件，原生动态 |
| 典型场景 | 文档、课程、技术博客 | 门户、商城、社区——内容频繁增改、多人后台协作 |
联系：殊途同归。
- 分层相同：两边都是"内容 / 主题（样式）/ 插件（行为）"三层，且都允许换皮、加件而不动内容——主题与插件里对 VitePress 做的，正是 WordPress 后台"装主题、装插件"时发生的同构之事
- 产物相同：浏览器最终收到的都是 html/css/js（呼应 Web软件与BS架构）——区别不在"给浏览器什么"，而在"谁、在什么时候生成"
- 边界互相渗透：WordPress 装缓存插件会把动态页面落成静态文件（向 SSG 逼近）；VitePress 也能嵌运行时组件、请求后端 API（向动态伸展）
选型直觉：内容以"写"为主、更新靠 git → SSG；内容频繁增改、要在网页后台管理、多人发帖 → CMS。
验收标准
- [ ] 三个任务各自的验收（见各篇末尾）
- [ ] 能不假思索说出 VitePress 与 WordPress 在内容存放、生成时机、部署形态上的三点区别