Sited 2.0 焕新上线：更现代、更安全、更优雅的静态网页部署平台
30 秒把想法变成可访问的网站，无需配置、上传即发布。网页部署，从未如此简单。
引言
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）背景，视觉质感显著提升。
整体请求与架构流程如下：
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 最本质的变化。旧版的认证存在两处结构性隐患：
- 密码哈希在浏览器端完成（使用
bcryptjs），哈希逻辑暴露在客户端。 - 旧版
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 登录：
stateCookie 防 CSRF；授权码仅在 Worker 服务端交换，access token绝不写入浏览器、数据库或日志；若 GitHub 已验证邮箱与现有 Sited 账号一致，自动关联并登录。 - 会话从"localStorage 明文保存登录态"升级为 HMAC 签名、
HttpOnly+Secure+SameSite=Lax的__Host-sited-sessionCookie（7 天有效期）。前端只保存脱敏后的publicUser（id / email / display_name）。
新版认证与授权流程：
2.5 公开页面渲染：边缘 HTMLRewriter 管线
旧版的资源关联依赖浏览器端 Blob URL 重写，复杂项目下偶有资源加载异常。
2.0 在 Worker 边缘用 HTMLRewriter 统一处理公开页：
- 自动注入
<base href="/{slug}/">，并将页面内a[href]、link[href]、script[src]、img[src]、source、video、audio、srcset、style中的url()全部重写为带 slug 前缀的路径，确保多文件项目的图片 / CSS / JS 正确加载。 - 注入可选水印（“Powered by Sited”）、微信底部安全区适配、页面内锚点平滑滚动。
- 对页面元数据做 5 分钟内存缓存，降低 Supabase 查询压力。
页面发布与访问流程：
2.6 数据向后兼容：老用户零成本迁移
这是很多企业级重构最容易翻车的地方，Sited 2.0 做了重点保障：
- 保留原有
users、pages表字段与static-filesStorage 桶路径。 - 旧的单文件 JSON 部署内容、旧的多文件记录，新的公开页都可继续读取与渲染。
- 老用户无需重新上传，历史页面与账号数据完整保留。
功能特性总览
| 能力 | 说明 |
|---|---|
| 多方式上传 | 文件选择、拖拽文件夹、ZIP 解压、代码粘贴（实时预览）四种输入，覆盖从新手到开发者的全部场景 |
| 自定义链接 | 自定义易记 slug；登录用户可设自定义子域名 *.sited.cn |
| 项目管理（原"我的页面"） | 统一"项目"视图，查看 / 复制链接 / 编辑 / 删除自己的全部页面 |
| 多文件项目 | 自动识别目录结构，主 HTML 入口 + <base> 资源重写，复杂站点也能正确托管 |
| 实时预览 | 代码模式下所见即所得，右侧 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.
