每日抓取 GitHub 熱門趨勢儲存庫

GitHub 今日熱門儲存庫工作流程分析

此 n8n 工作流程範本旨在自動抓取並提取結構化資料，來源為 GitHub 熱門頁面 (https://github.com/trending)，特別針對當天精選的熱門儲存庫。它利用 HTML 解析功能來導覽 GitHub 的公開 HTML 結構，隔離相關的儲存庫元素，並將原始抓取內容轉換為乾淨、可用的儲存庫詳細資訊列表，包括作者、名稱、描述和直接 URL。

工作流程功能

工作流程手動啟動，擷取 GitHub 熱門頁面的 HTML 內容，隔離包含儲存庫列表的主要容器，提取個別的儲存庫卡片，解析關鍵元資料（例如儲存庫路徑、程式語言和描述），最後將每個項目格式化為標準化的 JSON 物件，並包含 author、title、url 和時間戳記的 created_at 等豐富欄位。輸出最多包含 25 個熱門儲存庫的列表（如 GitHub 所顯示），可供後續使用，例如插入資料庫、發送通知警報或與其他工具整合。

主要功能與能力

• 無需 API 的網頁抓取：直接抓取公開 HTML，無需 GitHub API 權杖。
• 動態資料提取：即使 GitHub 的佈局發生中度演變，也能使用 CSS 選擇器可靠地定位儲存庫元素。
• 結構化輸出：將非結構化的 HTML 轉換為具有標準化欄位的連貫 JSON 記錄。
• 手動觸發：透過「測試工作流程」按鈕進行按需執行，非常適合排程或臨時執行。
• 文字清理：提供選項以修剪空格並清理提取的文字，以提高可讀性和一致性。
• URL 建構：從抓取的路徑動態建構有效的 GitHub 儲存庫 URL。

主要節點及其用途

1. 點擊「測試工作流程」時 (manualTrigger)

   • 作為進入點；在測試或執行期間手動觸發工作流程。

2. 請求 GitHub 熱門 (httpRequest)

   • 向 https://github.com/trending 發送 HTTP GET 請求，以檢索熱門頁面的原始 HTML。

3. 提取框 (html 節點)

   • 解析完整的 HTML 回應，並提取第一個 <div class="Box"> 的內容，其中包含熱門儲存庫的主要列表。

4. 提取所有儲存庫 (html 節點)

   • 處理提取的「Box」HTML，並使用 returnArray: true 將每個 <article class="Box-row"> 元素（代表個別儲存庫）隔離到一個 HTML 片段陣列中。

5. 轉為列表 (splitOut 節點)

   • 將儲存庫 HTML 片段陣列分割成個別項目，以便在後續節點中逐項處理。

6. 提取儲存庫資料 (html 節點)

   • 對每個儲存庫 HTML 片段，提取三項關鍵資訊：
     • repository：來自 <a class="Link"> 元素的作者/儲存庫路徑。
     • language：來自 <span class="d-inline-block"> 的程式語言。
     • description：來自 <p> 標籤的簡短專案描述。

7. 設定結果變數 (set 節點)

   • 轉換並豐富提取的資料：
     • 將 repository 分割為 author 和 title。
     • 使用儲存庫路徑建構有效的 url。
     • 使用 {{$now}} 添加 created_at 時間戳記。
     • 保留原始 description。
     • 透過 includeOtherFields: "=" 保留所有其他欄位。

使用案例與優勢

• 開發者研究：快速發現新興或崛起的開源專案。
• 自動化監控：追蹤每日趨勢以進行競爭分析或獲取靈感。
• 內容聚合：將熱門儲存庫匯入儀表板、電子報或內部工具。
• 教育目的：使用 n8n 的視覺化自動化學習網頁抓取技術。
• 低成本替代方案：對於公開資料，避免使用官方 GitHub API 的速率限制或驗證要求。

工作流程邏輯步驟

1. 觸發：使用者點擊「測試工作流程」，啟動手動觸發器。
2. 擷取頁面：httpRequest 節點檢索 https://github.com/trending 的完整 HTML。
3. 隔離容器：Extract Box 節點使用 div.Box 擷取主要的熱門區塊。
4. 提取儲存庫卡片：Extract all repositories 節點選擇所有 article.Box-row 元素，並將它們作為 HTML 字串陣列返回，欄位名稱為 repositories。
5. 分割為項目：Turn to a list 節點將 repositories 陣列轉換為個別的工作流程項目，以便並行或依序處理。
6. 解析元資料：對於每個儲存庫項目，Extract repository data 節點應用 CSS 選擇器來提取：
   • 儲存庫路徑（例如 "n8n-io/n8n"）
   • 語言徽章文字
   • 描述段落
7. 豐富與標準化：Set Result Variables 節點：
   • 將儲存庫路徑分割為 author 和 title
   • 建構可點擊的 GitHub URL
   • 添加當前時間戳記
   • 清理並將所有欄位分配到統一的結構中
8. 輸出：最終輸出是一個結構化的儲存庫物件列表，可供匯出、儲存或進一步自動化。

此工作流程透過 n8n 的原生 HTML 解析和資料處理節點，例證了高效的無程式碼網頁抓取，從公開可用的 GitHub 資料中提供可行的見解。