joppot

コピペで絶対動く。説明を妥協しない

macにmiddlemanの環境構築をする

   

Pocket

of

概要

みなさんこんにちはcandleです。今回はmacにmiddlemanの環境構築をしてみたいと思います。
middlemanといえばwebサイト作成支援ツールみたいなものです。
githubやherokuなどに公開したりできて非常に便利です。

前提

brewを使用するのでxcodeのインストール。
brewの準備はしておいてください。

SPONSORED LINK


rbenvをインストールする

middlemanはrubyで動いています。なのでrubyのバージョンとの相性が重要になっていると思います。
macに入っているrubyは往々にして古いことが多いです。だからと言って最新バージョンを入れても場合によってはライブラリが動かなかったりします。
そこで、現在一番使いやすいrubyのバージョンを使うためにrubyのバージョン管理ツールrbenvをいれます。
これはbrewで簡単に入れられるので入れましょう。

brew install rbenv

installrbenvbybrew

続いて、ホームディレクトリにある.bash_profileを開いて、以下を記述します。

eval "$(rbenv init -)"

rbenvinit

rbenvのインストールが終わりました。

rubyをインストールする

それではrubyをインストールします。
インストールできるバージョンを確認します。

rbenv install --list

最新バージョンをインストールしましょう。
この記事を執筆中は2.3.1です。
2.3.1を探します。

checkrubyversion231

インストールします。

rbenv install 2.3.1

getruby231

時間がかかります。

以下のコマンドでMac全体でruby 2.3.1が使えるようにします。

rbenv global 2.3.1

バージョンを確認します。

ruby -v

2.3.1と出れば成功です。
もしも、でない場合は一度 rbenv rehashを走らせてもう一度グローバルの設定をしてみてください。
rubysantenni


middlemanのインストール

以下のコマンドでmiddlemanをインストールします。

gem install middleman

installing_middleman

エラーなく終わればmiddlemanのインストール終了です。


middlemanのプロジェクトを作成する

適当なフォルダでプロジェクトを作ってみましょう。

middeman init hello

質問が出てきます。
「Do you want to use Compass?」これはcssの拡張のcompasssというのを使うかという質問です。
続いて、「Do you want to use LiveReload? 」と質問されます。
これはファイルが変更されるたびにブラウザを自動リロードする機能を使うかという質問です。
「Do you want a Rack-compatible config.ru file?」はRackの 機能なのか?よくわからないです。
こんな感じでに答えて作りました。

middleman-init

hello プロジェクトに移動して

cd hello

middleman serverと打ち込みサーバーを起動しましょう。

middleman server

startserver

あとはlocalhostの4567ポートにアクセスすれば見れるはずです。

ブラウザで

http://localhost:4567

にアクセスします。

welcometomiddleman

まとめ

動きましたね。

 - プログラミング