Posted at

MiddlemanでTwitterBootstrap対応WEBサイトプロジェクトを生成する

More than 3 years have passed since last update.


前提:Mac+rbenv


rbenvのインストール

brew update

brew install rbenv ruby-build
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
mkdir ~/.rbenv/plugins
git clone https://github.com/sstephenson/rbenv-gem-rehash.git ~/.rbenv/plugins/rbenv-gem-rehash
git clone git://github.com/ianheggie/rbenv-binstubs.git ~/.rbenv/plugins/rbenv-binstubs

homebrewでRubyのバージョンマネージャーrbenvをインストール。

rbenvのプラグインで、rbenvを利用した場合に手間となるgemインストール毎のrbenv rehashコマンドを省略するrbenv-gem-rehashプラグインを入れる。

また、bundlerでディレクトリローカルにインストールしたgemをbundle exec GemName形式ではなく直接GemName形式で実行できるようにするrbenv-binstubsを入れる。


Rubyのインストールとbundlerの設定

rbenv install 2.0.0-p481

gem install bundler
bundle config --global path 'vendor/bundle'
bundle config --global bin 'vendor/bin'

使用するRubyのバージョン(利用可能な一覧は rbenv install -l で一覧可能)を決定し、インストール、gemを管理するbundlerも入れる。bundlerでインストールするgemはグローバルインストールではなく、ディレクトリ内にローカルインストールするように設定。


middlemanのインストール

プロジェクトのディレクトリを用意し、middlemanをインストール。ここでbundlerを利用し、middleman自体もディレクトリローカルにインストールしている。

mkdir projectDir && cd projectDir

bundle init
echo 'gem "middleman"' >> Gemfile
bundle install --path=vendor/bundle --binstubs=vendor/bin

gemのインストール過程で、rbenv: cannot rehash: ~/.rbenv/shims/.rbenv-shim existsというメッセージが表示された場合は、rbenv-gem-rehashrbenv-binstubsが上手く機能していない。時折発生するが、そういう時はrm ~/.rbenv/shims/.rbenv-shimしてrbenv rehashする。


プロジェクトのソースをMiddlemanで生成

#middlemanでカレントディレクトリ内にソースを生成

middleman init .
bundle install

#このディレクトリ内では現在使っているRubyバージョンで固定
cat ~/.rbenv/version >> .ruby-version


設定ファイル

vi source/config.rb

#-------
+ activate :livereload
+ config[:file_watcher_ignore] += [ /.idea\// ]
#-------

middleman serverコマンドで、ファイルに変更があった場合ブラウザを再読込させる機能livereload時に、IDE(統合開発環境)が自動生成するメタデータに反応すると面倒なので、不要なファイルをfile_watcher_ignoreに指定する。.ideaはRubyMineが生成するメタデータ。

#もし生成されるリンクを相対リンクにしたいとき

#-------
+ set :relative_links, true
#-------

デフォルトではmiddleman buildしたソース内のリンクは絶対リンクになります。常にドメインルートにサイトを配置するならば構いませんが、サブディレクトリでページを公開する場合は、相対リンクを有効にします。


TwitterBootstrapに対応

#Bootstrapt対応

echo 'gem "bootstrap-sass", require: false' >> Gemfile
bundle install

:require => falseは、Rails前提で作られたGemが、RailsやCompass内部のRails特有のイベントに自動でフックしようと試みるのを防ぎます。そのかわりに、Middlemanでは次のように手動でCSSからTwitterBootstrapを読み込むように設定します。

vi source/stylesheets/all.scss

#-------
@charset "utf-8";
+ @import "bootstrap";
#-------