前言
一直以来,我都希望有一个真正属于自己的主站点。看着各位大佬做好一个又一个项目,链接到主站点,这种日积月累的成就非常有自豪感!于是看到了 清羽飞扬的主页 ,根据这个项目我丢给AI,让AI去设计、去改造,便有了这个主站点!
为什么要做这个项目
最初的需求其实很简单:做一个简洁、快速、适合长期使用的个人主页。
但真正开始整理内容后,我发现一个普通的单页主页很快就不够用了。我希望它能够同时解决几个问题:
集中展示个人简介、近况、联系方式和技术方向;
统一收录自己做过的项目和维护中的站点;
自动获取博客的最新文章,不必在多个地方重复更新;
整理值得推荐的开源项目;
展示赞赏入口和支持者名单;
在不直接修改源码的情况下维护大部分内容;
保留静态站点的速度、稳定性和低运维成本。
因此,这次改造没有停留在“换一套配色、改几段文案”,而是逐步把原来的 Astro 模板扩展成了一套带管理后台、API 和数据层的个人内容系统。
现在可以看到什么
公开站目前包含七个主要部分:
- 首页:聚合个人简介、项目、站点、最新文章、开源推荐和赞赏入口;
- 项目:记录已经发布、正在开发或仍在构思的个人项目;
- 文章:作为博客索引,通过 RSS 汇总最新内容并跳转到原文;
- 站点:集中展示个人主页、博客和其他独立站点;
- 开源:分享我实际关注或使用过的开源项目;
- 赞赏名单:展示支持者、留言和赞赏信息;
- 关于:补充个人介绍、关注方向和联系方式。
视觉上,我保留了 astro-aria 简洁、轻量的基础,又重新设计了页面的信息结构。整个站点采用偏“信号流”的表达方式,以蓝色作为强调色,配合虚线边框、轻量卡片、明暗主题和克制的进入动画,让不同类型的内容保持统一,同时尽量减少对阅读的干扰。
技术架构
本项目技术栈:Astro、TypeScript、Tailwind CSS、React、Vite、Hono、PostgreSQL、Drizzle ORM、Docker Compose、Caddy
1. Astro 负责公开站点
公开页面继续使用 Astro 构建。对个人主页来说,大部分内容以阅读和跳转为主,并不需要在浏览器中运行大量 JavaScript。Astro 可以直接输出静态 HTML,在首屏速度、SEO 和部署成本之间取得很好的平衡。
样式部分使用 Tailwind CSS,并补充了一套自定义的响应式布局、明暗主题和交互动效。桌面端与移动端使用同一套内容结构,同时针对触控操作、文字长度和固定尺寸组件做了适配。
2. React + Vite 提供内容后台
随着项目、文章和站点越来越多,继续把所有内容硬编码在 TypeScript 文件里并不方便。因此项目增加了一个独立的管理后台,用于维护:
个人资料与导航菜单;
项目、站点和文章;
开源推荐;
赞赏名单与赞赏配置;
ICP、网安备案等站点信息。
常用内容已经提供结构化表单,也保留了高级 JSON 编辑入口,方便批量调整复杂数据。后台首页还会汇总文章、项目、站点和赞赏数据,并展示同步状态与最近的任务日志。
3. Hono 连接公开站与后台
API 服务使用 Hono 编写,负责提供公开只读接口、后台内容接口以及同步任务入口。
其中,博客同步会读取指定的 RSS 地址,解析标题、链接、发布时间、摘要和分类,再以文章链接作为唯一依据合并内容;赞赏数据则支持 CSV、JSON 和远程地址导入,并对常见的中英文字段名进行归一化处理。每次同步的结果、耗时和错误信息都会进入日志,便于排查问题。
4. 静态快照兼顾性能与可维护性
目前公开站没有在每次访问时请求 API,而是在构建阶段读取一份内容快照:
管理后台修改或同步内容
Hono API 写入 JSON 内容存储
Astro 构建时读取内容快照
生成可直接部署的静态页面
如果内容文件不存在或解析失败,站点还会自动回退到源码中的默认数据。这样既保留了静态站点的访问性能,也避免一次内容存储故障让整个构建流程失效。
PostgreSQL、Drizzle schema、SQL migration、seed 和 export 脚本也已经准备完成,可以把数据库内容导出成构建快照。目前运行时仍以 JSON 持久化为主,数据库将作为下一阶段的正式数据源。
部署方式
项目支持通过 Docker Compose 部署。Caddy 负责 HTTPS、静态文件和反向代理,公开站、管理后台、API 与 PostgreSQL 可以放在同一套部署环境中:
PLAINTEXT
Caddy
├── / Astro 公开站
├── /admin React 管理后台
└── /api Hono API
│
└── PostgreSQL日常发布时,先在后台维护内容或执行 RSS 同步,再生成公开站和后台的静态文件。对于个人项目来说,这种方式不需要复杂的云服务,也方便备份、迁移和在自己的服务器上长期运行。
这次改造带来的变化
相比最初的主页模板,现在的项目已经完成了几个重要转变:
从单一介绍页变成了个人内容的统一入口;
从源码内硬编码变成了后台可维护的结构化内容;
从手动复制文章变成了 RSS 自动同步;
从单体静态站扩展为公开站、后台、API 和数据层组成的 monorepo;
在增加功能的同时,仍然保留了静态输出和轻量部署的优势。
对我来说,这个项目最有价值的地方并不是使用了多少技术,而是终于把分散在不同平台上的内容组织成了一条清晰的路径。访客不需要了解每个平台,也能从一个入口找到我的文章、项目和其他站点;我自己也有了一套可以持续维护、逐步扩展的内容工作流。
后续计划
这个项目目前仍在持续完善,接下来计划完成:
让 API 正式切换到 PostgreSQL 读写;
使用 Cookie Session 替换当前的 Bearer Token;
为后台表单增加更完整的校验、搜索和分页;
完善文章标签、赞赏数据和同步任务的管理能力;
优化自动构建、备份和发布流程;
继续打磨移动端体验、可访问性与页面性能。
个人主页不一定只是放头像和社交链接的名片。只要持续整理,它也可以成为一个稳定的数字入口,连接作品、写作、兴趣和长期积累。
感谢
感谢 astro-aria 项目提供的设计与代码基础。本项目在其基础上重新设计了页面结构、内容模型和交互,并增加了管理后台、API、同步服务与数据库方案。

