Middlemanを使ってみた
Middlemanは,HamlとSass, 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にある.
参考