EagleLand

MiddlemanとTravis CIでgh-pagesを運用したら身長が伸びた

Published at 2013-08-30

gh-pagesブランチの更新自動化がゴール。masterブランチにpushするだけで内容を動的に取得してgh-pagesブランチにpushする。今回もTravisの力を借りる。以下がポイント。

middlemanのインストール

middlemanはrubyで動く静的サイトジェネジェネレータ。テンプレートをほぼHTMLで記述することが出来て、ブログ等の管理を非常に簡単にすることが可能。jekyll使ったことのある人なら学習コストはさらに低め。詳しくはこの辺りが参考になる。

まずはmiddlemanのインストールから。

$ gem install middleman

プロジェクト名を指定し、middleman init。

$ middleman init middleman-playground

カレントディレクトリにmiddleman-playgroundというディレクトリが作成され、その配下に色々とファイルが生成されている。

├─ source
│   ├- images
│   │   └...
│   ├- javascripts
│   │   └...
│   ├- layouts
│   │   └...
│   ├- stylesheets
│   │   └...
│   └- index.html.erb
├─ .gitignore
├─ config.rb
├─ Gemfile
└─ Gemfile.lock

middleman buildを実行するとsourceフォルダ下を出力のリソースとし、buildフォルダに静的ファイルが生成される。このbuild配下をデプロイすることになる。

config.rb

ルートディレクトリに、config.rbという設定ファイルがあるので、設定を自分好みに変えてみる。

set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'

お分かりの通り、何をCSSディレクトリとして扱うかの設定。ただし、source配下のディレクトリはそのままbuildに出力されるだけで、システム内部で扱う変数に過ぎない。ということで、source配下のディレクトリ名とconfig.rbをそれぞれ以下のように編集。

set :css_dir, 'css'
set :js_dir, 'js'
set :images_dir, 'img'

コメントアウトすればjsやcssの圧縮もしてくれそうな行もチラホラ。

middleman server

soruce配下の変更を監視して、適時ビルドしてくれる。このあたりもjekyllと似てる。サイトの構築デバッグ時に使うことになりそうな感じ。

Travis側の設定

Travisからgithubにコミットするには、GitHubにOAuthトークンを利用しTravisのセキュアキーを使用する必要がある。GitHubのトークンを設定ファイルに記述するのは良くないので、travisコマンドラインから暗号化する。

まずはGitHubのトークンをApplicationsから、Personal Access TokensのCreateで作成。次にtravisのコマンドラインツールからsecureキーを取得。

$ gem install travis
$ travis encrypt -r 1000ch/middleman-playground "GH_TOKEN=<生成したGitHubトークン>"

生成されたキーを.travis.ymlに追記。

language: ruby
rvm: 2.0.0
env:
  global:
    - GIT_COMMITTER_NAME=1000ch
    - [email protected]
    - GIT_AUTHOR_NAME=1000ch
    - [email protected]
    - secure: [トークン]
before_script:
    - git clone --quiet https://github.com/1000ch/middleman-playground.git build
    - pushd build
    - git checkout -b gh-pages
    - popd
script:
    - bundle exec middleman build
after_success:
    - cd build
    - git add -A
    - git commit -m 'Update'
    - '[ "$TRAVIS_BRANCH" == "master" ] && [ $GH_TOKEN ] && git push --quiet https://[email protected]/1000ch/middleman-playground.git gh-pages 2> /dev/null'

git push時に--quietをつけないと、トークンが表示されてしまうので注意。

以上を踏まえたサンプル

1000ch/middleman-playgroundに成果物を置いた。Gruntでsassファイルをコンパイルするというのを追加している。Travis上でcloneしてきたmasterブランチで、Grunt周りをひと通りインストールして（rakeでいいじゃんというツッコミは一旦なしで）、grunt-contrib-sassでコンパイルされたcssをgh-pagesにコミットするという手順になってる。

が、このままだとrubyプロジェクトなので、Travis上でbundle install --deploymentした場合に、Sassがvendor/bundle配下にインストールされて、gruntから参照出来ずにビルドがこける。最初、--binstubをつけて解決したかと思ったが、これを付けて解決したというよりは、--deploymentが外れたせいだった。

所感

今回やったGruntによるsassのコンパイルは正直な所微妙なやり方で、middlemanはcompassの機能を含んでいるので、middleman + Gruntの組み合わせがそもそもという話がある。Sassのコンパイルをするだけならmiddleman + rakeのほうが自然ぽい。

ジェネレータとしてのmiddlemanはjekyllと似ている。ブログモードとかもあったり、初期設定がjekyllより気が利いているかもしれない。あと、本来の目的であるTravisからのgh-pagesブランチへのgit pushは、middlemanなしでももちろん出来る。

尚、身長が伸びるかどうかは個人差があります。

参考

タイトルと URL をコピーしました