このページを改善する

CircleCI

Jekyllで生成されたWebサイトのビルド、テスト、およびデプロイは、継続的インテグレーションおよびデリバリーツールであるCircleCIを使用して迅速に行うことができます。CircleCIはGitHubとBitbucketをサポートしており、オープンソースまたはプライベートリポジトリを使用して無料で開始できます。

1. CircleCIでプロジェクトをフォローする

CircleCIでプロジェクトのビルドを開始するには、CircleCIのWebサイトからプロジェクトを「フォロー」するだけです。

「プロジェクトを追加」ページにアクセスします。
左側のGitHubまたはBitbucketタブから、ユーザーまたは組織を選択します。
リストからプロジェクトを見つけ、右側の「プロジェクトをビルド」をクリックします。
最初のビルドは自動的に開始されます。リポジトリのルートに.circleci/config.ymlファイルを作成することで、CircleCIにプロジェクトのビルド方法を指示できます。

2. 依存関係

Jekyllプロジェクト（CircleCIの有無にかかわらず）の依存関係を管理する最も簡単な方法は、Gemfileを使用することです。Jekyll、Jekyllプラグイン、HTML Proofer、および使用しているその他のgemをGemfileに記述する必要があります。Gemfile.lockのバージョン管理も忘れないでください。 Gemfileの例を次に示します。

source 'https://rubygems.org'

ruby '2.7.4'

gem "jekyll"
gem "html-proofer"

    - step:
       run: bundle install

3. テスト

実行できる最も基本的なテストは、jekyll buildが実際に機能するかどうかを確認することです。これは、生成されたサイトで実行する可能性のある他のテストのブロッカー、つまり依存関係です。そのため、dependenciesフェーズでBundler経由で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には、ヘルプのためのオンラインコミュニティもあります。