GitHub Actions 作為靜態生成器站點和 GitHub 頁面的 CI/CD

GitHub Actions 作為靜態生成器站點和 GitHub 頁面的 CI/CD

稍微瀏覽了一下 Habr 後,我很驚訝地發現關於 GitHub(測試版)功能 Actions 的主題發表的文章很少。

這種輕描淡寫的說法似乎可以用以下事實來解釋:該功能仍在測試中,儘管是「測試版」。 但這是測試版的一個有用功能,允許在私人儲存庫中使用該工具。 我將在本文中討論如何使用這項技術。

史前

如果我們按順序開始,那麼可能值得一提的是,在尋找一種快速、方便、簡單且免費的存儲個人“關於我”網站的選項的過程中,我不得不花費幾個晚上並梳理許多文章。

有些人選擇託管,有些人選擇雲端伺服器,而那些不想了解所有這些工作、互動和付款的人,例如將靜態網站上傳到儲存庫,因為現在這可以在 GitHub 和 GitLab 上完成。

當然,這是每個人的個人選擇。

我最終的選擇是 GitHub Pages。

關於頁面

誰不知道 gh-pages - 這是一個以網站形式儲存文件的選項,它是免費提供的,除了文件之外,還建議儲存個人網站。 此功能由 GitHub 向所有使用者提供,並可在儲存庫設定中使用。

專案儲存庫使用分支 gh-pages,對於使用者網站 - 具有名稱的單獨儲存庫 username.github.io 網站來源位於 master 分支。

你可以看到更多 在文檔中,但我要指出的是,GitHub 出乎意料地慷慨,允許任何人透過簡單地添加文件來將自己的網域連結到這樣的網站 CNAME 使用網域名稱並在 GitHub 伺服器上設定網域供應商的 DNS。

我確信這裡有很多關於如何開發這樣一個網站的文章,所以這不是我要進一步討論的內容。

問題的發生

問題是,當使用靜態生成器時,需要編寫額外的腳本並使用庫來簡化生成頁面並將其載入到儲存庫中的過程。 簡單來說,如果將來源儲存在單獨的私人儲存庫中,那麼每次網站有任何變更時,都需要部署本機環境,以便後續產生靜態頁面並在主網站儲存庫中發布。

有豐富的 靜電產生器 他們都有同樣的問題。 這些操作需要花費太多的時間和精力,最終會減慢站點的工作速度,特別是在多次從作業系統遷移到作業系統或發生硬碟資料遺失事件之後 (我的情況就是這樣).

就在最近,無論是在網站上的彈出通知中還是在 GitHub 的新聞通訊中,都注意到了一個新建的 CI/CD,它允許以最小的努力執行這些操作。

關於靜態頁面產生器

我不會特別關注這個分項,但我將分享我在選擇和使用以下內容時得出的一些論點:

1)選擇適合你的程式語言的生成器,或盡可能清晰的生成器。 當我自己必須為網站添加一些功能以使其正常運作時,我想到了這個想法,並添加拐杖以提高其穩定性和自動化程度。 此外,這是您自己以插件的形式編寫附加功能的一個很好的理由;

2)選擇哪個生成器是個人選擇,但值得考慮的是,為了最初沉浸在 GitHub Pages 功能的工作中,您必須先安裝 傑奇。 幸運的是,它允許您直接從儲存庫中的來源生成網站 (我會根據我的選擇重複這一點).

我對生成器的選擇是基於第一點。 用Python寫的很容易取代Jekyll,這對我來說很陌生 (用了快一年了)。 因此,即使是創建和編輯文章以及在網站上工作,也能以我感興趣的語言獲得額外的經驗。

__

制定問題

主要任務是編寫一個腳本(實際上是一個設定檔),該腳本將自動從私人儲存庫產生靜態頁面。 該解決方案將涉及虛擬環境的功能。 該腳本本身會將現成的頁面新增至公共儲存庫。

解決方案工具

我們將用來解決問題的工具:

  • GitHub 操作;
  • Python 3.7;
  • 鵜;
  • 吉特;
  • GitHub 頁面。

