ブログエンジンをJekyll -> Middleman-blogに移行しました。
移行した一番の理由は、Liquid記法({% %}みたいなの)にいまいち慣れなかったことです。

middleman-logo

移行に際してやったこと

デザイン・レイアウト

jekyllの時は Jekyll Themes & Template の中から選んでそのデザインを使っていたのですが、今回は自分でカスタマイズしやすいようThemeを使わないことにしました。

まず、CSSフレームワークとして Foundation を使いました。
数年前にver.5が出たと思ったのですが、もうver.6がリリースされているんですね…。
軽量・シンプルでドキュメントもしっかりしていて使いやすかったです。

独自スタイルの追加は Sass で書いて、 webpack でCompileしています。
JSはES2015で書けるようにしています。が、まだ特に書いてはいないです^^;

Middlemanには 外部パイプライン という機能があり、middleman servermiddleman buildの時にフロントエンドのコマンドを実行するよう設定できます。

activate :external_pipeline,
  name: :webpack,
  command: build? ? "./node_modules/webpack/bin/webpack.js --bail" : "./node_modules/webpack/bin/webpack.js --watch -d",
  source: ".tmp/dist",
  latency: 1

テンプレート

Railsの開発で慣れているSlimを採用しました。
erb書いてる時に比べて精神状態が良好に保たれます。

微妙にハマったのがpartialの書き方で、v4 へのアップグレードにもあるように、partials_dirの設定オプションが無くなっています。
部分テンプレートの指定はsourceからの相対パスでpartial 'partials/my_partial'のように書くことになります。

また、特に指定をしなければpartials以下もビルド対象となってしまうので、ビルド対象外として設定すると良いです。

ignore 'partials/*'

これは開発時に気づきにくい罠でした。

記事の移行

元々Jekyllの記事は Front-matter + Markdown で書いていたので、ほぼそのままMiddleman-blogにコピーするだけで完了しました。

ファイル圧縮

アセットを圧縮するための設定がデフォルトで用意されています。

configure :build do
  activate :minify_css
  activate :minify_javascript
end

activate :minify_html

まだやれてないですが、画像の圧縮にはmiddleman-imageoptimを使うと良さそうです。

デプロイ

middleman-deployが便利です。
自分はGitHub Pagesで公開しているので、masterブランチにPushして完了です。

activate :deploy do |deploy|
  deploy.deploy_method = :git
  deploy.branch = 'master' # default: gh-pages
  deploy.build_before = true # default: false
end

感想

控えめに言って Middleman 最高でした!
サイト作るのに必要だなと思うものがデフォルトで付いてたり拡張として用意してあって、たくさん楽できました。
あとはRailsライクな ヘルパーメソッド も用意してあるし、とにかくハードルが低かったです。