TypeScript + React + GitHub Actions：我是如何打造全自动化 AI 资讯系统的 - 已开源

去年开始，我养成了一个习惯：每天早上打开十几个网站，刷 AI 新闻。

机器之心、量子位、新智元要看看吧？Hacker News、Reddit 的 AI 板块也不能错过。还有 Twitter 上那帮 AI 大佬的动态，OpenAI、Anthropic、Google DeepMind 的官方账号……

刷完一圈，一上午就没了。

更崩溃的是，有时候看到一篇好文章，过几天想找，死活想不起来是在哪个平台看到的。

信息焦虑症，实锤了。

我就想：能不能有个工具，把这些信息源全部聚合起来，自动更新，还能智能过滤出真正有价值的 AI 内容？

于是就有了 AI News Aggregator 这个项目。

一、它到底解决了什么问题？

做这个项目之前，我梳理了一下痛点：

简单说，就三件事：

1. 多源聚合

从 14 个专业平台（AI今日热榜、TechURLs、TopHub、Buzzing 等）+ 70+ 精选 RSS 订阅 + 52 个微信公众号，实时抓取 AI 资讯。

2. 智能过滤

不是所有内容都值得看。通过关键词匹配 + 正则校验，从海量信息中精准提取 AI/科技相关内容，过滤掉电商、娱乐等噪音。

3. 自动更新

GitHub Actions 每 2 小时自动抓取一次，数据永远保持最新。还支持英文标题自动翻译为中文，提供双语展示。

二、整体架构：分层设计，职责清晰

先看一张整体架构图：

项目整体分为四层：数据采集层 → 数据处理层 → 数据输出层 → Web 展示层，每层职责清晰，高内聚低耦合。

三、抓取器架构：策略模式 + 模板方法

这是整个项目最核心的部分。我设计了 14 个内置抓取器，每个对应一个平台：

3.1 基类设计：模板方法模式

为了复用通用逻辑，我设计了一个抽象基类 BaseFetcher：

export abstract class BaseFetcher implements Fetcher {
   
  abstract siteId: string;
  abstract siteName: string;
  abstract fetch(now: Date): Promise<RawItem[]>;

  // 模板方法：HTML 抓取
  protected async fetchHtml(url: string): Promise<CheerioAPI> {
   
    const html = await fetchText(url);
    return cheerio.load(html);
  }

  // 模板方法：JSON 抓取
  protected async fetchJsonData<T>(url: string): Promise<T> {
   
    return fetchJson<T>(url);
  }

  // 工厂方法：创建标准数据项
  protected createItem(params: {
   ...}): RawItem {
   
    return {
   
      siteId: this.siteId,
      siteName: this.siteName,
      ...params
    };
  }
}

每个抓取器实现统一的 Fetcher 接口：

interface Fetcher {
   
  siteId: string;
  siteName: string;
  fetch(now: Date): Promise<RawItem[]>;
}

这种策略模式的设计，让扩展新数据源变得极其简单——只需新建一个类，实现 fetch 方法，然后注册到工厂函数即可。

3.2 AI今日热榜：Next.js SSR 数据提取

这个比较有意思。AI今日热榜是用 Next.js 构建的，数据不在 HTML 里，而是在 __NEXT_DATA__ 或流式 hydration 的 __next_f.push 中。

怎么提取呢？

export class AiHotFetcher extends BaseFetcher {
   
  siteId = 'aihot';
  siteName = 'AI今日热榜';

  async fetch(now: Date): Promise<RawItem[]> {
   
    const html = await fetchText('https://aihot.today/');

    // 方案1：从 __next_f.push 中提取（流式 hydration）
    const decoded = extractNextFMerged(html);
    let initialData = extractBalancedJson(decoded, 'initialDataMap');

    // 方案2：回退到 __NEXT_DATA__ script（传统 SSR）
    if (!initialData) {
   
      const nextData = extractNextDataPayload(html);
      initialData = nextData?.props?.pageProps?.initialDataMap;
    }

    // 数据转换
    for (const [sourceId, dataItems] of Object.entries(initialData)) {
   
      for (const item of dataItems) {
   
        items.push(this.createItem({
   
          source: sourceName,
          title: item.title_trans || item.title,
          url: item.link,
          publishedAt: parseDate(item.publish_time, now),
        }));
      }
    }

    return items;
  }
}

关键是双重降级策略，确保数据提取的健壮性。

3.3 OPML RSS 解析器：并发控制 + URL 替换

RSS 订阅是最复杂的数据源，需要处理很多边界情况：

