2014-07-08
■ [ruby] Rails使いが静的サイト作るならmiddlemanがいいよ〜という話をした
最近middlemanを少し触っていたので、社内勉強会でその話をした。
middlemanとは
Ruby製の静的サイトジェネレータ。erbとかmarkdownとかsassとかを書くと、HTMLやCSSにコンパイルしてくれるやつ。 (競合はJekyllとかNanocとかだけどあまり詳しくないので省略)
RubyKaigi 2013のサイトでも使われていたりした。https://github.com/ruby-no-kai/rubykaigi2013
Railsとの親和性
普段Railsのビューを書いてると素のHTMLを書くのが辛くなるけど、middlemanならRailsの便利なあれこれがそのまま使えるので、Railsのビューを書くような感じで静的サイトが作れる。
ディレクトリ構成
middlemanのディレクトリ構成は分かりやすい。 まずsource/以下に.erb、.md、.cssなどを置く。 で、middleman buildコマンドを叩くと、source/以下がまるごとbuild/というディレクトリにコピーされる感じ。その際に.mdから.htmlへの変換や、レイアウトの適用が行われる。 build/以下が完成したサイト一式になるので、あとはrsync等でコピーしてやれば良いというわけ。
チュートリアル
オフィシャルな日本語ドキュメントがあるので、それを参照する。 http://middlemanapp.com/jp/basics/getting-started/
おおむね以下のような感じ。
$ gem install middleman
$ middleman init my_new_website
$ bundle exec middleman server
$ open http://localhost:4567/
$ bundle exec middleman build
プラグインとか
- middleman-deploy
- gh-pagesにデプロイするときに便利
- middleman-blog
- ブログっぽいものを生成するための公式拡張
- 動的な部分はerbになってるのでカスタマイズしやすい
- コメント欄は、TwitterとかDisqusにアウトソース
- middleman-syntax
- ソースコードの構文ハイライトを行う
- font-awesome-middleman
- Font Awesome(アイコンセット)のサポート
CSSについて
一応プロジェクトテンプレートみたいな仕組みはあるんだけど、これはCSSフレームワークに何を選ぶかとかそういう話で、入れるだけで見た目が格好良くなるやつ(いわゆるテーマ機能)ではない。 http://directory.middlemanapp.com/#/templates/all ので、Bootstrapが入るテンプレートを使うか、あるいはフリーのCSS素材サイト (http://templated.co/ とか) から一式ダウンロードしてlayout.erbに貼るのが良いかも。
今回はKubeというCSSフレームワークを使った。JSを使っていないシンプルなやつ。