网站构建日志
摄影集构建
2026年6月3日,多云,很他妈闷和晒!!手一天都感觉粘粘的,头晕头痛,感觉容易抑郁自闭。
架构敲定。在这个系统中,Cloudflare R2 负责“物理仓储”,Notion 负责“账本记录”,Worker 负责“物流调度”,Astro 负责“橱窗展示”。
里程碑一:基础设施配置(0 代码基建)
这是所有数据流转的地基,必须最先打好。
1. 部署 R2 存储桶:建桶与绑域名: 在 Cloudflare 创建 Bucket,绑定你自己的域名以获取干净的图片直链。关键防坑(CORS 配置): 必须配置跨域资源共享(CORS)规则。因为你的上传面板是在本地运行的,不配置 CORS,浏览器会从底层拦截上传请求。
2. 搭建 Notion 数据库:字段定义: 建立一个 Database,设定核心字段:Title(标题)、Date(日期)、Location(如杭州、深圳)、Camera(设备参数)以及最关键的 ImageURL(存放 R2 链接)。授权获取: 申请 Notion API Integration Token,并将数据库共享给这个 Integration。
里程碑二:核心中枢开发(Cloudflare Worker 脚本)
这是整个架构的大脑,一段部署在边缘节点的 JavaScript/TypeScript 代码。
1. 极简鉴权拦截: 脚本入口处硬编码一串复杂密钥。任何请求如果不带这把钥匙,直接返回 403 拒绝,保护你的云端资产不被恶意消耗。
2. 接收与转存: 接收来自本地的 WebP 图片流,调用 Cloudflare 内部 API 极速写入 R2,并拼接出最终的外部访问直链。
3. 数据落库: 拿到 R2 直链后,连同用户填写的拍摄地、标题等信息,组装成 JSON 格式,向 Notion API 发起 POST 请求,写入新行。
4. 独立触发点(防踩踏): 不在上传图片时自动触发网站重构。而是单独暴露一个 ?action=build的接口,等你一天的工作结束,发个请求统一触发构建平台。
里程碑三:本地控制台开发(“发车台”单文件)
这是一个存在于你电脑本地的独立 HTML 文件,是这套系统唯一的后台操作界面。
1. 性能前置(Canvas 压缩): 核心逻辑所在。读取你拖拽进来的几兆甚至十几兆的原图,利用浏览器原生的 Canvas API,瞬间在本地将其重绘并压缩为 1MB 以内的 WebP 格式。彻底击穿 Worker 的 10MB 体积墙。
2. 表单与组装: 提供几个极简的输入框,用于填写元数据(快门、光圈、地点等)。
3. 极简视觉交互: 抛弃沉重的后台框架。我会直接用 Tailwind CSS 为你写一个干净的、带有毛玻璃(Glassmorphism)通透质感的单页面,保持整体工具链的视觉极简。
4. 异步推送: 点击上传后,携带 API 密钥,将压缩好的图片和文本数据打包发送给 Worker。
里程碑四:前端消费与重构(Astro 抓取与渲染)
这是最终面向用户的部分。
1. 编写抓取脚本: 在 Astro 项目中编写请求 Notion 数据的函数。必须在这里加入分页逻辑和错误重试(Retry)机制,防范 Notion API 脆弱的限流策略导致构建崩溃。
2. 二级页面渲染: 在你的图库页面组件中,读取拉取到的数据列表,将 R2 的图片 URL 喂给 Astro 的 <img> 标签,最终编译成极致纯粹的静态 HTML 文件。