## 引言 Sited 是一个现代化的静态网页托管与部署平台，致力于让任何人都能在 30 秒内完成网页发布——无需服务器、无需命令行、无需域名配置。无论是个人作品集、课程项目、产品落地页，还是临时活动页，Sited 都让你"上传即上线"。经过一段时间的打磨，我们正式发布 **Sited 2.0**。本次改版不是一次简单的界面翻新，而是一次从**前端架构、构建部署到认证安全**的系统性重构。在保留"极简发布"核心理念的同时，我们让平台更快、更稳、更安全，也对老用户的历史数据做到了**完全平滑兼容**。 ## Sited 是什么？ Sited 的名字源自 "Site it!"——"把它变成网站"。它的价值主张始终如一： - **极简发布**：拖拽 / 选择 / 粘贴代码 / 上传 ZIP，四种方式任选，30 秒拿到可访问链接。 - **多文件项目**：自动识别文件夹结构，保留 `index.html` 入口与资源引用关系。 - **自定义与分享**：自定义 slug、自定义子域名、自定义图标（favicon）、标题与描述（利于 SEO 与社交分享）。 - **企业级底座**：基于 Supabase（PostgreSQL + Storage）与 Cloudflare 边缘网络，数据隔离由行级安全策略（RLS）强制保障。这些能力在 2.0 中全部保留，并在此基础上做了架构级增强。 ## 核心升级点 ### 2.1 前端架构：从原生多页到 Vue 3 + Vite SPA 旧版 Sited 完全使用原生 JavaScript（ES6 模块）开发，每个功能对应一个独立 HTML 页面（`index.html`、`upload.html`、`my-pages.html`…），首页 `index.html` 体量高达约 **92 KB** 且大量内联脚本，维护成本与首屏体积都偏高。 2.0 重构为 **Vue 3 + Vite 组件化单页应用（SPA）**： - 视图拆分为 `HomeView` / `UploadView` / `PagesView`（项目管理）/ `PublicPageView`，逻辑收敛到 `src/lib`（认证、页面、公开页渲染等模块）。 - Vite 负责 SFC 编译、依赖预构建与代码分割，产物更小、缓存更友好、首屏更快。 - 引入 `vue-router` 进行类型化路由，引入 `ogl` 实现 WebGL 极光（Aurora）背景，视觉质感显著提升。整体请求与架构流程如下： ```mermaid flowchart TD U[用户浏览器] -->|HTTPS 请求| CF[Cloudflare 边缘网络] CF --> W[Cloudflare Worker
_worker.js] W -->|静态资源 /index.html /assets| A[Cloudflare Assets
Vite 构建产物] W -->|/api/auth/* · /api/github/*| AUTH[服务端鉴权逻辑
bcrypt · Resend · GitHub OAuth] W -->|/slug 公开页访问| PG[(Supabase · pages 表)] PG -->|页面元数据 + 静态文件| W W -->|HTMLRewriter 注入与重写| U AUTH -->|service_role key 仅服务端使用| SB[(Supabase
Storage + DB)] A -.->|前端仅持有 VITE_SUPABASE_URL / ANON_KEY| U ``` ### 2.2 构建与部署：从 `sed` 占位符到 Vite + Cloudflare Assets 旧版通过手写 `build.sh`（或 `npm run build`）用 `sed` 命令对 HTML / JS 做 `__SUPABASE_URL__` 等占位符替换，过程易错、不可复现，且会把后端密钥写进构建产物。 2.0 改为标准 **Vite 构建管线**： - `vite build` 产出 `dist/`，由 `wrangler.toml` 的 `[assets]` 指向 `./dist`，静态资源由 **Cloudflare Assets** 直接分发（带缓存、带哈希文件名）。 - Worker 仅保留 `main = "dist/_worker.js"`，并把 `/` 与 `/:slug` 回退到 Vue 入口；其余资源走 Assets。 - 构建即 `npm run build && wrangler deploy`，可复现、可缓存、可观测（`observability` 已开启）。 ### 2.3 路由升级：从 `#slug` 哈希到 `/slug` 干净路径旧版公开地址形如 `https://sited.cn/#abc123`（哈希路由）。2.0 改为**路径路由**： - slug 为 `123` 时，公开地址即 `https://sited.cn/123`——更优雅、更易分享、更利于 SEO，也更像"一个真实站点"。 - 多文件项目支持路径式访问 `/{slug}/`，由 Worker 在边缘回源并注入资源重写。 - 路由表（`src/router.js`）清晰定义 `/`、`/upload`、`/project`（原"我的页面"升级为"项目"管理）、`/:slug`。 ### 2.4 认证与安全：代际升级（本次改版的核心）这是 2.0 最本质的变化。旧版的认证存在两处结构性隐患： 1. **密码哈希在浏览器端完成**（使用 `bcryptjs`），哈希逻辑暴露在客户端。 2. 旧版 `wrangler.toml` 把 `SUPABASE_SERVICE_ROLE_KEY`、对象存储 `STORAGE_SECRET_KEY` 等**以明文写在 `[vars]` 配置中**，密钥随部署产物扩散，风险极高。 2.0 将**所有敏感逻辑下沉到 Cloudflare Worker 服务端**（`public/_worker.js`）： - **密码只在浏览器输入，仅发送至 Worker**；由 Worker 用 `bcrypt`（cost = 12）在服务端哈希后写入 `users` 表。前端永远拿不到密码哈希。 - **Resend 发信 key、Supabase service-role key、GitHub secret、各类 `AUTH_*_SECRET` 全部作为 Worker secret**（`wrangler secret put`），永不进入前端代码、构建产物或仓库。前端仅持有 `VITE_SUPABASE_URL` 与 `VITE_SUPABASE_ANON_KEY`。 - 新增**邮箱验证码注册**：6 位验证码由 Worker 生成、`SHA-256(AUTH_CODE_SECRET:code)` 哈希入库、经 Resend 发送；**10 分钟有效期、最多尝试 5 次、同邮箱 60 秒冷却、记录请求 IP**，从注册源头遏制滥用（旧版仅靠"单 IP 限 3 账号"）。 - 新增 **GitHub OAuth 登录**：`state` Cookie 防 CSRF；授权码仅在 Worker 服务端交换，`access token` 绝不写入浏览器、数据库或日志；若 GitHub 已验证邮箱与现有 Sited 账号一致，自动关联并登录。 - 会话从"localStorage 明文保存登录态"升级为 **HMAC 签名、`HttpOnly` + `Secure` + `SameSite=Lax` 的 `__Host-sited-session` Cookie**（7 天有效期）。前端只保存脱敏后的 `publicUser`（id / email / display_name）。新版认证与授权流程： ```mermaid flowchart TD subgraph 注册 R1[填写邮箱 / 密码] --> R2[Worker 生成 6 位验证码
SHA-256 哈希入库] R2 --> R3[Resend 发送验证码邮件] R3 --> R4[用户回填验证码] R4 --> R5{验证码校验
10min / 5 次 / 60s 冷却} R5 -->|通过| R6[Worker bcrypt cost12 哈希
写入 users 表] R5 -->|失败| R4 R6 --> R7[签发 HMAC 会话 Cookie] end subgraph 登录 L1[邮箱 + 密码] --> L2[Worker bcrypt.compare] L2 -->|成功| L3[签发 __Host-sited-session] end subgraph GitHub 登录 G1[跳转 GitHub 授权] --> G2[Worker 服务端交换 code] G2 --> G3[读取邮箱 / 资料] G3 --> G4[关联或新建账号] G4 --> L3 end L3 --> S[前端仅保存 publicUser
无密码 / 无密钥] ``` ### 2.5 公开页面渲染：边缘 HTMLRewriter 管线旧版的资源关联依赖**浏览器端 Blob URL 重写**，复杂项目下偶有资源加载异常。 2.0 在 Worker 边缘用 **`HTMLRewriter`** 统一处理公开页： - 自动注入 ``，并将页面内 `a[href]`、`link[href]`、`script[src]`、`img[src]`、`source`、`video`、`audio`、`srcset`、`style` 中的 `url()` 全部重写为带 slug 前缀的路径，确保多文件项目的图片 / CSS / JS 正确加载。 - 注入可选水印（"Powered by Sited"）、微信底部安全区适配、页面内锚点平滑滚动。 - 对页面元数据做 **5 分钟内存缓存**，降低 Supabase 查询压力。页面发布与访问流程： ```mermaid flowchart TD Req[浏览器请求 /slug 或 /slug/] --> W[Worker 路由] W -->|单文件项目| Q1[查询 pages 表
取 root_html_path / filename] Q1 --> F1[读取 legacy HTML 内容] F1 --> R1[前端 prepareHostedHtml
注入 base / 重写资源] R1 --> D1[iframe srcdoc 渲染] W -->|多文件项目| Q2[查询 pages + assets_map] Q2 --> F2[回源 static-files 存储桶] F2 --> R2[HTMLRewriter 注入 base
重写 a/link/script/img...] R2 --> D2[iframe /src 渲染] R1 --> WM[可选注入 Powered by Sited 水印] R2 --> WM ``` ### 2.6 数据向后兼容：老用户零成本迁移这是很多企业级重构最容易翻车的地方，Sited 2.0 做了重点保障： - 保留原有 `users`、`pages` 表字段与 `static-files` Storage 桶路径。 - **旧的单文件 JSON 部署内容、旧的多文件记录，新的公开页都可继续读取与渲染**。 - 老用户无需重新上传，历史页面与账号数据完整保留。 ```mermaid flowchart LR OLD[(旧版数据
users / pages / static-files)] -->|字段与桶路径保持不变| NEW[Sited 2.0 公开页] NEW -->|单文件 JSON 内容| READ1[直接读取渲染] NEW -->|多文件记录 + assets_map| READ2[边缘回源重写渲染] ``` ## 功能特性总览 | 能力 | 说明 | | --- | --- | | 多方式上传 | 文件选择、拖拽文件夹、ZIP 解压、代码粘贴（实时预览）四种输入，覆盖从新手到开发者的全部场景 | | 自定义链接 | 自定义易记 slug；登录用户可设自定义子域名 `*.sited.cn` | | 项目管理（原"我的页面"） | 统一"项目"视图，查看 / 复制链接 / 编辑 / 删除自己的全部页面 | | 多文件项目 | 自动识别目录结构，主 HTML 入口 + `` 资源重写，复杂站点也能正确托管 | | 实时预览 | 代码模式下所见即所得，右侧 iframe 即时渲染 | | 图标与品牌 | 自定义 favicon / Apple Touch Icon，浏览器标签与收藏夹视觉识别 | | 水印控制 | 可选 "Powered by Sited" 水印，发布或编辑时可开关 | | 暗色模式 | 跟随系统或手动切换，偏好本地保存 | | 响应式 | 移动优先，手机 / 平板 / 桌面一致体验 | | 空间 / 子域名 | `space` 表驱动的文件空间托管，支持自定义子域名直出站点 | | 页面图谱 | 新增 `page_graph`（JSONB），记录多 HTML 页面项目内部的跳转关系 | ## 新增能力 - **邮箱验证码注册**：从源头防恶意注册，免除"单 IP 限 3 账号"的粗放限制。 - **GitHub OAuth 登录**：开发者一键登录 / 关联，授权码仅在服务端交换。 - **服务端认证 Worker**：bcrypt 服务端哈希、HMAC 会话 Cookie、Resend 发信、GitHub 回调，全部收敛到边缘。 - **WebGL 极光背景（ogl）**：首页与关键界面的现代视觉质感。 - **现代设计系统**：重构的 `SITED / ACCESS` 登录模态、底部导航（`bottom-navigation`）、统一的 CSS 变量与组件体系。 - **路径式公开地址**：`/slug` 取代 `#slug`，分享与传播更体面。 ## 旧版 vs 新版对比一览 | 维度 | 旧版（v1.0） | 新版（v2.0） | | --- | --- | --- | | 前端架构 | 原生 JS 多页（首页约 92 KB 内联） | Vue 3 + Vite 组件化 SPA | | 构建方式 | `build.sh` + `sed` 占位符替换 | Vite 打包 + Cloudflare Assets 分发 | | 路由形式 | 哈希路由 `#slug` | 路径路由 `/slug` | | 密码哈希 | 浏览器端 `bcryptjs` | Worker 服务端 `bcrypt`（cost 12） | | 密钥管理 | service role / 存储密钥明文写入 `wrangler.toml [vars]` | 全部为 Worker secret，前端仅持 anon key | | 注册防滥用 | 单 IP 限 3 账号 | 邮箱验证码 + 尝试次数 / 冷却 / IP 记录 | | 第三方登录 | 无 | GitHub OAuth（state 防 CSRF） | | 会话机制 | localStorage 明文 | HMAC 签名 `HttpOnly` Cookie | | 公开页渲染 | 浏览器端 Blob URL 重写 | 边缘 `HTMLRewriter` 注入与重写 | | 数据兼容 | — | 兼容旧单文件 / 多文件记录 | | 文档系统 | docs 路由 / 文档 Wiki | 未迁移进新构建，聚焦核心托管 | | 视觉质感 | 基础样式 | WebGL 极光背景 + 现代设计系统 | ## 升级对老用户意味着什么 - **无需任何操作**：你的账号、页面、历史部署在 2.0 中照常可访问，链接形式从 `#slug` 平滑过渡到 `/slug`，旧链接逻辑仍被兼容读取。 - **更安全**：即便曾经使用旧版，你的密码在新架构下也只会在服务端被哈希与校验；注册新账号将获得邮箱验证码保护。 - **更顺手**：项目管理升级为"项目"视图，登录支持 GitHub 一键关联，界面与分享体验全面现代化。 - **更聚焦**：我们暂时将文档（docs）系统移出核心构建，集中资源把"静态网页托管 / 部署"这一主航道做到极致。 ## 技术栈小结 **前端**：Vue 3.5 · vue-router 4 · Vite 7 · ogl（WebGL 背景） **后端 / 边缘**：Cloudflare Workers（`_worker.js`）+ Cloudflare Assets **数据 / 存储**：Supabase（PostgreSQL + Storage，RLS 数据隔离） **认证**：服务端 bcrypt（cost 12）· Resend 邮箱验证码 · GitHub OAuth · HMAC 会话 Cookie **依赖**：`@supabase/supabase-js` · `bcryptjs` · `jszip` · `vue` · `vue-router` · `ogl` ## 结语 Sited 2.0 是一次从内核到边界的重构：用 Vue 3 + Vite 让产品更好维护、更快；用路径路由与边缘渲染让发布更体面；用服务端认证与密钥隔离让平台更值得托付。更重要的是，它做到了**对老用户历史数据的完全兼容**——你过去发布的每一个页面，今天依然在线。把想法变成网站，现在比以往任何时候都更简单、更安全。 **Have an idea? —— Site it.**

Sited 2.0 焕新上线：更现代、更安全、更优雅的静态网页部署平台