Yuto Blog

Yuto Blog

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

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

Middlemanをインストール

gem install middleman

新しいMiddlemanサイトを作る

middleman init sample-app

サイトを動かす

middleman s

livereload を使う

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

Slimを使う

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

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

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

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

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.