GitHub 上の Middleman プロジェクトを GitHub Pages に自動デプロイ

概要

GitHub 上の Middleman プロジェクトを Wercker で追う．
コミット毎に Wercker 上で自動ビルドし，GitHub Pages に自動デプロイする．

つまり，Middleman プロジェクトにコミットするだけで変更が GitHub Pages に反映されるステキシステムを構築するお話．

前提

• Middleman プロジェクトを GitHub で管理している
• CI (継続的インテグレーション) には Wercker を使います

手順

GitHub 側の設定

GitHub Pages のリポジトリを作成

リポジトリ名を username.github.io として新たにリポジトリを作成します．

Middleman プロジェクトに wercker.yml を追加

Middleman プロジェクトのリポジトリのルートに wercker.yml を追加します．

wercker.yml

box: ruby

build:
    steps:
        - script:
            name: fix nokogiri build
            code: bundle config build.nokogiri --use-system-libraries

        - bundle-install

        - script:
            name: install node
            code: |
                curl -sL https://deb.nodesource.com/setup_5.x | bash -
                apt-get install -y nodejs

        - script:
            name: build with middleman
            code: bundle exec middleman build --verbose

deploy:
    steps:
        - lukevivier/gh-pages:
            token: $GITHUB_TOKEN
            basedir: ./build
            repo: username/username.github.io

repo: username/username.github.io の username はプレースホルダです．

他のオプションについては https://github.com/lvivier/step-gh-pages を参照．

アクセストークンを取得

Wercker から GitHub 上のプロジェクトにアクセスするためのトークンを取得します．
https://github.com/settings/tokens
の Generate new token から権限を選択して Wercker 用のトークンを生成．

Wercker の設定

プロジェクトの登録

Create Application で Wercker に GitHub プロジェクトを登録します．

1. Choose a Git provider
   • GitHub を選択します．
2. Select a repository
   • Middleman プロジェクトのリポジトリを指定します．
3. Configure access
   • リポジトリの内容に応じて推奨のアクセス方法が選ばれます．
4. Setup your wercker.yml
   • さっきリポジトリに追加した wecker.yml が妥当であれば特にすることはありません．
5. Awesome! You are all done!
   • おしまい．

デプロイ先の設定

Application settings の Targets で，

• Deploy target name
  • username.github.io
• Auto deploy
  • master

を設定します．

ビルドが成功した場合に自動でデプロイする場合は auto deploy successful builds to branch(es) にチェックを入れてください．
チェックしなければ手動でデプロイすることになります．

GitHub のアクセストークンを環境変数に追加

Application settings の Environment variables で Add new variable．

変数名は GITHUB_TOKEN（wercker.yml の token: $GITHUB_TOKEN を参照のこと），テキストフィールドに GitHub のアクセストークンをペースト．
Protected のチェックボックスは入れた方がいいと思う．

おしまい

Middleman リポジトリにコミットが送信されれば，自動的にビルドを行い，GitHub Page にデプロイされます．

参考

• http://qiita.com/shuhei/items/c295f061cba7b5f0d112
• http://devcenter.wercker.com/docs/steps/script-step.html
• http://stackoverflow.com/questions/9202324/execjs-could-not-find-a-javascript-runtime-but-execjs-and-therubyracer-are-in
• https://github.com/wercker/support/issues/161