解決方案

因此,在稍微熟悉了文件並了解了 Actions 腳本是如何編寫的之後,很明顯這種機制將徹底解決所出現的問題。 在撰寫本文時,您必須訂閱才能使用此功能。 用於 Beta 測試!

GitHub Actions 作為靜態生成器站點和 GitHub 頁面的 CI/CD
Github 本身對新功能的描述

編寫操作腳本首先在資料夾中建立命名文件 .github 及其子資料夾 workflows。 這可以手動完成,也可以透過儲存庫頁面上「操作」標籤中的編輯器完成。

GitHub Actions 作為靜態生成器站點和 GitHub 頁面的 CI/CD
空白腳本表單範例

我將簡要評論表格

name: CI    # название скрипта: будет отображаться во вкладке Actions

on: [push]  # действие, по которому запускается данный скрипт

jobs:       # роботы, которые будут выполняться
  build:    # сборка, которая..

    runs-on: ubuntu-latest      # ..будет запущена на основе этого образа

    steps:              # шаги которые будут проделаны после запуска образа
    - uses: actions/checkout@v1     # переход в самую актуальную ветку
    - name: Run a one-line script   # имя работы номер 1
      run: echo Hello, world!       # суть работы номер 1 (bash-команда записана в одну строку)
    - name: Run a multi-line script   # имя работы номер 2
      run: |                    # суть работы номер 2 (многострочная)
        echo Add other actions to build,
        echo test, and deploy your project.

讓我們根據模板編寫自己的:

0) 您也可以保留名稱“CI”。 這是一個品味問題。

1) 接下來,您需要選擇將啟動腳本的操作/觸發器,在我們的例子中,這是通常將新提交推送到儲存庫的操作。

on:
  push

2) 我們也將留下啟動腳本所依據的映像作為範例,因為 Ubuntu 對必要的功能非常滿意。 看著 可用工具 很明顯,這可以是任何必要的或簡單方便的映像(或基於它的 Docker 容器)。

  build:
    runs-on: ubuntu-latest

3)步驟中,我們首先要搭建好環境,為主要工作做準備。

3.1)轉到我們需要的分支(標準步驟 checkout):

- uses: actions/checkout@v1

3.2)安裝Python:

    - name: Set up Python
      uses: actions/setup-python@v1
      with:
        python-version: 3.7

3.3)安裝我們的生成器的依賴項:

    - name: Install dependencies
      run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt

3.4) 建立一個將產生網站頁面的目錄:

   - name: Make output folder
      run: mkdir output

4)為了使網站上的工作保持一致,即不刪除先前的變更並能夠將變更新增至網站儲存庫而不發生衝突,下一步將是每次複製網站儲存庫:

   - name: Clone master branch
      run: git clone "https://${{ secrets.ACCESS_TOKEN }}@github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io.git" --branch master --single-branch ./output

這一步調用系統變數:

  • 多變的 GITHUB_ACTOR GitHub 會自行安裝,這是啟動此腳本的使用者名稱;
  • 多變的 secrets.ACCESS_TOKEN 這是生成的 用於管理 Github 的令牌,我們可以透過在選項卡中設定它來將其作為環境變數傳遞 Secrets 我們的存儲庫設定。 請注意,在生成過程中,令牌將提供給我們一次,之後將無法進一步存取它。 以及Secrets物品的價值。

5)讓我們繼續生成頁面:

   - name: Generate static pages
      run: pelican content -o output -s publishconf.py

傳遞給生成器的參數負責產生的檔案將發送到的目錄(-o output)和我們用來產生的設定檔(-s publishconf.py; 您可以在 Pelican 文件中了解分離本機設定和發佈配置的方法).

讓我提醒您一下我們的資料夾中有什麼 output 網站儲存庫已被克隆。

6) 讓我們設定 git 並索引我們更改的檔案:

    - name: Set git config and add changes
      run: |
          git config --global user.email "${GITHUB_ACTOR}@https://users.noreply.github.com/"
          git config --global user.name "${GITHUB_ACTOR}"
          git add --all
      working-directory: ./output

