把个人主页做成内容中枢：我的 Astro 个人主页改造记录

前言

一直以来，我都希望有一个真正属于自己的主站点。看着各位大佬做好一个又一个项目，链接到主站点，这种日积月累的成就非常有自豪感！于是看到了 清羽飞扬的主页 ，根据这个项目我丢给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，而是在构建阶段读取一份内容快照：

1. 管理后台修改或同步内容

2. Hono API 写入 JSON 内容存储

3. Astro 构建时读取内容快照

4. 生成可直接部署的静态页面

如果内容文件不存在或解析失败，站点还会自动回退到源码中的默认数据。这样既保留了静态站点的访问性能，也避免一次内容存储故障让整个构建流程失效。

PostgreSQL、Drizzle schema、SQL migration、seed 和 export 脚本也已经准备完成，可以把数据库内容导出成构建快照。目前运行时仍以 JSON 持久化为主，数据库将作为下一阶段的正式数据源。

部署方式

项目支持通过 Docker Compose 部署。Caddy 负责 HTTPS、静态文件和反向代理，公开站、管理后台、API 与 PostgreSQL 可以放在同一套部署环境中：

Caddy
├── /          Astro 公开站
├── /admin     React 管理后台
└── /api       Hono API
                │
                └── PostgreSQL

日常发布时，先在后台维护内容或执行 RSS 同步，再生成公开站和后台的静态文件。对于个人项目来说，这种方式不需要复杂的云服务，也方便备份、迁移和在自己的服务器上长期运行。

这次改造带来的变化

相比最初的主页模板，现在的项目已经完成了几个重要转变：

1. 从单一介绍页变成了个人内容的统一入口；

2. 从源码内硬编码变成了后台可维护的结构化内容；

3. 从手动复制文章变成了 RSS 自动同步；

4. 从单体静态站扩展为公开站、后台、API 和数据层组成的 monorepo；

5. 在增加功能的同时，仍然保留了静态输出和轻量部署的优势。

对我来说，这个项目最有价值的地方并不是使用了多少技术，而是终于把分散在不同平台上的内容组织成了一条清晰的路径。访客不需要了解每个平台，也能从一个入口找到我的文章、项目和其他站点；我自己也有了一套可以持续维护、逐步扩展的内容工作流。

后续计划

这个项目目前仍在持续完善，接下来计划完成：

• 让 API 正式切换到 PostgreSQL 读写；

• 使用 Cookie Session 替换当前的 Bearer Token；

• 为后台表单增加更完整的校验、搜索和分页；

• 完善文章标签、赞赏数据和同步任务的管理能力；

• 优化自动构建、备份和发布流程；

• 继续打磨移动端体验、可访问性与页面性能。

个人主页不一定只是放头像和社交链接的名片。只要持续整理，它也可以成为一个稳定的数字入口，连接作品、写作、兴趣和长期积累。

感谢

感谢 astro-aria 项目提供的设计与代码基础。本项目在其基础上重新设计了页面结构、内容模型和交互，并增加了管理后台、API、同步服务与数据库方案。