ローカルでビルドしたサイトをGitHub Pagesに取り込む際にCircleCIで自動テストする方法

  • Home
  • テクニックまとめ
  • ローカルでビルドしたサイトをGitHub Pagesに取り込む際にCircleCIで自動テストする方法

これまで、このサイトは以下のフローで運用してきました。

  • Hugoでサイトを生成
  • Xenu’s Link Sleuthでリンク切れがないか確認
  • 問題がなければ、GitHubの開発用ブランチ(development)にpush
  • GitHub上で公開用ブランチ(master)にプルリクエストを送る
  • 確認して、OKならマージ

サイトのリンク切れについては、GitHubにpushする直前にツールを使ってチェックしていましたが、CIツールのCircleCIを使うと、プルリクエストを送る際に、自動でリンク切れや画像のaltタグの入れ忘れなどのエラーをチェックしておくように設定することができます。

チェックには、Jekyll向けに開発されたKicksterにならい、HTML::Prooferを使うことにしました。以下ではCircleCIとHTML::Prooferの2つを組み合わせて運用する方法について解説します。

準備

以下のファイルを、開発用ブランチの一番上の階層に作成します。

  • Gemfile
  • circle.yml

Gemfileの中身は次の通りです。

source "https://rubygems.org"
gem 'html-proofer'

circle.ymlは次の通りです。

# http://tech.feedforce.jp/github-pages-deploy-with-circleci.html
general:
  branches:
    ignore:
      - gh-pages

machine:
  ruby:
    version: 2.2.3

dependencies:
  override:
    # http://stackoverflow.com/a/31032379
    - bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3

test:
  post:
    # https://github.com/gjtorikian/html-proofer
    - bundle exec htmlproof . --disable-external --alt-ignore '/.*/' --file-ignore /.*vendor\/bundle*/

generalのブロックで、公開用のブランチ(ここではgh-pages)を除きます。こうしておかないと、開発用ブランチから公開用ブランチにマージした際にもビルドが実行されます。実害があるわけではありませんが、無料プランでは並行ビルドが行えないので、処理対象から外しておきます。

dependenciesのブロックでは、HTML::Prooferの依存パッケージをインストールするよう設定しています。vendor/bundleにキャッシュがあるかどうかチェックして、無ければ並列でbundle installを行います。gem install html-prooferでも動きますが、パッケージのキャッシュが保存されません。

testのブロックでは、htmlproofについて設定します。bundle exec htmlproof .とすれば、ブランチ内の全てのHTMLファイルについてテストが行われます。そのままだとbundle installでインストールされたパッケージの内部のHTMLファイルについてもテストの対象になるので、--file-ignoreでvendor/bundleをパスに含むファイルをチェックから除くよう設定しておきます。

この他、外部リンク、imgタグのalt属性をチェックから除くオプションなども設定できます(上記では設定してあります)。オプションの詳細については、以下の公式ページにて確認してみてください。

https://github.com/gjtorikian/html-proofer#configuration

--alt-ignoreと似て非なるオプションに--empty-alt-ignoreがあります。前者はalt属性そのものを無視するオプションで、後者はalt属性が空であるかどうかをチェックするためのオプションです。混同しないよう要注意です。

設定と運用

Gemfileとcircle.ymlを開発用ブランチにpushしたら、次にリポジトリをCircleCIに登録します。

リポジトリを登録すると、自動でビルドが走ります。チェックが問題なく終了すれば、「HTML-Proofer finished successfully」と表示されます。

リンク切れなどのエラーがあった場合は、以下のように表示されます。HTMLファイルを修正、再度git pushすると、新たにビルドが走ります。

プルリクエストでは次のように表示されます。エラーが修正されたことを確認し、GitHub上から公開用ブランチにマージすれば完了です。

終わりに

CIツールはプログラム開発用のツールだと思っていましたが、少し工夫すれば、HTMLのエラーチェックから、デプロイ作業まで行うことができます。作業を自動化して工数を減らすと、その分エラーが起きる可能性を減らせるので、ぜひ取り入れてみてください。

参考にしたサイト

  • Home
  • テクニックまとめ
  • ローカルでビルドしたサイトをGitHub Pagesに取り込む際にCircleCIで自動テストする方法