Jekyll -> Middleman-blogに移行しました

2016-09-20 21:15
middleman jekyll blog

ブログエンジンを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ライクなヘルパーメソッドも用意してあるし、とにかくハードルが低かったです。


« React on Redux on Re...rspec_rake っていうGemをつ... »