此時,將使用已知的變量,並指示將在其中啟動此步驟的命令的工作目錄。 否則,轉到工作目錄的命令將類似於 - cd output.

7) 讓我們產生一條提交訊息,提交更改並將其推送到儲存庫中。 這樣提交就不會白費,因此不會在 bash 中產生錯誤(輸出結果不是 0)——首先,讓我們檢查是否有必要提交和推送某些內容。 為此,我們使用命令 git diff-index --quiet --cached HEAD -- 這將輸出到終端 0 如果相對於網站的先前版本沒有任何更改,並且 1 有這樣的變化。 然後我們處理該命令的結果。 因此,在有關腳本執行的信息中,我們將記錄有關此階段站點狀態的有用信息,而不是自動崩潰並向我們發送有關腳本崩潰的報告。

我們也在我們的目錄中使用現成的頁面執行這些操作。

   - name: Push and send notification
      run: |
          COMMIT_MESSAGE="Update pages on $(date +'%Y-%m-%d %H:%M:%S')"
          git diff-index --quiet --cached HEAD -- && echo "No changes!" && exit 0 || echo $COMMIT_MESSAGE
          # Only if repo have changes
          git commit -m "${COMMIT_MESSAGE}"
          git push https://${{ secrets.ACCESS_TOKEN }}@github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io.git master
      working-directory: ./output

導致

因此,這樣的腳本可以讓你不用考慮建立靜態頁面。 透過直接將變更新增至私有儲存庫,無論是在任何系統下使用 git 還是透過 GitHub Web 介面建立文件,Actions 都會自行完成所有操作。 如果腳本意外崩潰,則會向您的電子郵件發送通知。

完整代碼

我將保留我的工作版本,其中最後一步添加發送提交已推送到主存儲庫的通知。

使用上述 Secrets,其中新增了機器人代幣和需要向其發送訊息的用戶 ID。

name: Push content to the user's GitHub pages repository

on:
  push

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Set up Python
      uses: actions/setup-python@v1
      with:
        python-version: 3.7
    - name: Install dependencies
      run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt
    - name: Make output folder
      run: mkdir output
    - name: Clone master branch
      run: git clone "https://${{ secrets.ACCESS_TOKEN }}@github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io.git" --branch master --single-branch ./output
    - name: Generate static pages
      run: pelican content -o output -s publishconf.py
    - name: Set git config and add changes
      run: |
          git config --global user.email "${GITHUB_ACTOR}@https://users.noreply.github.com/"
          git config --global user.name "${GITHUB_ACTOR}"
          git add --all
      working-directory: ./output
    - name: Push and send notification
      run: |
          COMMIT_MESSAGE="Update pages on $(date +'%Y-%m-%d %H:%M:%S')"
          git diff-index --quiet --cached HEAD -- && echo "No changes!" && exit 0 || echo $COMMIT_MESSAGE
          git commit -m "${COMMIT_MESSAGE}"
          git push https://${{ secrets.ACCESS_TOKEN }}@github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io.git master
          curl "https://api.telegram.org/bot${{ secrets.BOT_TOKEN }}/sendMessage?text=$COMMIT_MESSAGE %0ALook at ${GITHUB_ACTOR}.github.io %0ARepository%3A github.com/${GITHUB_ACTOR}/${GITHUB_ACTOR}.github.io&chat_id=${{ secrets.ADMIN_ID }}"
      working-directory: ./output

截圖

GitHub Actions 作為靜態生成器站點和 GitHub 頁面的 CI/CD
在來源儲存庫的「操作」標籤中顯示的其中一項運行的結果

GitHub Actions 作為靜態生成器站點和 GitHub 頁面的 CI/CD
來自機器人的有關腳本完成的訊息

有用的鏈接

了解行動
動作文法
觸發器列表
虛擬環境選項
Github 頁面
靜態生成器列表

來源: www.habr.com

添加評論