Skip to content

搭建 VitePress 博客结构

官方的 VitePress 模板更像文档站:导航指向示例页面,侧边栏按功能分组。要写博客,需要先把“演示感”去掉,再补齐文章组织方式。

为什么选择 VitePress

  • Markdown 写作即所见,支持 Frontmatter 和自定义组件。
  • 默认主题足够轻量,易于换色和改导航。
  • 构建速度快,部署到任何静态托管都很省心。

调整导航与侧边栏

导航只保留写作常用的入口:首页 / 文章 / 归档 / 工具箱 / 关于。侧边栏则针对文章目录,按固定顺序列出近期文章,避免被自动生成的示例干扰。

内容组织方式

  1. docs/posts 目录存放文章,一篇一文件。
  2. posts/index.md 作为文章列表页,手写摘要和关键词,比自动生成更可控。
  3. archive.md 按时间排列,方便回顾。

这种手写列表虽然多做一步,但能保证每篇文章的标题、摘要和链接都经过确认。

部署前的检查

  • 本地运行 pnpm docs:devpnpm docs:build 确认链接无 404。
  • 检查 Frontmatter 的日期和描述,保证 RSS/SEO 信息合理。
  • GitHub Actions 可以使用 actions/upload-pages-artifact + actions/deploy-pages,全程无需服务器。

把演示页面替换成自己的内容后,博客就有了属于自己的骨架,后续只需要持续写作即可。