Sonder 快速开始

710 字2分钟阅读入门#Astro#Bun#部署

Sonder 是一份以纸面阅读感为核心的个人发布模板，使用 Astro 静态构建、Bun 运行脚本。它把文章、书影音、动态、朋友页和个人资料收在同一套版式里，适合作为长期写作与个人出版的起点。

环境准备

  • Node.js 22.12 或更高版本
  • Bun（推荐用于安装依赖和运行脚本）
  • 一个静态托管平台（GitHub Pages、Vercel、Netlify、Cloudflare Pages 等）
Terminal window
git clone https://github.com/lmb666666/Sonder.git
cd Sonder
bun install
bun run dev

开发服务器默认运行在 http://localhost:4321。修改内容或样式后会热更新。

先改站点信息

打开根目录的 site.config.toml，优先替换这些值：

  • [config.site]：站点标题、描述、线上地址、仓库地址和页脚说明
  • [config.profile]：作者名、身份、头像、邮箱、网站和 GitHub
  • [[config.topNav.links]]：顶部导航链接
  • [config.theme]：默认色盘、界面语言和导航样式
  • [config.home]：首页引语、介绍、最新文章数量和联系方式

每项的完整说明见 站点配置指南。

替换内容

内容都在 src/content/ 下：

src/content/
  about.md         关于页
  blog/            长文与教程
  media/           书、影、音条目
  projects/        关于页的项目卡片

示例文章可以直接编辑或删除。删除文章后，记得把文章里的 heroImage 对应的封面一起清理，避免残留未使用的图片。

文章 frontmatter 的 date 是发布时间；需要显示修改时间时，再加一行 updated: 2026-11-08。文章页只会在修改时间比发布时间晚至少一天时显示「修改于」，站点信息卡的「最后更新」也会取两者的最大值。

动态页的演示数据在 src/data/moments.ts；朋友页的友链与朋友圈演示数据在 src/data/。

动态页会自动把音乐、视频、GitHub、网站、位置与推文渲染成对应卡片；音乐播放依赖 [config.music].meting_api，留空或不可达时保留平台链接卡，网易云音频失败会降级官方外链播放器。

构建与部署

Terminal window
bun run build
bun run preview

构建会把静态页面输出到 dist/。部署时只需要把 dist/ 交给任意静态托管平台；仓库内置的 vercel.json 可以在推送到 main 时自动构建；其他平台直接发布 dist/ 即可。

如果站点部署在子路径，可以在构建时设置：

Terminal window
SITE_URL=https://example.com SITE_BASE=/my-site bun run build

接下来

更多文章

3 篇
  1. 文章组件速览功能
  2. 主题色与深色模式外观
  3. 站点配置指南配置