// OPML 解析：递归处理嵌套 outline
export function parseOpmlSubscriptions(opmlContent: string): OpmlFeed[] {
   
  const parser = new XMLParser({
   
    ignoreAttributes: false,
    attributeNamePrefix: '@_',
  });
  const doc = parser.parse(opmlContent);

  // 递归处理嵌套 outline
  function processOutline(outline: unknown): void {
   
    const outlines = Array.isArray(outline) ? outline : [outline];
    for (const o of outlines) {
   
      const xmlUrl = o['@_xmlUrl'];
      if (xmlUrl && !seen.has(xmlUrl)) {
   
        feeds.push({
   
          title: o['@_title'] || o['@_text'],
          xmlUrl,
          htmlUrl: o['@_htmlUrl'],
        });
      }
      if (o.outline) processOutline(o.outline); // 递归
    }
  }

  return feeds;
}

// URL 替换与跳过逻辑
function resolveOfficialRssUrl(feedUrl: string) {
   
  // 跳过不支持的源（Telegram/B站/知乎等）
  for (const prefix of CONFIG.rss.skipPrefixes) {
   
    if (feedUrl.startsWith(prefix)) {
   
      return {
    url: null, skipReason: 'no_official_rss' };
    }
  }

  // 替换不稳定的 RSSHub 为官方源
  const replaced = CONFIG.rss.replacements[feedUrl];
  if (replaced) return {
    url: replaced, skipReason: null };

  return {
    url: feedUrl, skipReason: null };
}

// 并发抓取：p-limit 控制并发数为 20
export async function fetchOpmlRss(now, opmlPath, maxFeeds) {
   
  const feeds = parseOpmlSubscriptions(await readFile(opmlPath));
  const limit = pLimit(CONFIG.rss.maxConcurrency);

  const results = await Promise.all(
    resolvedFeeds.map((feed) => 
      limit(() => fetchSingleFeed(feed, now))
    )
  );

  return {
    items, summaryStatus, feedStatuses };
}

四、过滤器模块：四层过滤策略

AI 相关性过滤是最核心的逻辑。不是所有内容都是 AI 相关的，比如 TopHub 上有淘宝热销榜、微博热搜，这些需要过滤掉。

我设计了四层过滤策略：

export function isAiRelated(record: ArchiveItem): boolean {
   
  const siteId = record.site_id.toLowerCase();
  const text = `${
     title} ${
     source} ${
     siteName} ${
     url}`.toLowerCase();

  // 规则1：特定站点全部放行
  if (['aibase', 'aihot', 'aihubtoday'].includes(siteId)) {
   
    return true;
  }

  // 规则2：TopHub 需要额外校验来源白名单
  if (siteId === 'tophub') {
   
    if (hasMojibakeNoise(source)) return false;
    if (containsAnyKeyword(source, CONFIG.filter.tophubBlockKeywords)) return false;
    if (!containsAnyKeyword(source, CONFIG.filter.tophubAllowKeywords)) return false;
  }

  // 规则3：关键词匹配
  const hasAi = containsAnyKeyword(text, CONFIG.filter.aiKeywords) ||
                CONFIG.filter.enSignalPattern.test(text);
  const hasTech = containsAnyKeyword(text, CONFIG.filter.techKeywords);

  // 规则4：噪音过滤
  if (containsAnyKeyword(text, CONFIG.filter.commerceNoiseKeywords) && !hasAi) return false;
  if (containsAnyKeyword(text, CONFIG.filter.noiseKeywords) && !hasAi) return false;

  return hasAi || hasTech;
}

过滤策略分层：

关键词列表是这样定义的：

filter: {
   
  aiKeywords: ['aigc', 'llm', 'gpt', 'claude', 'gemini', 'deepseek', 
               'openai', 'anthropic', 'hugging face', 'transformer', 
               'prompt', 'diffusion', 'agent', '多模态', '大模型', ...],
  techKeywords: ['robot', 'chip', 'semiconductor', 'cuda', 'gpu', 
                 'cloud', 'developer', '开源', '技术', '芯片', ...],
  noiseKeywords: ['娱乐', '明星', '八卦', '足球', '篮球', '彩票', ...],
  commerceNoiseKeywords: ['淘宝', '天猫', '京东', '拼多多', '券后', ...],
}

去重逻辑

同一篇文章可能被多个平台转载，需要根据 title + url 去重：

export function dedupeItemsByTitleUrl(
  items: ArchiveItem[],
  randomPick: boolean = true
): ArchiveItem[] {
   
  const groups = new Map<string, ArchiveItem[]>();

  for (const item of items) {
   
    // 生成去重 Key：title + url
    const key = siteId === 'aihubtoday' 
      ? `url::${
     url}`                    // 特殊处理
      : `${
     title.toLowerCase()}||${
     url}`;

    if (!groups.has(key)) groups.set(key, []);
    groups.get(key)!.push(item);
  }

  const result: ArchiveItem[] = [];
  for (const values of groups.values()) {
   
    if (randomPick) {
   
      // 随机选择（用于 all 模式）
      result.push(values[Math.floor(Math.random() * values.length)]);
    } else {
   
      // 选择最新的（用于 AI 模式）
      result.push(values.reduce(pickNewest));
    }
  }

  return result.sort(byTimeDesc);
}

