用 Rspress 构建个人网站
Rspress React MDX这是 avotokyo.me 改造后的第一篇文章。旧站功能分散、维护成本偏高;这次重做的目标很明确:内容即站点,尽量用 Rspress 原生能力完成,少写自定义代码。
背景
个人站需要同时承载博客、职业经历与绩效记录,且希望内容与导航能随 MDX 文件自动更新,而不是维护多套页面模板。
站点概览
首页是入口,顶部导航可以直达各栏目:
技术选型
选 Rspress 主要是因为它原生支持 MDX 与文档站点工作流,写博客和栏目页不需要额外搭框架。Rspress 内置主题组件(Badge、Steps、Link 等)足够覆盖个人站需求,无需 eject 主题。
实现
仓库结构
关键配置
- 配置集中在
rspress.config.ts— 站点标题、描述、社交链接、导航栏等全局设置只写一处。 - MDX frontmatter 驱动列表 — 博客与绩效列表通过
overview: true和sort字段排序,无需手动维护文章索引。 - 插件分工明确 —
rspress-plugin-auto-nav自动生成各目录的_meta.json;rspress-plugin-auto-sidebar按scanDir扫描文件生成侧栏,配合reverse: true实现「sort越大越靠前」。
完整说明见仓库 README。
小结
Rspress 2 足以支撑个人站的内容组织与导航生成,后续博客会陆续记录开发过程中的实际问题与解法,方向包括前端工具链、开源项目维护与文档站点实践。如果你也对静态站点或文档工程感兴趣,欢迎通过 GitHub 或 X 交流。