我用 Astro、Svelte 5 和 Hono 构建了一个托管比较平台
Source: Dev.to
概览
我已经厌倦了那些主机对比网站。你知道的那类：“2024 年十大最佳主机”文章，自 2022 年起就再也没有更新，价格完全错误，排名总是可疑地把同一家供应商排在第一位，无论情况如何。
于是我决定自己动手做一个。不是带有联盟链接的博客文章，而是一个真正的工具，你可以按主机类型筛选、并排比较套餐，并看到实际最新的价格。经过大约六个月的开发，HostingSift 已经上线，我想把其中的实现过程分享出来。
为什么选这套技术栈
Astro 的混合 SSR 模式是显而易见的选择。大多数页面（主机简介、分类、首页）在构建时预渲染，这意味着它们开箱即快。少数路由比如对比工具需要服务器渲染，Astro 能在每个页面层面切换渲染方式，非常方便。
交互部分我使用 Svelte 5。之前用的是 React，老实说全新的 rune API（$state、$derived、$effect）让我很快就倾心。没有依赖数组，没有陈旧的闭包，组件感觉更轻量。大约花了一周时间适应这种思维模型的转变，之后就再也没有回头。
后端使用 Hono（基于 Node.js）。它像 Express，但提供真正的 TypeScript 支持且性能更好。它负责认证、后台管理 API、联盟点击追踪等所有事务。数据库使用 PostgreSQL 搭配 Drizzle ORM，在查询和迁移方面都表现稳健。
所有代码都放在一个 monorepo 中：
apps/web
apps/api
packages/db
packages/emailpnpm 工作区把它们粘合在一起。
保持价格实时更新
站点的核心目标是展示准确的价格，所以我构建了一个自动化流水线，每周从各供应商处抓取套餐数据。每个套餐、每个计费周期、每个功能开关都会被抓取。流水线将新数据与数据库中已有的数据进行比较，并对差异进行 upsert。每次运行还会生成一次快照，这样如果某供应商悄悄把续费价格上调了 2 美元/月，也会被记录下来。随着时间推移，这会为每个套餐累积出价格历史。
为每个供应商获取正确数据是最大的时间消耗。每个供应商的定价页面结构都不一样。有的页面布局简洁，有的把套餐藏在标签页和下拉框里，还有少数经常更改页面结构导致抓取失效。于是只能编写大量针对特定供应商的逻辑，并接受维护是必然的代价。
如果再来一次，我会怎么做不同
- 我会在早期投入更多时间进行数据校验。曾经我差点“修复”了一个看似是定价错误的供应商数据，却没有先检查他们的官方网站。结果发现他们把最大促销折扣给了中档套餐，而不是最便宜的套餐。现在我在对数据库进行任何修改前，都会先对照来源进行验证。
- Svelte 5 + Astro 是绝佳组合，但生态系统仍在追赶中。有些在 React/Next 中只需一行代码就能实现的功能，目前还没有等价实现。不过这种权衡是值得的——产出更轻量，开发体验也真的很好。
试一试
HostingSift 已经上线，欢迎前往体验。你可以按主机类型筛选、比较供应商、查看当前价格。我仍在不断添加更多供应商和功能，如果发现有什么不对或有想法，欢迎在评论区告诉我。