[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f_qvbBkoxIjRw3RNfBDofcDaPR5Isd4KZrmaaSPoWMfc":3,"$fpgkw5e63nWtG8yJepIvscd3_tu0GHZtcSic1pH7ee5I":37},[4],{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":27,"sourceName":7,"sourceUrl":28,"status":29,"seoTitle":30,"seoDescription":30,"canonicalUrl":30,"isFeatured":31,"sno":32,"sortOrder":33,"publishedAt":34,"updatedAt":35,"createdAt":36},"1752c43a-156b-46de-b5ae-f4d4cd7af9dd","article","SitePad","sitepad-intro","你的新标签页，本该属于你自己 —— SitePad想做点不一样的事","每天打开浏览器，你第一眼看到的是什么？\n\n多半是一屏密密麻麻的资讯、热搜、推荐位，还有几个你从没点过的「快捷入口」。它们全都在替你决定「你该看什么」。\n\n而那个你亲手整理了好几年、每天真正要用的**收藏夹**，却被塞进了角落里一个不起眼的小箭头后面。\n\n收藏夹是你上网的「出发地」，新标签页是你每次开浏览器的「见面页」——可二十多年了，它俩从来没真正合到一块儿。\n\n于是我们做了 SitePad：**把你的收藏夹，直接变成新标签页。**\n\n但市面上做「新标签页」的插件不少，SitePad 到底不一样在哪？\n\n## 传统新标签页插件，常踩三个坑\n\n先说清楚，很多同类插件是怎么「解决一个问题、又制造新麻烦」的：\n\n**1. 要你注册账号。** 装好第一件事往往是「登录 \u002F 注册」，好像不交个邮箱就不配用。\n\n**2. 把你的收藏搬去它家服务器。** 为了多设备同步，它们会把你的收藏夹复制到自己的云端。结果是：你在浏览器里整理一份，在插件里又维护一份，慢慢变成两套互不同步的东西；哪天想换一个插件，还得从头整理。\n\n**3. 悄悄塞广告、推资讯。** 不少插件打着「美化新标签页」的旗号，页面里却塞满推荐内容和跳转入口——你以为换了张干净的脸，其实只是换了个更精致的广告位。\n\n说白了，很多插件还是在「替你管理、替你决定」。\n\n## SitePad 的三点不一样\n\n### 一、不复制你的收藏，直接用你已有的\n\nSitePad 不另起一套数据。它直接读取你浏览器里**现成的收藏夹**，你在浏览器里新增、删除、改名，新标签页立刻跟着变；在新标签页里的改动，也直接写回收藏夹。\n\n好处很实在：\n- **不用重复整理。** 你已经在浏览器里整理好的文件夹，原样出现，零迁移。\n- **换工具零成本。** 因为 SitePad 没有自己的「数据小金库」，你哪天想换别的，收藏夹还在浏览器里，纹丝不动。\n\n### 二、不要账号，不连服务器\n\nSitePad 完全在你自己的浏览器里运行，没有任何后台、不传任何数据到远程。\n\n- **不用注册登录**，装好即用。\n- **你的收藏只在你电脑上**，不存在「厂商的服务器」里。\n- **卸载即清零**，干干净净，没有任何远端残留。\n\n在大家都想「收集你」的时代，SitePad 选择「不收集你」。\n\n### 三、不塞广告，不推资讯\n\n打开 SitePad，你看到的只有一件事：**你收藏的网站**。\n\n没有推荐位，没有热搜榜，没有「猜你喜欢」。深色、干净、稳定，每天看几十次也不累。如果你想换浅色、换背景，设置里随手就能改——但绝不会有人替你做主塞点什么进来。\n\n## 操作？不用学\n\n我们没发明任何新手势。长按进编辑、右键改名字、拖动排序、拖到文件夹标题换位——**全是你平时就在用的习惯**。打开就能上手，不用看说明书。\n\n## 最后\n\n传统新标签页插件，大多是在「接管」你的第一屏；SitePad 只是把**本来就属于你的那一面**，原封不动地还给你。\n\n少一点管理成本，多一点打开速度。让新标签页，回到「打开网站」这件事本身。","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-30\u002F2ae2e798-cbf2-406b-965c-67840a25a384.jpg",[],[],"Srces工作室","https:\u002F\u002Fsrces.cn","f39339b1-aaa6-4e86-b0c2-a6e6a21113b5",{"id":18,"name":19,"slug":20,"description":21},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[23],{"id":24,"name":25,"slug":26},"82f427f8-6275-4cbb-bcac-cf1948488006","网页应用","web-app","前往体验","https:\u002F\u002Fapp.srces.cn\u002FSitePad","published",null,false,1,0,"2026-07-30T00:00:00.000Z","2026-07-30T05:16:06.921Z","2026-07-30T05:16:07.922Z",[38],{"id":39,"type":6,"title":40,"slug":41,"summary":42,"body":43,"coverUrl":44,"productScreenshots":45,"productLinks":46,"authorName":14,"authorUrl":15,"authorSubject":16,"category":30,"tags":47,"sourceLabel":65,"sourceName":66,"sourceUrl":67,"status":29,"seoTitle":30,"seoDescription":30,"canonicalUrl":30,"isFeatured":31,"sno":68,"sortOrder":33,"publishedAt":69,"updatedAt":70,"createdAt":71},"2c8a2431-6be0-4189-8074-f332db448b3c","Sited 2.0 焕新上线：更现代、更安全、更优雅的静态网页部署平台","sited-update","30 秒把想法变成可访问的网站，无需配置、上传即发布。网页部署，从未如此简单。","## 引言\n\nSited 是一个现代化的静态网页托管与部署平台，致力于让任何人都能在 30 秒内完成网页发布——无需服务器、无需命令行、无需域名配置。无论是个人作品集、课程项目、产品落地页，还是临时活动页，Sited 都让你\"上传即上线\"。\n\n经过一段时间的打磨，我们正式发布 **Sited 2.0**。本次改版不是一次简单的界面翻新，而是一次从**前端架构、构建部署到认证安全**的系统性重构。\n\n在保留\"极简发布\"核心理念的同时，我们让平台更快、更稳、更安全，也对老用户的历史数据做到了**完全平滑兼容**。\n\n## Sited 是什么？\n\nSited 的名字源自 \"Site it!\"——\"把它变成网站\"。它的价值主张始终如一：\n\n- **极简发布**：拖拽 \u002F 选择 \u002F 粘贴代码 \u002F 上传 ZIP，四种方式任选，30 秒拿到可访问链接。\n- **多文件项目**：自动识别文件夹结构，保留 `index.html` 入口与资源引用关系。\n- **自定义与分享**：自定义 slug、自定义子域名、自定义图标（favicon）、标题与描述（利于 SEO 与社交分享）。\n- **企业级底座**：基于 Supabase（PostgreSQL + Storage）与 Cloudflare 边缘网络，数据隔离由行级安全策略（RLS）强制保障。\n\n这些能力在 2.0 中全部保留，并在此基础上做了架构级增强。\n\n## 核心升级点\n\n### 2.1 前端架构：从原生多页到 Vue 3 + Vite SPA\n\n旧版 Sited 完全使用原生 JavaScript（ES6 模块）开发，每个功能对应一个独立 HTML 页面（`index.html`、`upload.html`、`my-pages.html`…），首页 `index.html` 体量高达约 **92 KB** 且大量内联脚本，维护成本与首屏体积都偏高。\n\n2.0 重构为 **Vue 3 + Vite 组件化单页应用（SPA）**：\n\n- 视图拆分为 `HomeView` \u002F `UploadView` \u002F `PagesView`（项目管理）\u002F `PublicPageView`，逻辑收敛到 `src\u002Flib`（认证、页面、公开页渲染等模块）。\n- Vite 负责 SFC 编译、依赖预构建与代码分割，产物更小、缓存更友好、首屏更快。\n- 引入 `vue-router` 进行类型化路由，引入 `ogl` 实现 WebGL 极光（Aurora）背景，视觉质感显著提升。\n\n整体请求与架构流程如下：\n\n```mermaid\nflowchart TD\n  U[用户浏览器] -->|HTTPS 请求| CF[Cloudflare 边缘网络]\n  CF --> W[Cloudflare Worker\u003Cbr\u002F>_worker.js]\n  W -->|静态资源 \u002Findex.html \u002Fassets| A[Cloudflare Assets\u003Cbr\u002F>Vite 构建产物]\n  W -->|\u002Fapi\u002Fauth\u002F* · \u002Fapi\u002Fgithub\u002F*| AUTH[服务端鉴权逻辑\u003Cbr\u002F>bcrypt · Resend · GitHub OAuth]\n  W -->|\u002Fslug 公开页访问| PG[(Supabase · pages 表)]\n  PG -->|页面元数据 + 静态文件| W\n  W -->|HTMLRewriter 注入与重写| U\n  AUTH -->|service_role key 仅服务端使用| SB[(Supabase\u003Cbr\u002F>Storage + DB)]\n  A -.->|前端仅持有 VITE_SUPABASE_URL \u002F ANON_KEY| U\n```\n\n### 2.2 构建与部署：从 `sed` 占位符到 Vite + Cloudflare Assets\n\n旧版通过手写 `build.sh`（或 `npm run build`）用 `sed` 命令对 HTML \u002F JS 做 `__SUPABASE_URL__` 等占位符替换，过程易错、不可复现，且会把后端密钥写进构建产物。\n\n2.0 改为标准 **Vite 构建管线**：\n\n- `vite build` 产出 `dist\u002F`，由 `wrangler.toml` 的 `[assets]` 指向 `.\u002Fdist`，静态资源由 **Cloudflare Assets** 直接分发（带缓存、带哈希文件名）。\n- Worker 仅保留 `main = \"dist\u002F_worker.js\"`，并把 `\u002F` 与 `\u002F:slug` 回退到 Vue 入口；其余资源走 Assets。\n- 构建即 `npm run build && wrangler deploy`，可复现、可缓存、可观测（`observability` 已开启）。\n\n### 2.3 路由升级：从 `#slug` 哈希到 `\u002Fslug` 干净路径\n\n旧版公开地址形如 `https:\u002F\u002Fsited.cn\u002F#abc123`（哈希路由）。2.0 改为**路径路由**：\n\n- slug 为 `123` 时，公开地址即 `https:\u002F\u002Fsited.cn\u002F123`——更优雅、更易分享、更利于 SEO，也更像\"一个真实站点\"。\n- 多文件项目支持路径式访问 `\u002F{slug}\u002F`，由 Worker 在边缘回源并注入资源重写。\n- 路由表（`src\u002Frouter.js`）清晰定义 `\u002F`、`\u002Fupload`、`\u002Fproject`（原\"我的页面\"升级为\"项目\"管理）、`\u002F:slug`。\n\n### 2.4 认证与安全：代际升级（本次改版的核心）\n\n这是 2.0 最本质的变化。旧版的认证存在两处结构性隐患：\n\n1. **密码哈希在浏览器端完成**（使用 `bcryptjs`），哈希逻辑暴露在客户端。\n2. 旧版 `wrangler.toml` 把 `SUPABASE_SERVICE_ROLE_KEY`、对象存储 `STORAGE_SECRET_KEY` 等**以明文写在 `[vars]` 配置中**，密钥随部署产物扩散，风险极高。\n\n2.0 将**所有敏感逻辑下沉到 Cloudflare Worker 服务端**（`public\u002F_worker.js`）：\n\n- **密码只在浏览器输入，仅发送至 Worker**；由 Worker 用 `bcrypt`（cost = 12）在服务端哈希后写入 `users` 表。前端永远拿不到密码哈希。\n- **Resend 发信 key、Supabase service-role key、GitHub secret、各类 `AUTH_*_SECRET` 全部作为 Worker secret**（`wrangler secret put`），永不进入前端代码、构建产物或仓库。前端仅持有 `VITE_SUPABASE_URL` 与 `VITE_SUPABASE_ANON_KEY`。\n- 新增**邮箱验证码注册**：6 位验证码由 Worker 生成、`SHA-256(AUTH_CODE_SECRET:code)` 哈希入库、经 Resend 发送；**10 分钟有效期、最多尝试 5 次、同邮箱 60 秒冷却、记录请求 IP**，从注册源头遏制滥用（旧版仅靠\"单 IP 限 3 账号\"）。\n- 新增 **GitHub OAuth 登录**：`state` Cookie 防 CSRF；授权码仅在 Worker 服务端交换，`access token` 绝不写入浏览器、数据库或日志；若 GitHub 已验证邮箱与现有 Sited 账号一致，自动关联并登录。\n- 会话从\"localStorage 明文保存登录态\"升级为 **HMAC 签名、`HttpOnly` + `Secure` + `SameSite=Lax` 的 `__Host-sited-session` Cookie**（7 天有效期）。前端只保存脱敏后的 `publicUser`（id \u002F email \u002F display_name）。\n\n新版认证与授权流程：\n\n```mermaid\nflowchart TD\n  subgraph 注册\n    R1[填写邮箱 \u002F 密码] --> R2[Worker 生成 6 位验证码\u003Cbr\u002F>SHA-256 哈希入库]\n    R2 --> R3[Resend 发送验证码邮件]\n    R3 --> R4[用户回填验证码]\n    R4 --> R5{验证码校验\u003Cbr\u002F>10min \u002F 5 次 \u002F 60s 冷却}\n    R5 -->|通过| R6[Worker bcrypt cost12 哈希\u003Cbr\u002F>写入 users 表]\n    R5 -->|失败| R4\n    R6 --> R7[签发 HMAC 会话 Cookie]\n  end\n  subgraph 登录\n    L1[邮箱 + 密码] --> L2[Worker bcrypt.compare]\n    L2 -->|成功| L3[签发 __Host-sited-session]\n  end\n  subgraph GitHub 登录\n    G1[跳转 GitHub 授权] --> G2[Worker 服务端交换 code]\n    G2 --> G3[读取邮箱 \u002F 资料]\n    G3 --> G4[关联或新建账号]\n    G4 --> L3\n  end\n  L3 --> S[前端仅保存 publicUser\u003Cbr\u002F>无密码 \u002F 无密钥]\n```\n\n### 2.5 公开页面渲染：边缘 HTMLRewriter 管线\n\n旧版的资源关联依赖**浏览器端 Blob URL 重写**，复杂项目下偶有资源加载异常。\n\n2.0 在 Worker 边缘用 **`HTMLRewriter`** 统一处理公开页：\n\n- 自动注入 `\u003Cbase href=\"\u002F{slug}\u002F\">`，并将页面内 `a[href]`、`link[href]`、`script[src]`、`img[src]`、`source`、`video`、`audio`、`srcset`、`style` 中的 `url()` 全部重写为带 slug 前缀的路径，确保多文件项目的图片 \u002F CSS \u002F JS 正确加载。\n- 注入可选水印（\"Powered by Sited\"）、微信底部安全区适配、页面内锚点平滑滚动。\n- 对页面元数据做 **5 分钟内存缓存**，降低 Supabase 查询压力。\n\n页面发布与访问流程：\n\n```mermaid\nflowchart TD\n  Req[浏览器请求 \u002Fslug 或 \u002Fslug\u002F] --> W[Worker 路由]\n  W -->|单文件项目| Q1[查询 pages 表\u003Cbr\u002F>取 root_html_path \u002F filename]\n  Q1 --> F1[读取 legacy HTML 内容]\n  F1 --> R1[前端 prepareHostedHtml\u003Cbr\u002F>注入 base \u002F 重写资源]\n  R1 --> D1[iframe srcdoc 渲染]\n  W -->|多文件项目| Q2[查询 pages + assets_map]\n  Q2 --> F2[回源 static-files 存储桶]\n  F2 --> R2[HTMLRewriter 注入 base\u003Cbr\u002F>重写 a\u002Flink\u002Fscript\u002Fimg...]\n  R2 --> D2[iframe \u002Fsrc 渲染]\n  R1 --> WM[可选注入 Powered by Sited 水印]\n  R2 --> WM\n```\n\n### 2.6 数据向后兼容：老用户零成本迁移\n\n这是很多企业级重构最容易翻车的地方，Sited 2.0 做了重点保障：\n\n- 保留原有 `users`、`pages` 表字段与 `static-files` Storage 桶路径。\n- **旧的单文件 JSON 部署内容、旧的多文件记录，新的公开页都可继续读取与渲染**。\n- 老用户无需重新上传，历史页面与账号数据完整保留。\n\n```mermaid\nflowchart LR\n  OLD[(旧版数据\u003Cbr\u002F>users \u002F pages \u002F static-files)] -->|字段与桶路径保持不变| NEW[Sited 2.0 公开页]\n  NEW -->|单文件 JSON 内容| READ1[直接读取渲染]\n  NEW -->|多文件记录 + assets_map| READ2[边缘回源重写渲染]\n```\n\n## 功能特性总览\n\n| 能力 | 说明 |\n| --- | --- |\n| 多方式上传 | 文件选择、拖拽文件夹、ZIP 解压、代码粘贴（实时预览）四种输入，覆盖从新手到开发者的全部场景 |\n| 自定义链接 | 自定义易记 slug；登录用户可设自定义子域名 `*.sited.cn` |\n| 项目管理（原\"我的页面\"） | 统一\"项目\"视图，查看 \u002F 复制链接 \u002F 编辑 \u002F 删除自己的全部页面 |\n| 多文件项目 | 自动识别目录结构，主 HTML 入口 + `\u003Cbase>` 资源重写，复杂站点也能正确托管 |\n| 实时预览 | 代码模式下所见即所得，右侧 iframe 即时渲染 |\n| 图标与品牌 | 自定义 favicon \u002F Apple Touch Icon，浏览器标签与收藏夹视觉识别 |\n| 水印控制 | 可选 \"Powered by Sited\" 水印，发布或编辑时可开关 |\n| 暗色模式 | 跟随系统或手动切换，偏好本地保存 |\n| 响应式 | 移动优先，手机 \u002F 平板 \u002F 桌面一致体验 |\n| 空间 \u002F 子域名 | `space` 表驱动的文件空间托管，支持自定义子域名直出站点 |\n| 页面图谱 | 新增 `page_graph`（JSONB），记录多 HTML 页面项目内部的跳转关系 |\n\n## 新增能力\n\n- **邮箱验证码注册**：从源头防恶意注册，免除\"单 IP 限 3 账号\"的粗放限制。\n- **GitHub OAuth 登录**：开发者一键登录 \u002F 关联，授权码仅在服务端交换。\n- **服务端认证 Worker**：bcrypt 服务端哈希、HMAC 会话 Cookie、Resend 发信、GitHub 回调，全部收敛到边缘。\n- **WebGL 极光背景（ogl）**：首页与关键界面的现代视觉质感。\n- **现代设计系统**：重构的 `SITED \u002F ACCESS` 登录模态、底部导航（`bottom-navigation`）、统一的 CSS 变量与组件体系。\n- **路径式公开地址**：`\u002Fslug` 取代 `#slug`，分享与传播更体面。\n\n## 旧版 vs 新版 对比一览\n\n| 维度 | 旧版（v1.0） | 新版（v2.0） |\n| --- | --- | --- |\n| 前端架构 | 原生 JS 多页（首页约 92 KB 内联） | Vue 3 + Vite 组件化 SPA |\n| 构建方式 | `build.sh` + `sed` 占位符替换 | Vite 打包 + Cloudflare Assets 分发 |\n| 路由形式 | 哈希路由 `#slug` | 路径路由 `\u002Fslug` |\n| 密码哈希 | 浏览器端 `bcryptjs` | Worker 服务端 `bcrypt`（cost 12） |\n| 密钥管理 | service role \u002F 存储密钥明文写入 `wrangler.toml [vars]` | 全部为 Worker secret，前端仅持 anon key |\n| 注册防滥用 | 单 IP 限 3 账号 | 邮箱验证码 + 尝试次数 \u002F 冷却 \u002F IP 记录 |\n| 第三方登录 | 无 | GitHub OAuth（state 防 CSRF） |\n| 会话机制 | localStorage 明文 | HMAC 签名 `HttpOnly` Cookie |\n| 公开页渲染 | 浏览器端 Blob URL 重写 | 边缘 `HTMLRewriter` 注入与重写 |\n| 数据兼容 | — | 兼容旧单文件 \u002F 多文件记录 |\n| 文档系统 | docs 路由 \u002F 文档 Wiki | 未迁移进新构建，聚焦核心托管 |\n| 视觉质感 | 基础样式 | WebGL 极光背景 + 现代设计系统 |\n\n## 升级对老用户意味着什么\n\n- **无需任何操作**：你的账号、页面、历史部署在 2.0 中照常可访问，链接形式从 `#slug` 平滑过渡到 `\u002Fslug`，旧链接逻辑仍被兼容读取。\n- **更安全**：即便曾经使用旧版，你的密码在新架构下也只会在服务端被哈希与校验；注册新账号将获得邮箱验证码保护。\n- **更顺手**：项目管理升级为\"项目\"视图，登录支持 GitHub 一键关联，界面与分享体验全面现代化。\n- **更聚焦**：我们暂时将文档（docs）系统移出核心构建，集中资源把\"静态网页托管 \u002F 部署\"这一主航道做到极致。\n\n## 技术栈小结\n\n**前端**：Vue 3.5 · vue-router 4 · Vite 7 · ogl（WebGL 背景）\n**后端 \u002F 边缘**：Cloudflare Workers（`_worker.js`）+ Cloudflare Assets\n**数据 \u002F 存储**：Supabase（PostgreSQL + Storage，RLS 数据隔离）\n**认证**：服务端 bcrypt（cost 12）· Resend 邮箱验证码 · GitHub OAuth · HMAC 会话 Cookie\n**依赖**：`@supabase\u002Fsupabase-js` · `bcryptjs` · `jszip` · `vue` · `vue-router` · `ogl`\n\n## 结语\n\nSited 2.0 是一次从内核到边界的重构：用 Vue 3 + Vite 让产品更好维护、更快；用路径路由与边缘渲染让发布更体面；用服务端认证与密钥隔离让平台更值得托付。更重要的是，它做到了**对老用户历史数据的完全兼容**——你过去发布的每一个页面，今天依然在线。\n\n把想法变成网站，现在比以往任何时候都更简单、更安全。\n\n**Have an idea? —— Site it.**\n","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-20\u002F291cb55f-233d-4d34-b9e8-70a64d2d3564.jpg",[],[],[48,49,53,57,61],{"id":24,"name":25,"slug":26},{"id":50,"name":51,"slug":52},"a202d639-99a6-488a-a712-4d4c6ffd7e15","开发","dev",{"id":54,"name":55,"slug":56},"7c76bfc2-f80f-4ee0-a95d-27bd8708b434","技术","slug",{"id":58,"name":59,"slug":60},"4c2bbea6-eab7-40a8-8447-1de478ff7749","分析","analyse",{"id":62,"name":63,"slug":64},"bfb9750c-40cf-487e-81ad-dbac5f22ffcd","SaaS","saas","前往","sited.cn","https:\u002F\u002Fsited.cn",5,"2026-07-10T00:00:00.000Z","2026-07-20T13:04:14.112Z","2026-07-20T11:57:43.637Z"]