CircleCI

使用 CircleCI,一個持續整合和交付工具,可以快速建置、測試和部署您的 Jekyll 生成的網站。CircleCI 支援 GitHubBitbucket,您可以使用開源或私人儲存庫免費開始使用。

1. 在 CircleCI 上追蹤您的專案

要在 CircleCI 上開始建置您的專案,您只需從 CircleCI 的網站「追蹤」您的專案

  1. 前往「新增專案」頁面
  2. 從左邊的 GitHub 或 Bitbucket 標籤中,選擇一個使用者或組織。
  3. 在清單中找到您的專案,然後按一下右邊的「建置專案」。
  4. 第一個建置會自行開始。你可以透過在儲存庫根目錄建立 .circleci/config.yml 檔案,開始告訴 CircleCI 如何建置你的專案。

2. 相依性

管理 Jekyll 專案相依性的最簡單方法(無論是否使用 CircleCI)是透過 Gemfile。你會希望在 Gemfile 中擁有 Jekyll、任何 Jekyll 外掛程式、HTML Proofer,以及你正在使用的任何其他 gem。別忘了也要對 Gemfile.lock 進行版本控制。以下是範例 Gemfile

source 'https://rubygems.org'

ruby '2.7.4'

gem "jekyll"
gem "html-proofer"
    - step:
       run: bundle install

3. 測試

可以執行的最基本測試是查看 jekyll build 是否實際運作。這是一個阻斷點,也就是你可能會在產生網站上執行的其他測試的相依性。因此,我們會透過 Bundler 在 dependencies 階段執行 Jekyll。

    - step:
        run: bundle exec jekyll build

HTML Proofer

建置網站後,執行測試以檢查有效的 HTML、中斷的連結等會很有用。有幾個工具可以使用,但 HTML Proofer 在 Jekyll 使用者之間很受歡迎。我們會在 test 階段執行它,並使用幾個偏好的旗標。查看 html-proofer README 以取得所有可用的旗標,或在本地執行 htmlproofer --help

    - step:
        run: bundle exec htmlproofer ./_site --check-html --disable-external

完整的範例 .circleci/config.yml 檔案

以下範例 .circleci/config.yml 說明如何將你的 Jekyll 專案部署到 AWS。要讓這個範例運作,你必須先設定 S3_BUCKET_NAME 環境變數

workflows:
  test-deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: master
version: 2.1
jobs:
  build:
    docker:
      - image: cimg/ruby:2.7.4
    environment:
      BUNDLE_PATH: ~/repo/vendor/bundle
    steps:
      - checkout
      - restore_cache:
          keys:
            - rubygems-v1-{{ checksum "Gemfile.lock" }}
            - rubygems-v1-fallback
      - run:
          name: Bundle Install
          command: bundle check || bundle install
      - save_cache:
          key: rubygems-v1-{{ checksum "Gemfile.lock" }}
          paths:
            - vendor/bundle
      - run:
          name: Jekyll build
          command: bundle exec jekyll build
      - run:
          name: HTMLProofer tests
          command: |
            bundle exec htmlproofer ./_site \
              --allow-hash-href \
              --check-favicon  \
              --check-html \
              --disable-external
      - persist_to_workspace:
          root: ./
          paths:
            - _site
  deploy:
    docker:
      - image: cimg/python:3.9.1
    environment:
      S3_BUCKET_NAME: <<YOUR BUCKET NAME HERE>>
    steps:
      - attach_workspace:
          at: ./
      - run:
          name: Install AWS CLI
          command: pip install awscli --upgrade --user
      - run:
          name: Upload to s3
          command: ~/.local/bin/aws s3 sync ./_site s3://$S3_BUCKET_NAME/ --delete --acl public-read

有問題嗎?

本指南完全開放原始碼。如果你有修正,請直接 編輯;如果你遇到問題需要協助,請 尋求協助。CircleCI 也有 線上社群 可以提供協助。