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 を使う

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
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.