五、翻译模块：缓存复用 + 增量翻译

英文标题需要翻译成中文，但 Google 翻译 API 有调用限制。

我设计了三级翻译策略：

const TRANSLATE_API = 'https://translate.googleapis.com/translate_a/single';

export async function translateToZhCN(text: string): Promise<string | null> {
   
  const params = new URLSearchParams({
   
    client: 'gtx',      // 使用免费端点
    sl: 'auto',         // 自动检测语言
    tl: 'zh-CN',        // 目标语言
    dt: 't',            // 返回翻译
    q: text,
  });

  const response = await fetchJson(`${
     TRANSLATE_API}?${
     params}`);

  // 解析响应：[[["翻译结果", "原文", ...]]]
  const translated = response[0]
    .filter(seg => seg[0])
    .map(seg => String(seg[0]))
    .join('');

  return translated;
}

export async function addBilingualFields(
  itemsAi: ArchiveItem[],
  itemsAll: ArchiveItem[],
  cache: Map<string, string>,
  maxNewTranslations: number
): Promise<{
   ...}> {
   
  let translatedNow = 0;

  const enrich = async (item: ArchiveItem, allowTranslate: boolean) => {
   
    const title = item.title.trim();

    // 中文标题：直接使用
    if (hasCjk(title)) {
   
      return {
    ...item, title_zh: title };
    }

    // 英文标题：尝试翻译
    if (isMostlyEnglish(title)) {
   
      item.title_en = title;

      // 优先使用缓存
      let zhTitle = cache.get(title);

      // 缓存未命中且允许翻译
      if (!zhTitle && allowTranslate && translatedNow < maxNewTranslations) {
   
        zhTitle = await translateToZhCN(title);
        if (zhTitle) {
   
          cache.set(title, zhTitle);
          translatedNow++;
        }
      }

      if (zhTitle) {
   
        item.title_zh = zhTitle;
        item.title_bilingual = `${
     zhTitle} / ${
     title}`;
      }
    }

    return item;
  };

  // AI 条目：允许翻译
  const aiOut = await Promise.all(itemsAi.map(it => enrich(it, true)));

  // 全部条目：仅使用缓存
  const allOut = await Promise.all(itemsAll.map(it => enrich(it, false)));

  return {
    itemsAi: aiOut, itemsAll: allOut, cache };
}

翻译策略：

六、那些踩过的坑

6.1 Next.js SSR 数据提取

AI今日热榜是用 Next.js 构建的，数据不在 HTML 里，而是在 __NEXT_DATA__ 或流式 hydration 的 __next_f.push 中。

关键是双重降级策略，确保数据提取的健壮性。

6.2 编码检测与修复

TopHub 这种国内网站，有时候返回的是 GB18030 编码，而不是 UTF-8。直接解析会乱码。

解决方案：

let html = new TextDecoder('utf-8').decode(buffer);
// 检测是否有乱码字符
if (hasGarbledCharacters(html)) {
   
  const gb18030Html = new TextDecoder('gb18030').decode(buffer);
  // 选择损坏字符更少的版本
  if (countGarbledChars(gb18030Html) < countGarbledChars(html)) {
   
    html = gb18030Html;
  }
}

还有 Mojibake 修复——有些标题在传输过程中被错误编码，需要尝试 Latin1 → UTF-8 转码：

function maybeFixMojibake(text: string): string {
   
  // 检测常见乱码特征
  if (!/[Ãâåèæïð]|[\x80-\x9f]/.test(text)) return text;

  // 尝试 Latin1 -> UTF-8 转码
  const bytes = Buffer.from(text, 'latin1');
  const fixed = bytes.toString('utf-8');
  // 如果修复后仍有乱码，返回原文
  return hasGarbledCharacters(fixed) ? text : fixed;
}

6.3 并发控制

同时抓取 70+ RSS 订阅，不加限制的话会被封 IP。

使用 p-limit 控制并发数：

const limit = pLimit(20); // 最多 20 个并发

const results = await Promise.all(
  feeds.map(feed => limit(() => fetchSingleFeed(feed, now)))
);

6.4 HTTP 请求封装：重试 + 超时

