」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 透過 GitHub Actions 按計畫更新網站內容

透過 GitHub Actions 按計畫更新網站內容

發佈於2024-11-06
瀏覽:699

我想分享我建立一個自我永續的內容管理系統的旅程,該系統不需要傳統意義上的內容資料庫。

問題

該網站的內容(部落格文章和書籤)儲存在 Notion 資料庫中:

Updating website content on schedule via GitHub Actions

附書籤的資料庫 –  Notion UI

我試圖解決的問題是不必在添加每個書籤後手動部署網站。最重要的是 - 保持託管盡可能便宜,因為對我來說,我添加到我的 Notion 資料庫的書籤最終在線的速度有多快並不重要。

因此,經過一番研究,我提出了以下設定:

Updating website content on schedule via GitHub Actions

內容傳遞機制的高階概述

系統由幾個組件組成:

  • 部署更改的「Push to Main」操作
  • 「更新內容」操作,從 Notion API 下載內容並提交更改
  • 「按計畫更新內容」操作偶爾執行一次並觸發「更新內容」操作

讓我們從內到外詳細研究每一個。

「推送到主」工作流程

這裡沒什麼好說的,非常標準的設置, – 當推送到主分支時,此工作流程會建立應用程式並使用 Wrangler CLI 將其部署到 Cloudflare Pages:

name: Push to Main
on:
  push:
    branches: [main]
  workflow_dispatch: {}
jobs:
  deploy-cloudflare-pages:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup pnpm
        uses: pnpm/action-setup@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version-file: .node-version
          cache: pnpm
      - name: Install node modules
        run: |
          pnpm --version
          pnpm install --frozen-lockfile
      - name: Build the App
        run: |
          pnpm build
      - name: Publish Cloudflare Pages
        env:
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        run: |
          pnpm wrangler pages deploy ./out --project-name ${{ secrets.CLOUDFLARE_PROJECT_NAME }}

「更新內容」工作流程

此工作流程只能「手動」觸發…但也可以自動觸發,因為您可以使用 GitHub 個人存取權杖(又稱 PAT)觸發它。我最初編寫它是因為我想從我的手機部署更改。它使用 Notion API 下載帖子和書籤,然後 - 如果程式碼庫有任何更改 - 建立提交並推送它。為了正常運行,必須為該工作流程提供具有儲存庫「讀取和寫入程式碼存取權限」的 PAT:

name: Update Content
on:
  workflow_dispatch: {}
jobs:
  download-content:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          # A Github Personal Access Token with access to the repository 
          # that has the follwing permissions:
          # ✅ Read and Write access to code
          token: ${{ secrets.GITHUB_PAT_CONTENT }}
      - name: Setup pnpm
        uses: pnpm/action-setup@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version-file: .node-version
          cache: pnpm
      - name: Install node modules
        run: |
          pnpm --version
          pnpm install --frozen-lockfile
      - name: Download articles content from Notion
        env:
          NOTION_KEY: "${{ secrets.NOTION_KEY }}"
          NOTION_ARTICLES_DATABASE_ID: "${{ secrets.NOTION_ARTICLES_DATABASE_ID }}"
        run: |
          pnpm download-articles
      - name: Download bookmarks content from Notion
        env:
          NOTION_KEY: ${{ secrets.NOTION_KEY }}
          NOTION_BOOKMARKS_DATABASE_ID: ${{ secrets.NOTION_BOOKMARKS_DATABASE_ID }}
        run: |
          pnpm download-bookmarks
      - name: Configure Git
        run: |
          git config --global user.email "${{ secrets.GIT_USER_EMAIL }}"
          git config --global user.name "${{ secrets.GIT_USER_NAME }}"
      - name: Check if anything changed
        id: check-changes
        run: |
          if [ -n "$(git status --porcelain)" ]; then
            echo "There are changes"
            echo "HAS_CHANGED=true" >> $GITHUB_OUTPUT
          else
            echo "There are no changes"
            echo "HAS_CHANGED=false" >> $GITHUB_OUTPUT
          fi
      - name: Commit changes
        if: steps.check-changes.outputs.HAS_CHANGED == 'true'
        run: |
          git add ./src/content
          git add ./public
          git commit -m "Automatic content update commit"
          git push

「按計畫更新內容」工作流程

