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

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

Middlemanをインストール

gem install middleman

新しいMiddlemanサイトを作る

middleman init sample-app

サイトを動かす

middleman s

livereload を使う

Gemfile
gem 'middleman-livereload'
config.rb
# Reload the browser automatically whenever files change
configure :development do
  activate :livereload
end

Slimを使う

Gemfile
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を使うなら、以下のように設定したらできると思います。

Gemfile
gem 'jquery-middleman'
gem 'bootstrap-sass'
source/javascripts/site.js.coffee
//= require jquery
//= require bootstrap-sprockets
//= require_tree .
source/stylesheets/site.css.sass
@import bootstrap-sprockets
@import bootstrap

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

Procfile
web: bundle exec middleman build && middleman server -p $PORT
Created by Yuto at 2022-01-21 17:42
1
Like this article