为什么做一个 AI 资讯站？
AI 圈每天都有新闻——OpenAI 又发新模型了、Anthropic 有新能力了、某家创业公司获大额融资了……但信息散落在 Twitter、Hacker News、各个博客里，需要一个地方把它们收拢起来，一眼看完。
传统的做法是前后端全栈：数据库存、定时任务拉、模板引擎渲染。但现在有一种更轻量的方式：纯前端页面 + 外部 API 数据 + 一个定时脚本每天刷新一次推 CDN。这就是 AI 新闻雷达 的核心思路。
架构概览
前端页面
纯静态 HTML，Apple Keynote 暗黑风格 + Bento Grid 栅格布局。数据通过 <script> 标签内嵌 JSON 直接渲染，零后端依赖。
自动化程序
WorkBuddy 设置每天 9:00 自动运行 Python 脚本——拉取 API → 注入 HTML → 推送 COS。全程无人值守。
部署
腾讯云 COS 静态托管 + CDN。文件更新瞬间全网生效，成本趋近于零。
第一步：选一个好看的设计模板
不需要从零设计。AI 新闻雷达的模板是一套暗黑风格的 Apple Keynote 设计语言：
- 全局噪点纹理 — 纯黑背景不沉闷，用 SVG 噪点增加质感
- 液态玻璃卡片 — 半透明背景 + 12px 模糊 + 对角线高光
- Bento Grid 自适应栅格 — 每张卡片独立 hover 动效
- 板块色彩标签 — 模型蓝色 / 产品紫色 / 行业绿色 / 论文橙色 / 技巧红色
- Hero 径向渐变光晕 — 蓝色调从顶部扩散，呼应 AI 主题
💡 设计灵感：每一张资讯卡片都是"卡片即文章"——点击直达源链接，阅读原文无需额外跳转。score 用 ★ 星标可视化热度，publishedAt 自动转换为"3 小时前"这样人话时间。
第二步：对接数据 API
AI HOT 提供了免费的公开 REST API。核心端点是：
响应是标准 JSON，每条数据包含：
- title — 资讯标题
- summary — AI 生成的摘要
- url — 原文链接
- source — 来源（Hacker News / TechCrunch / OpenAI 官方博客等）
- category — 分类 slug（ai-models / ai-products / industry / paper / tip）
- score — 热度评分（0-100）
- publishedAt — 发布时间（ISO 8601）
第三步：写一个自动更新脚本
这是整个系统的关键。一个小巧的 Python 脚本，做三件事：
拉取数据
用 urllib 调 AI HOT API，拿到过去 24 小时的精选 JSON。注意要带浏览器 User-Agent，否则 API 的 nginx UA 黑名单会返回 403。
注入 HTML
HTML 模板里有一个占位符 __AI_DATA_PLACEHOLDER__（放在 <script id="ai-data"> 标签里）。脚本读取 HTML 文件，把 JSON 数据替换进去，保存。页面打开时，JavaScript 从嵌好的 JSON 直接渲染卡片，不需要任何异步请求——首屏即见，无网络抖动。
推送 CDN
用腾讯云 COS SDK（qcloud_cos）把更新后的 HTML 上传到对象存储，设置 CacheControl: no-cache 让 CDN 立即刷新。
第四步：设置 WorkBuddy 每日自动化
最后一步是把脚本"挂"起来。在 WorkBuddy 里创建一条自动化任务：
配置好之后，WorkBuddy 每天 9:00 准时执行：运行 update.py → AI HOT 拉数据 → 注入 HTML → 推 COS。全程无人值守，每天醒来网站就已经刷新好了。
🟢 效果：每天上午 9:00 自动抓取过去 24 小时全球 AI 资讯，分类展示在页面上。你只需要打开浏览器看一眼，就知道今天 AI 圈发生了什么。
复用这套模板
这种"纯前端 + 定时脚本注入数据 + CDN 托管"的模式可以复用到很多场景：
- 加密货币行情看板 — 拉 CoinGecko API，嵌入 HTML，每小时更新
- 天气预报面板 — 拉 OpenWeather API，优雅的天气卡片布局
- 产品发布日志 — 拉 GitHub Releases API，自动生成 changelog 页面
- 个人阅读摘要 — 拉 Pocket/Instapaper API，自动生成每日阅读推荐
关键优势：没有服务器成本、没有数据库维护、没有被攻击的风险。整个站点就是几个静态文件，CDN 分发到全球。