TUTORIAL · 实战教程

零代码做一个每天
自动更新的 AI 资讯站

选模板 → 配 API → 设自动化 → 上线,四步搞定一个漂亮的、每天自动刷新内容的 AI 新闻站点,全程不需要写后端。

📅 2026-06-25 🏷️ AI 工具 · 自动化 · 前端 ⏱️ 约 8 分钟

为什么做一个 AI 资讯站?

AI 圈每天都有新闻——OpenAI 又发新模型了、Anthropic 有新能力了、某家创业公司获大额融资了……但信息散落在 Twitter、Hacker News、各个博客里,需要一个地方把它们收拢起来,一眼看完。

传统的做法是前后端全栈:数据库存、定时任务拉、模板引擎渲染。但现在有一种更轻量的方式:纯前端页面 + 外部 API 数据 + 一个定时脚本每天刷新一次推 CDN。这就是 AI 新闻雷达 的核心思路。

架构概览

📡

数据源

对接 AI HOT 公开 API,免费、无需注册。每天精选全球 AI 资讯,按模型 / 产品 / 行业 / 论文 / 技巧五板块分类。

🎨

前端页面

纯静态 HTML,Apple Keynote 暗黑风格 + Bento Grid 栅格布局。数据通过 <script> 标签内嵌 JSON 直接渲染,零后端依赖。

🤖

自动化程序

WorkBuddy 设置每天 9:00 自动运行 Python 脚本——拉取 API → 注入 HTML → 推送 COS。全程无人值守。

☁️

部署

腾讯云 COS 静态托管 + CDN。文件更新瞬间全网生效,成本趋近于零。

第一步:选一个好看的设计模板

不需要从零设计。AI 新闻雷达的模板是一套暗黑风格的 Apple Keynote 设计语言:

💡 设计灵感:每一张资讯卡片都是"卡片即文章"——点击直达源链接,阅读原文无需额外跳转。score 用 ★ 星标可视化热度,publishedAt 自动转换为"3 小时前"这样人话时间。

第二步:对接数据 API

AI HOT 提供了免费的公开 REST API。核心端点是:

# 拉取过去 24 小时精选资讯(mode=selected),最多 100 条 GET https://aihot.virxact.com/api/public/items?mode=selected&since={ISO时间}&take=100

响应是标准 JSON,每条数据包含:

第三步:写一个自动更新脚本

这是整个系统的关键。一个小巧的 Python 脚本,做三件事:

1

拉取数据

urllib 调 AI HOT API,拿到过去 24 小时的精选 JSON。注意要带浏览器 User-Agent,否则 API 的 nginx UA 黑名单会返回 403。

2

注入 HTML

HTML 模板里有一个占位符 __AI_DATA_PLACEHOLDER__(放在 <script id="ai-data"> 标签里)。脚本读取 HTML 文件,把 JSON 数据替换进去,保存。页面打开时,JavaScript 从嵌好的 JSON 直接渲染卡片,不需要任何异步请求——首屏即见,无网络抖动。

3

推送 CDN

用腾讯云 COS SDK(qcloud_cos)把更新后的 HTML 上传到对象存储,设置 CacheControl: no-cache 让 CDN 立即刷新。

第四步:设置 WorkBuddy 每日自动化

最后一步是把脚本"挂"起来。在 WorkBuddy 里创建一条自动化任务:

# RRULE 表达式:每天上午 9:00 执行 FREQ=DAILY;BYHOUR=9;BYMINUTE=0

配置好之后,WorkBuddy 每天 9:00 准时执行:运行 update.py → AI HOT 拉数据 → 注入 HTML → 推 COS。全程无人值守,每天醒来网站就已经刷新好了。

🟢 效果:每天上午 9:00 自动抓取过去 24 小时全球 AI 资讯,分类展示在页面上。你只需要打开浏览器看一眼,就知道今天 AI 圈发生了什么。

复用这套模板

这种"纯前端 + 定时脚本注入数据 + CDN 托管"的模式可以复用到很多场景:

关键优势:没有服务器成本、没有数据库维护、没有被攻击的风险。整个站点就是几个静态文件,CDN 分发到全球。

想看看效果?

AI 新闻雷达已在线运行,每天自动更新全球 AI 资讯精选。

打开 AI 新闻雷达 →