export async function fetchWithRetry(url: string, options = {
   }) {
   
  const {
    retries = 3, timeout = 60000 } = options;

  let lastError: Error | null = null;

  for (let attempt = 0; attempt <= retries; attempt++) {
   
    try {
   
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), timeout);

      const response = await fetch(url, {
   
        headers: {
   
          'User-Agent': CONFIG.http.userAgent,
          'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8',
        },
        signal: controller.signal,
      });

      clearTimeout(timeoutId);

      // 可重试的状态码：429, 500, 502, 503, 504
      if (!response.ok && CONFIG.http.retryStatusCodes.includes(response.status)) {
   
        throw new Error(`HTTP ${
     response.status}`);
      }

      return response;
    } catch (error) {
   
      lastError = error;
      if (attempt < retries) {
   
        // 指数退避：800ms, 1600ms, 2400ms
        await sleep(CONFIG.http.retryDelay * (attempt + 1));
      }
    }
  }

  throw lastError;
}

七、自动化部署：GitHub Actions 全搞定

项目配置了 GitHub Actions，每 2 小时自动执行：

on:
  schedule:
    - cron: "0 */2 * * *"  # 每 2 小时

工作流程：

全程自动化，完全不用人工干预。

八、前端架构：React Hooks + 智能预加载

React 18 + TypeScript + Vite + Tailwind CSS，一个标准的现代前端技术栈。

核心 Hook: useNewsData

export function useNewsData(): UseNewsDataReturn {
   
  const [data, setData] = useState<NewsData | null>(null);
  const [selectedSite, setSelectedSite] = useState('opmlrss');
  const [selectedSource, setSelectedSource] = useState('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [displayCount, setDisplayCount] = useState(PAGE_SIZE);
  const [timeRange, setTimeRange] = useState<TimeRange>('24h');

  // 智能预加载：加载 24h 数据后自动预加载 7d 数据
  const preloadedDataRef = useRef<{
    [key in TimeRange]?: NewsData }>({
   });

  // 数据获取
  const fetchData = async (range: TimeRange, isPreload = false) => {
   
    if (preloadedDataRef.current[range] && !isPreload) {
   
      setData(preloadedDataRef.current[range]!);
      return;
    }

    const fileName = range === '24h' ? 'latest-24h.json' : 'latest-7d.json';
    const response = await fetch(`${
     basePath}data/${
     fileName}`);
    const json = await response.json();

    preloadedDataRef.current[range] = json;
    if (!isPreload) setData(json);
  };

  // 筛选逻辑
  const filteredItems = useMemo(() => {
   
    let items = data?.items || [];

    // 按站点筛选
    if (selectedSite !== 'all') {
   
      items = items.filter(item => item.site_id === selectedSite);
    }

    // 按来源筛选
    if (selectedSource !== 'all') {
   
      items = items.filter(item => item.source === selectedSource);
    }

    // 搜索
    if (searchQuery.trim()) {
   
      const query = searchQuery.toLowerCase();
      items = items.filter(item => 
        item.title.toLowerCase().includes(query) ||
        item.source.toLowerCase().includes(query) ||
        item.title_zh?.toLowerCase().includes(query)
      );
    }

    // 分页
    return items.slice(0, displayCount);
  }, [data, selectedSite, selectedSource, searchQuery, displayCount]);

  return {
    data, filteredItems, sourceStats, ... };
}

还有一个智能预加载机制：加载 24h 数据后，自动在后台预加载 7d 数据。这样用户切换时间范围时，可以实现"秒开"。

九、扩展指南：想加新数据源怎么办？

只需三步：

1. 创建新的 Fetcher 类

class NewSourceFetcher extends BaseFetcher {
   
  siteId = 'newsource';
  siteName = 'New Source';

  async fetch(now: Date): Promise<RawItem[]> {
   
    const html = await this.fetchHtml('https://newsource.com');
    // ...解析数据
    return items.map(item => this.createItem({
   ...}));
  }
}

2. 导出

export {
    NewSourceFetcher } from './newsource.js';

3. 注册到工厂函数

export function createAllFetchers(): Fetcher[] {
   
  return [
    ...existing,
    new NewSourceFetcher(),
  ];
}

就这么简单。

十、技术亮点总结

架构亮点

工程亮点

性能优化

用户体验亮点

写在最后

这个项目解决了我自己的痛点，也希望能帮到同样有信息焦虑的朋友。

技术栈：

• 后端：TypeScript + Cheerio + rss-parser + p-limit
• 前端：React 18 + Vite + Tailwind CSS
• 部署：GitHub Actions + GitHub Pages

核心价值：

• 多源聚合，一网打尽
• 智能过滤，精准推送
• 自动更新，省心省力
• 双语支持，无障碍阅读

如果你也想搭建自己的资讯聚合系统，欢迎参考这个项目。代码开源，MIT 协议，随便折腾。 https://github.com/SuYxh/ai-news-aggregator