【Middleman】 Slim+Sass+Coffeescript+Bootstrap+Heroku

Middlemanを利用して、簡単に性的なサイトが作れます。
SlimとSassとCoffeescriptを使うと、コードが短くなって、コーディングすることが楽になります。Bootstrapなども利用できます。

Middlemanをインストール

gem install middleman

新しいMiddlemanサイトを作る

middleman init sample-app

サイトを動かす

middleman s

livereload を使う

1
gem 'middleman-livereload'

1
2
3
4
# Reload the browser automatically whenever files change
configure :development do
  activate :livereload
end

Slimを使う

1
gem 'slim'

ファイル名を変更
layout.erb => layout.html.slim
index.html.erb => index.html.slim

Sassを使う

ファイル名を変更
site.css => site.css.sass

Coffeeを使う

ファイル名を変更
site.js => site.js.coffee

さらに、Bootstrapを使うなら、以下のように設定したらできると思います。

1
2
gem 'jquery-middleman'
gem 'bootstrap-sass'

1
2
3
//= require jquery
//= require bootstrap-sprockets
//= require_tree .

1
2
@import bootstrap-sprockets
@import bootstrap

Herokuにサイトを開発するには、以下のファイルを作るのが必要です

1
web: bundle exec middleman build && middleman server -p $PORT