wjohn1483.github.io
  • Posts
  • Archive
  • Audio to Scene
  • Give Feedback
  • About

利用Circle CI來更新GitHub Pages

 
  • Tool
  • Nov 21, 2020

有鑒於Travis CI要開始收費了,所以我將部落格的CI轉移到Circle CI上,在這篇文章記錄一下轉移的過程。

為什麼要使用Circle CI?

在之前的文章裡面,使用了Travis CI來幫助我們使用原先Github不支援的Jekyll套件,透過Travis CI的虛擬機幫我們安裝套件以後編譯網站,最後push到master branch上。

只不過因為種種的因素,現在Travis CI要開始收費了,一般沒有付費的使用者在使用完贈與的credits以後,就得要掏錢來請他們幫忙build,為了繼續當免費仔,我查詢了一下與Travis CI類似的服務,找到了Circle CI,而目前Circle CI的收費方式是每週給你2,500個credits,大約是每週給你250分鐘的時間使用2 CPUs / 4GB RAM的機器,用來更新網站應該是綽綽有餘了。

Circle CI的使用方式

建立設定檔

Circle CI和Travis CI使用的方式差不多,我們會需要在目錄底下創建.circleci/這個資料夾,Circle CI會去讀取資料夾內的設定檔.circleci/config.yml,來決定要怎麼build你的repository,底下是一個簡單的範例。

version: 2.1
orbs:
  ruby: circleci/ruby@0.1.2

jobs:
  build_and_push:
    docker:
      - image: circleci/ruby:2.6.3-stretch-node
    executor: ruby/default
    steps:
      - checkout
      - ruby/bundle-install
      - run:
          name: Build website
          command: bundle exec jekyll build
      - run:
          name: Install rsync
          command: sudo apt install -y rsync
      - deploy:
          name: Push to master branch
          command: |
            if [ -z ${CIRCLE_PULL_REQUEST} ]; then
              bash ./.circleci/push.sh
            fi

workflows:
  version: 2
  update_website:
    jobs:
      - build_and_push:
          filters:
            branches:
              only: source

設定檔裡面我們需要自己修改的部分是jobs和workflows。

jobs裡面會定義各式各樣的工作,可以想成是function一樣的地位,會執行設定好的steps,其中checkout和ruby/bundle-install是原本範本裡面就有的兩個步驟,做的事情分別是把程式碼抓下來、安裝ruby的套件,如果想要在docker裡面安裝其他套件的話,可以透過sudo apt install來安裝。

值得一提的是,在最後一步的deploy,如果有給Circle CI Github的token的話,這步會直接幫你設定好,不需要自己在script裡面把token用環境變數帶進來。

workflows可以想成是main function,會定義要執行哪些jobs,其中filters是決定要不要執行這個job的條件,像上面例子的設定是只有source branch的commit才會執行build_and_push這個job。

連結GitHub與Circle CI

在建立好設定檔以後,接下來就是連結GitHub和Circle CI,要做的事情大概如下:

  1. 創建帳號並選擇你想要連結的repository

    直接上去Circle CI的網站透過GitHub帳號登入,授權以後就可以看到自己的repository了

  2. 給予Circle CI讀取和push的權限

    到Project Settings裡面的SSH Keys,在User Key的地方有個按鈕可以幫你跟GitHub說你想要讓Circle CI有權限push到這邊,授權完成以後就可以在畫面上看到Circle CI獲得的key了

  3. (Optional) 設定環境變數

    在Project Settings裡面的Environment Variables可以依據個人的需要設定環境變數

在做完上述的事情以後,接下來push的commit就會被Circle CI發現並自動幫你build了。

Reference

  • Deploying Jekyll to GitHub Pages with CircleCI 2.0
PREVIOUSPython Import Introduction
NEXT網路安全的基本知識
Search