這個非常簡單:它只是每隔一段時間運行一次並觸發上面的工作流程。為了正常運行,此工作流程必須提供一個 GitHub PAT,該 PAT 具有儲存庫的「對 actions 的讀寫存取權」。就我而言,這是一個不同的 PAT:

name: Update Content on Schedule
on:
  schedule:
    - cron: "13 0,12 * * *"
  workflow_dispatch: {}
jobs:
  trigger-update-content:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Dispatch the Update Content workflow
        env:
          # A Github Personal Access Token with access to the repository 
          # that has the follwing permissions:
          # ✅ Read and Write access to actions
          GH_TOKEN: ${{ secrets.GITHUB_PAT_ACTIONS }}
        run: |
          gh workflow run "Update Content" --ref main

結論

對我來說,這個設定已被證明非常好且靈活。由於模組化結構,“更新內容”操作可以手動觸發 - 例如旅行時從我的手機上。對我來說,這是另一個逐步增強工作流程的寶貴經驗。

希望您覺得這有幫助嗎?

版本聲明 本文轉載於:https://dev.to/prudkohliad/updating-website-content-on-schedule-via-github-actions-39o7?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何在 Python 中檢查生成器是否為空?
    如何在 Python 中檢查生成器是否為空?
    偵測空產生器初始化在Python中,產生器是一次產生一個值的迭代器。因此,從一開始就確定發電機是否為空可能是一個挑戰。與列表或元組不同,生成器沒有固有的長度或 isEmpty 方法。 解決挑戰為了解決這個問題,常見的方法是使用輔助函數查看生成器中的第一個值而不消耗它。如果 peek 函數傳回 Non...
    程式設計 發佈於2024-11-06
  • ## 想從Python高效呼叫Java?探索 Py4J 作為 JPype 的替代品!
    ## 想從Python高效呼叫Java?探索 Py4J 作為 JPype 的替代品!
    從 Python 呼叫 Java:Py4J 作為 JPype 的替代品從 Python 呼叫 Java 程式碼有幾個潛在的解決方案。其中一個選項 JPype 可能難以編譯,並且由於缺乏最新版本而顯得不活躍。 然而,另一種解決方案是Py4J,這是一個簡單的庫,提供了一個方便的接口,用於從Python ...
    程式設計 發佈於2024-11-06
  • 小Swoole資料庫
    小Swoole資料庫
    Small Swoole Db 2.3引入左連接: $selector = (new TableSelector('user')) ->leftJoin('post', 'messageOwner', 'message') ; $selector->where() -&g...
    程式設計 發佈於2024-11-06
  • 如何使用組譯指令最佳化 __mm_add_epi32_inplace_purego 函數,以在位置總體計數操作中獲得更好的效能?
    如何使用組譯指令最佳化 __mm_add_epi32_inplace_purego 函數,以在位置總體計數操作中獲得更好的效能?
    使用程序集優化 __mm_add_epi32_inplace_purego此問題旨在優化 __mm_add_epi32_inplace_purego 函數的內部循環,該函數對位元組數組執行位置填充計數。目標是透過利用彙編指令來提高效能。 內部循環的原始Go 實作: __mm_add_epi32...
    程式設計 發佈於2024-11-06
  • 使用 React Router 進行導航 React Js 第一部分 React 應用程式中的路由指南
    使用 React Router 進行導航 React Js 第一部分 React 應用程式中的路由指南
    歡迎回到我們的 React 系列!在先前的文章中,我們介紹了元件、狀態、道具和事件處理等基本概念。現在,是時候使用 React Router 探索 React 應用程式中的路由了。路由允許您在應用程式內的不同視圖或元件之間導航,從而創建無縫的使用者體驗? . 什麼是 React 路由...
    程式設計 發佈於2024-11-06
  • file_get_contents() 可以用於 HTTP 檔案上傳嗎?
    file_get_contents() 可以用於 HTTP 檔案上傳嗎?
    使用 HTTP Stream Context 透過 file_get_contents() 上傳檔案使用 cURL 擴充功能可以無縫地實作透過 Web 表單上傳檔案。不過,也可以使用 PHP 的 file_get_contents() 函數結合 HTTP 流上下文來執行檔案上傳。 Multipart...
    程式設計 發佈於2024-11-06
  • React 中的 UseEffect
    React 中的 UseEffect
    歡迎 React Hooks 的世界!今天,我們將深入探討最受歡迎的掛鉤之一:useEffect。別擔心,我們會讓它變得有趣且易於理解。那麼,就讓我們開始吧! ? ?什麼是useEffect useEffect 是一個 React Hook,可讓您在功能元件中執行副作用。副作用是在元件外部發生的操...
    程式設計 發佈於2024-11-06
  • 如何在 Google Cloud Platform 免費層上建立現代資料平台
    如何在 Google Cloud Platform 免費層上建立現代資料平台
    我在 Medium.com 上發布了一系列七篇免費公開文章「如何在 Google Cloud Platform 免費層上建立現代資料平台」。 主要文章位於:https://medium.com/@markwkiehl/building-a-data-platform-on-gcp-0427500f...
    程式設計 發佈於2024-11-06
  • 貼文 #f 掙扎
    貼文 #f 掙扎
    這篇文章是關於我迄今為止在編碼和學習方面的掙扎 一個。我只能保持專註一個小時,最多兩個小時。 b.我很容易分心 c.我不能久坐,否則我會開始感到煩躁和休息腿部問題。 我想到的有助於解決問題的解決方案 一個。我需要開始更頻繁地使用我的番茄工作法應用程式 B. 我開始將手機調成震動,如果我有另一個螢...
    程式設計 發佈於2024-11-06
  • 面向 Web 開發人員的熱門 Chrome 擴充功能 4
    面向 Web 開發人員的熱門 Chrome 擴充功能 4
    2024 年最適合 Web 開發者的 10 款 Chrome 擴展 隨著 2024 年的進展,Chrome 擴充功能已成為 Web 開發人員工具包中不可或缺的一部分,在瀏覽器中提供強大的功能。在這篇文章中,我們將探討今年在 Web 開發社群掀起波瀾的 10 大 Chrome 擴充功...
    程式設計 發佈於2024-11-06
  • 如何使用 React Router v4/v5 巢狀路由:簡化指南
    如何使用 React Router v4/v5 巢狀路由:簡化指南
    React Router v4/v5 的嵌套路由:簡化指南使用React Router 時,嵌套路由是組織的關鍵技術您的應用程式的導航。然而,新手經常面臨設定嵌套路由的挑戰。本文旨在簡化使用 React Router v4/v5 的流程。 React Router v4 在路由嵌套方式上引入了重大轉...
    程式設計 發佈於2024-11-06
  • 如何使用 UTF8 字元編碼保留 MySQL 中的表格式?
    如何使用 UTF8 字元編碼保留 MySQL 中的表格式?
    使用UTF8 字元編碼增強MySQL 命令列格式使用儲存在資料庫表中的瑞典語和挪威語字串時,查詢資料時可能會遇到表格式問題使用不同的字元集。 問題陳述預設情況下,使用「set names latin1;」產生失真的輸出: ----------------------------------- | ...
    程式設計 發佈於2024-11-06
  • CSS 盒子模型
    CSS 盒子模型
    CSS 盒子模型是 Web 開發中的一個基本概念,它構成了 Web 佈局和設計的基礎。它決定了元素的大小、內容的呈現方式以及它們如何在網頁上相互互動。掌握盒模型對於任何使用 HTML 和 CSS 的開發人員來說都是至關重要的,因為它會影響元素的顯示、間隔和對齊方式。 在本文中,我們將詳細探討 CS...
    程式設計 發佈於2024-11-06
  • 我如何寫 CSS 選擇器
    我如何寫 CSS 選擇器
    有很多 CSS 方法,但我討厭它們。有些多(順風等),有些少(BEM、OOCSS 等)。但歸根結底,它們都有缺陷。 當然,人們使用這些方法有充分的理由,並且解決的許多問題我也遇到過。因此,在這篇文章中,我想寫下我自己的關於如何保持 CSS 組織的指南。 這不是任何人都可以開始使用的完整描述的 C...
    程式設計 發佈於2024-11-06
  • 為什麼輸入元素不支援 HTML5 中的 ::after 偽元素?
    為什麼輸入元素不支援 HTML5 中的 ::after 偽元素?
    ::before 和::after 的偽元素相容性在HTML5 中,::before 和::after 偽元素可以使用附加內容(例如圖示或複選標記)增強元素。然而,並非所有元素都完全支援這些偽元素。 輸入元素和 ::after在提供的範例中,::after 偽元素不是顯示在輸入元素上。這是因為類似 ...
    程式設計 發佈於2024-11-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3