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

1. 为什么会做 StartNest#

我一直都非常依赖浏览器的主页&起始页，一开始我是使用的浏览器扩展，但是这类插件的多端同步比较麻烦，而且移动端浏览器扩展的支持较差。而且随着我自部署的项目&工具越来越多，我习惯性的把一些自部署的放在主页，而那些其他的常用链接放在书签栏，我迫切的需要一款合适的浏览器主页项目。

我最开始是使用了近半年 sun-panel 这个项目，我觉得它足够符合我的使用习惯，并且通过 docker 可以很简单的部署，而且我是自己使用就用不上那些复杂功能，但是有一次我的服务器宕机了一段时间，导致我用不了起始页了。这是我就在思考，与其相信我那些低价 vps 的在线率，不如去部署在 vercel、cloudflare 这样的平台上。

我去找了一圈这样的项目，可是遗憾的事都不太符合我的需求，于是就有了：StartNest。

设计之初我把它视作一个 基于 Cloudflare 的自托管私人起始页和书签工作台，用来管理常用链接、分组、界面偏好和 Web 面板。它不是那种公共导航站，更像是一个只为自己服务的浏览器入口。

Liebesfreud

StartNest

Waiting for api.github.com...

00K

Waiting...

2. StartNest 现在能做什么#

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

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

2.1 首页：时间、天气、搜索和链接入口#

StartNest 的首页保留了比较明确的起始页结构：顶部是时间、日期和天气信息，中间是搜索框，下面则是按分组整理的链接卡片。

搜索框支持在站内链接中检索，也可以直接跳转到搜索引擎。目前可以在 Bing 和 Google 之间切换，后续会添加自定义搜索引擎设置。对我来说，这种设计比较符合起始页的使用习惯：如果要去一个常用网站，就点卡片；如果临时想查东西，直接输入关键词就好。

天气组件是可选的。开启自动定位后，它会根据浏览器定位显示当前天气；如果不想让起始页获取位置，也可以直接关闭。这里没有做得特别复杂，只是放一个足够轻量的信息提示。

2.2 分组和链接：真正按照自己的习惯整理入口#

链接管理是 StartNest 最基础、也是最重要的部分。

现在它支持：

创建、编辑和删除分组；
为分组设置图标；
在分组下添加常用链接；
编辑链接标题、地址和描述；
调整分组和链接顺序；
通过编辑模式拖动链接排序。

我把编辑能力单独放在“编辑模式”里，是为了让日常使用时页面尽量干净。平时它就是一个普通起始页，点击卡片直接打开网站；需要整理时，再进入编辑模式，页面才会显示添加、编辑、删除和排序相关操作。

卡片图标也不只依赖网站 favicon，还可以使用内置图标、图片 URL，或者纯文字缩写。

2.3 Web 面板：把常用网页变成侧边工作区#

StartNest 里还有一个我自己很喜欢的功能：Web 面板。

有些网页我并不一定想作为普通链接打开，比如一些监控面板、在线工具、轻量文档、内部服务入口。它们更适合像一个侧边工作区一样，随时打开、随时切换。

所以 StartNest 支持在设置里添加 Web 面板，并为每个面板配置：

标题；
URL；
图标；
描述；
打开方式；
是否启用；
显示顺序。

如果目标网站允许被 iframe 嵌入，就可以直接以内嵌面板的形式打开；如果不允许，也可以配置成新标签页打开。这个功能没有试图绕过网站自己的安全策略，只是给那些适合嵌入的工具一个更顺手的位置。

2.4 外观设置：起始页应该看着舒服#

起始页是一个每天都会见到的页面，所以外观设置不是可有可无的小功能。

StartNest 目前支持：

浅色、深色、跟随系统 三种主题模式；
舒适 / 紧凑 两种卡片密度；
是否显示分组图标；
自定义全局壁纸；
调整壁纸遮罩强度；
调整背景模糊程度。

我没有把外观系统做得特别花。比起提供很多复杂主题，我更希望它能覆盖几类最常见的偏好：有人喜欢干净的纯色界面，有人喜欢放一张背景图；有人希望卡片更宽松，有人希望一屏里放下更多入口。

2.5 数据管理：导出、导入和自己掌控#

StartNest 是一个自托管项目，所以数据管理不能只停留在“存在数据库里”。

现在它支持通过 JSON 导出和导入配置，包括分组、链接、设置和 Web 面板。这样即使以后换部署环境，或者想把当前配置备份一份，也不需要去数据库里手动折腾。

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 的普通静态站点方式来理解。

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 数据库和必要的环境变量。

核心步骤大致是：

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

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

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

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

6. 如果你也想试试看#

项目已经开源在 GitHub 上：

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

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