joppot

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

プログラミング

macにmiddlemanの環境構築をする

投稿日:


of

概要

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

前提

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



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

まとめ

動きましたね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ElastiCacheのmemcachedとEC2上のrailsとdalli-elasticacheを使ってキャッシュ管理する

概要 皆さんこんにちはcandleです。今回はaws上にあるElastiCacheというサービスを使って railsのキャッシュを管理したいと思います。 キャッシュというのはwebサービス上でよく使う …

railsのwebrickでi18nの言語切り分けをサブドメインで設定する

概要 みなさんこんにちはcandleです。最近では海外展開も視野に入れたwebアプリケーションの開発が行われることが多くなってきているような気がします。 そうなってくると、webアプリケーションの国際 …

wordpressのbogoプラグインのショートコードをカスタマイズする

English 日本語 概要 みなさんこんにちはcandleです。 今回はwordpress bogoのショートコードをカスタマイズしてみたいと思います。 紹介する項目は以下の2つです。 国旗の表示、 …

React webでsematic-ui-reactを使い基本的なサイトを作成する

概要 みなさんこんにちはcandleです。今回はSemantic UIを使ってReactのデザイン開発をして見たいと思います。 Semantic UIはCSSフレームワークの1つで他に有名なところはT …

react-lazyloadを使って画像を遅延ロードをする

概要 みなさんこんにちはcandleです。今回はreact-lazyloadを使って画像の遅延読み込みをしてみましょう。SPAにおける問題は最初の読み込み時の遅さです。その中でも画像が多いサイトになる …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー