Middlemanを使ってみた

deeeet.com

Middlemanは,HamlSass, Compassがデフォルトで使えるため,簡単にいい感じのサイトをつくることができる.例えば,Packerの公式サイトなどMiddlemanで作られていてとてもいい感じだ(Githubのレポジトリみるかぎり,Mitchellさんデザインも自分でやっている…?).他にも個人のBlogをMiddlemanで作ってるひともいる.今後,簡単なサイト立てるときはまた使いそうなので,まとめておく.

HamlやSassを使うために特別に設定を書く必要はない.ただ拡張子を,Hamlの場合は,.html.haml(laytoutファイルは.haml)に,Sassの場合は,.scssにしておけばよい.buildの際は,HamlはhtmlにSassはcssとして生成される.Sassは:css_dirのアンダースコアで始まらないファイルがcssとして吐き出される(つまり@importされるpartialなどは無視される).

設定ファイルであるconfig.rbでは,Liveloadを有効にしておくと,ソースを更新する度に,ブラウザで再読み込みをしてくれるので便利.

activate :livereload

デプロイなどはOctopressと同じように以下のようなRakeタスクを作っておくと楽になる.

ssh_user       = ""
ssh_port       = ""
document_root  = "~/www/"
rsync_args     = ""
source         = "build"

desc "Build middleman"
task :build do
    system("middleman build")
end

desc "Deploy website via rsync"
task :deploy do
    puts "## Deploying website via Rsync"
    system("rsync -avze 'ssh -p #{ssh_port}' #{exclude} #{rsync_args} #{"--delete" unless rsync_delete == false} #{source}/ #{ssh_user}:#{document_root}")
end

desc "Build & deploy"
task :gen_deploy do
    Rake::Task["build"].invoke
    Rake::Task["deploy"].invoke
end

Compassは初めて使ったがとても便利だった.例えば,hoverしたときの色の変化にtransition効果(時間変化)をつけたいとする.この場合は,CompassのCSS3モジュールにmixinが準備されているので,以下のように呼び出してすぐに使える.

@import "compass/css3/transition";
a:hover{
    color: $color-hover;
    @include transition-duration(1s);
}

他にも公式のReferenceのサンプル等を参考にすれば,複雑なCSSの知識なしにいろいろできる.

Font Awesomeも簡単に使える.middleman用のライブラリcristianferrarig/font-awesome-middlemanをインストールして,:fonts_dirに公式からダウンロードしたFontを配置するだけ.

今回作成したサイトのソースはtcnksm/deeeet.comにある.

参考