Cuộc sống Nhật Bản
Yuto Blog

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

Nội dung chính

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
Updated at 2023-05-09
Nếu bài viết có ích thì các bạn hãy chia sẻ nhé
Rate this article: 4.9/5 (56 ratings)
You didn't rate yet
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.