「我的项目」基于Cloudflare的自托管起始页

1. 为什么会做 StartNest#

在做这个项目之前，我试过不少浏览器起始页和书签管理工具。有的页面做得很漂亮，但自定义空间有限；有的功能很完整，却又显得太重，打开之后像进入一个管理后台，而不是一个日常入口。

我想要的起始页，大概有几个很明确的要求：

• 常用链接要清楚：不是简单堆在一起，而是能按照用途分组；
• 编辑要顺手：添加、修改、排序这些操作不能太绕；
• 外观要可调：主题、壁纸、卡片密度这些细节会影响每天打开它时的感受；
• 数据要可控：最好能自己部署，能导出导入，不被某个平台绑定；
• 维护成本要低：我不想为了一个起始页长期养一台服务器。

所以 StartNest 从一开始就没有打算做成一个“大而全”的导航平台。它更接近一个个人工作台：把链接、搜索、天气、面板和外观配置都放在同一个地方，但尽量保持界面的克制和使用流程的直接。

2. StartNest 现在能做什么#

如果用一句话概括 StartNest，它就是一个可以自己部署、自己掌控数据的私人导航页。

但真正用起来之后，它不只是“放几个链接”这么简单。下面这些模块，是我目前比较满意的部分。

3. 为什么选择 Cloudflare#

StartNest 的部署目标是 Cloudflare Workers + Workers Assets + D1。

这套组合很适合这种小型私人 Web 工具：前端静态资源由 Workers Assets 托管，后端 API 跑在 Cloudflare Worker 上，数据存在 D1 数据库里。整个项目不需要单独准备服务器，也不需要维护传统意义上的后端运行环境。

我选择 Cloudflare 的原因也比较直接：

• 部署成本低：个人使用场景下，免费额度通常已经足够；
• 维护负担小：不用自己管理 VPS、进程、反向代理和数据库服务；
• 全球访问还不错：Cloudflare 的边缘网络本身就适合这种轻量应用；
• 前后端可以放在同一个 Worker 项目里：登录、API、静态资源和数据库访问都比较集中；
• D1 足够应付这种数据量：链接、分组、设置、面板这些结构并不复杂。

当然，这也意味着它不是一个纯静态站点。StartNest 需要 Worker 后端处理登录、API、D1 数据库访问和前端资源托管，所以部署时不能只按照 Cloudflare Pages 的普通静态站点方式来理解。

项目截图占位：当前仓库未包含该文原始截图文件，后续补回 7.webp 后可恢复。

4. 技术上，它是怎么组成的#

如果你也对实现方式感兴趣，StartNest 目前主要用到这些技术：

• React 19 作为前端 UI 框架；
• Vite 负责前端开发和构建；
• TypeScript 作为主要语言；
• Tailwind CSS 负责界面样式；
• React Router 处理页面路由；
• TanStack Query 管理前端请求和缓存；
• Zod 做数据结构校验；
• Cloudflare Workers 承载后端 API；
• Cloudflare D1 保存分组、链接、设置、用户资料和面板数据；
• Wrangler 负责本地开发、迁移和部署。

项目结构也比较清楚：

1
src/          前端应用
2
worker/       Cloudflare Worker 后端
3
migrations/   D1 数据库迁移 SQL
4
public/       静态资源与 service worker

后端接口主要围绕几个核心资源展开：分组、链接、排序、设置、导入导出、用户信息、Web 面板和天气数据。前端启动时会通过 /api/bootstrap 拉取基础数据，并在本地做缓存和状态更新。

登录方面，StartNest 使用管理员账号和密码进行访问控制，并通过 SESSION_SECRET 签名 session。它不是一个多用户平台，目标很明确：保护自己的私人起始页，不让它变成公开可编辑的导航站。

5. 部署和使用上的一些提醒#

StartNest 已经准备了 Cloudflare 部署相关配置，但部署前仍然需要自己准备 D1 数据库和必要的环境变量。

核心步骤大致是：

1. 创建 Cloudflare D1 数据库；
2. 按顺序执行 migrations/ 里的 SQL 迁移；
3. 在 Worker 项目中绑定 D1，binding 名称保持为 DB；
4. 配置 ADMIN_USERNAME、ADMIN_PASSWORD、SESSION_SECRET；
5. 使用 npm run build 构建前端；
6. 通过 Wrangler 或 Cloudflare 控制台部署 Worker。

这里最容易出问题的地方通常有两个：一个是 D1 binding 名称没有保持为 DB，另一个是没有配置完整的 Secrets。只要这两块处理好，后续使用基本就是普通 Web 应用的体验。

首次访问时会进入登录页，登录之后就可以开始创建分组、添加链接、设置外观和管理 Web 面板了。

项目截图占位：当前仓库未包含该文原始截图文件，后续补回 8.webp 后可恢复。

6. 现在的状态与后续想法#

StartNest 目前还是一个比较年轻的项目，但核心功能已经能支撑日常使用了。

我之后可能还会继续打磨这些方向：

• 优化移动端和小屏设备上的编辑体验；
• 给链接和面板增加更多整理方式；
• 让图标选择和壁纸配置更直观；
• 继续减少部署过程中的理解成本；
• 补充更多导入、备份和迁移相关的细节。

我对 StartNest 的期待并不是做成一个很大的产品。它更适合保持在一个私人工具的尺度里：功能够用，界面干净，数据可控，部署之后不需要经常操心。

7. 如果你也想试试看#

项目已经开源在 GitHub 上：

• GitHub：https://github.com/Liebesfreud/StartNest

如果你也想要一个基于 Cloudflare 的自托管起始页，希望把常用链接、搜索、天气、Web 面板和外观偏好都放在自己掌控的环境里，StartNest 应该会是一个值得试试的小工具。

它没有试图替代浏览器，也没有想成为一个复杂的书签系统。它只是把每天打开浏览器时最常见的那些入口，整理成一个更适合自己的页面。