2013年10月29日

静的サイトジェネレータ「Middleman」の使い方

ちょっと気になったので「Middleman
」を軽く試してみました。Ruby on Railsの超シンプル版といった感じでしょうか?静的HTMLを出力するので最終的な成果物がhtmlの場合もそのジェネレータとして利用できる感じです。

インストール



「Middleman」はRubyのツールなので以下のコマンドでインストール。

sudo gem install middleman


使い方



ターミナルでプロジェクトディレクトリに移動して以下のコマンドを実行するとフォルダの中にプロジェクトのスケルトンを作ります

middleman init my_new_project


そうすると以下のようにエラーが

Ruby 1.8 requires the 'ruby18_source_location' gem be added to your Gemfile


Ruby 1.8.7なのでとりあえずGEMファイルだけインストール

sudo gem install ruby18_source_location


もう一度initを実行したら「my_new_project」ディレクトリが作成されましたが以下のようなエラーが出た。

Gem::RemoteFetcher::FetchError: too many connection resets (http://tokyo-m.rubygems.org/gems/rb-fsevent-0.9.3.gem)
An error occurred while installing rb-fsevent (0.9.3), and Bundler cannot
continue.
Make sure that `gem install rb-fsevent -v '0.9.3'` succeeds before bundling.


言われたとおり以下のコマンドでgemをインストールする。

sudo gem install rb-fsevent -v '0.9.3'


あと、とりあえずプロジェクトディレクトリに移動してミスったやつもインストールしておく。

cd my_new_project
bundle install


つぎに、ローカルサーバーを立ち上げてみましょ。

cd my_project
bundle exec middleman server


http://localhost:4567/にアクセスするとサイトが表示される

つぎにHTMLをいじっていみる

sourceのindex.html.erbをひらいて以下のように変更

---
title: hellow world
---

<p>hellow world


ブラウザをリロードするとちゃんと変更されてる。

layouts/layout.erbでベーステンプレートを修正してみる。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><%= current_page.data.title %></title>
<%= stylesheet_link_tag "all" %>
<%= javascript_include_tag "all" %>
</head>
<body class="<%= page_classes %>">
<%= yield %>
</body>
</html>


こちらもブラウザをリロードするとちゃんと変更されてる。

Sass/Compassはデフォルトで利用できるのstylesheets/all.cssをall.scssに変更するだけでOK

@charset "utf-8";
body{
background:red;
p{
color:white
}
}


最後に以下のコマンドで静的なファイルを生成することができます。

middleman build
posted by ねこまんま at 14:21 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック