Improve this page

CircleCI

Jekyllによって生成されたWebサイトの構築、テスト、およびデプロイは、継続的な統合および配信ツールであるCircleCIを使用して素早く実行できます。CircleCIはGitHubとBitbucketをサポートしており、オープンソースまたはプライベートのリポジトリを使って無料で始めることができます。

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

CircleCIでプロジェクトの構築を開始するには、CircleCIのWebサイトからプロジェクトを’follow’するだけです。

‘Add Projects’ページへ行きます
左のGitHubかBitbucketタブから、ユーザーか組織を選択します。
リストからプロジェクトを見つけ出し、右の’Build project’をクリックします。
最初のビルドはそれ自身で始まります。リポジトリのrootにcircle.ymlファイルを作成することで、CircleCIにプロジェクトのビルド方法を指示することができます。

2. 依存関係

（CircleCIの利用に関係なく）Jekyllプロジェクトの依存関係管理の最も簡単な方法は、Gemfileの利用です。GemfileでJekyll、Jekyllプラグイン、HTML Proofer、その他のgemを使用することをお勧めします。Gemfile.lockのバージョンも忘れないでください。こちらがGemfileの例です。

source 'https://rubygems.org'

ruby '2.4.0'

gem 'jekyll'
gem 'html-proofer'

CircleCIは、Gemfileが存在することを検出し、dependenciesフェーズで自動的にbundle installを実行します。

3. テスト

最も基本的なテストは、jekyll buildがきちんと動くかを確認することです。これは、生成されたサイトで他のテストを実行するためのブロッカーであり、あなたがそうするなら依存関係です。そのため、dependenciesフェーズでBundler経由でJekyllを実行します。

dependencies:
  post:
    - bundle exec jekyll build

HTML Proofer

サイトを構築したら、有効なHTML、リンク切れなどを確認するためのテストを実行すると便利です。それにはいくつかのツールがありますが、HTML ProoferはJekyllユーザーの間で人気があります。いくつかの優先フラグを付けてtestフェーズで実行します。利用可能な全フラグについては、html-proofer READMEをチェックするか、またはhtmlproofer --helpをローカルで実行してください。

test:
  post:
    - bundle exec htmlproofer ./_site --check-html --disable-external

circle.ymlファイルの例

CircleCI v1

まとめると、こちらはcircle.ymlファイルがv1でどのように見えるかの例です。

machine:
  environment:
    NOKOGIRI_USE_SYSTEM_LIBRARIES: true # speeds up installation of html-proofer

dependencies:
  post:
    - bundle exec jekyll build

test:
  post:
    - bundle exec htmlproofer ./_site --allow-hash-href --check-favicon --check-html --disable-external

deployment:
  prod:
    branch: master
    commands:
      - rsync -va --delete ./_site username@my-website:/var/html

CircleCI v2

CircleCI v2はDockerベースのシステムです。以下のcircle.ymlの例は、JekyllプロジェクトのAWSへのデプロイ方法のデモです。これを機能させるには、まずS3_BUCKET_NAME 環境変数を設定する必要があります。

defaults: &defaults
  working_directory: ~/repo
version: 2
jobs:
  build:
    <<: *defaults
    docker:
      - image: circleci/ruby:2.5
    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:
    <<: *defaults
    docker:
      - image: circleci/python:3.6.3
    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
workflows:
  version: 2
  test-deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: master

疑問がありますか？

このガイドはオープンソースです。修正がある場合は編集を、トラブルがあり助けが必要な場合は助けを求めてください。CircleCIには、助けになるオンラインコミュニティーもあります。