LoginSignup
5
5

More than 5 years have passed since last update.

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

Posted at

前提: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";
#-------
5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5