Jekyll -> Middleman-blogに移行しました
ブログエンジンをJekyll -> Middleman-blogに移行しました。
移行した一番の理由は、Liquid記法({% %}
みたいなの)にいまいち慣れなかったことです。
移行に際してやったこと
デザイン・レイアウト
jekyllの時は Jekyll Themes & Template の中から選んでそのデザインを使っていたのですが、今回は自分でカスタマイズしやすいようThemeを使わないことにしました。
まず、CSSフレームワークとして Foundation を使いました。
数年前にver.5が出たと思ったのですが、もうver.6がリリースされているんですね…。
軽量・シンプルでドキュメントもしっかりしていて使いやすかったです。
独自スタイルの追加は Sass で書いて、 webpack でCompileしています。
JSはES2015で書けるようにしています。が、まだ特に書いてはいないです^^;
Middlemanには 外部パイプライン という機能があり、middleman server
や middleman 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ライクな ヘルパーメソッド も用意してあるし、とにかくハードルが低かったです。