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

<< JavaScriptの正規表現のmオプション | TOP | StyleDoccoの使い方 >>

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

タグ：middleman ruby SASS compass

【開発環境・ツールの最新記事】

posted by ねこまんま at 14:21 | Comment(0) | TrackBack(0) | 開発環境・ツール |

この記事へのコメント

コメントを書く

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