かた想い三年

一期一会を大切に

静的サイト生成にMiddlemanを使った話

おはようございます。

貴重な休日をもったいない過ごし方をしてしまったのでMiddlemanという便利な静的サイト生成ジェネレータを使ったお話をしようと思います。 知らない方のために説明しますと、 http://itochan.jp/ というコンテンツがありまして、今まで何のツールも使わない純粋な静的HTMLでした。 そのためページを追加するのに面倒だったわけです。

Middlemanの話はRuby界隈の人から見聞きしていたので前から興味がありました。せっかくの休日を自分のサイトをMiddlemanで生成するよう書きなおしました。本当にもったいない休日の過ごし方をしましたね。はーー。。

Middlemanとは

簡単にいえば静的サイト生成のジェネレータです。Jekyllというよく使われているジェネレータもあるようですが、ドキュメントを読んだ感じすぐ使うには大変そうだし、何よりもこんな怖い名前のもの使いたくないのでMiddlemanというよくわからないけどかっこいい名前のやつを選びました。完全に個人的な主観ですがJekyllを使うと悪い人になってしまいそうです。悪い人にはなりたくないです。やさしい人になりたい。やさしい人になるためにはどうしたらよいのでしょうか。教えてください。

使い方

まずはRubyGemsからmiddlemanをインストールします。

% gem install middleman

rails new するかの如く適当なディレクトリに移動したうえで middleman init を打ちます。

% middleman init foo

bundle install が走ります。お茶でも飲んで待ちましょうと言いたいところですが、割と何か飲んでいる余裕はないです。すぐに終わります。

middleman init によって作成されたディレクトリに移動をすると、

itochan@airchan:~/git% cd foo
itochan@airchan:~/git/foo% ls
Gemfile       Gemfile.lock  config.rb     source/

このような構成になっているはずです。

コンテンツを置くときはsourceディレクトリ以下に置きます。ActiveSupportが使えるのでRailsのような感覚で書けて大変便利です。

% ls source/
images/         index.html.erb  javascripts/    layouts/        stylesheets/

出力を確認したいとき

% middleman server
== The Middleman is loading
== The Middleman is standing watch at http://0.0.0.0:4567
== Inspect your site configuration at http://0.0.0.0:4567/__middleman/

これで http://localhost:4567 で確認ができます。middleman s でも同じことができます。

静的なHTMLとして出してほしいときは

% middleman build
      create  build/images/background.png
      create  build/images/middleman.png
      create  build/javascripts/all.js
      create  build/stylesheets/normalize.css
      create  build/stylesheets/all.css
      create  build/index.html

でbuildディレクトリ以下に出力できます。

% ls build/
images/      index.html   javascripts/ stylesheets/

テンプレートエンジン

デフォルトのテンプレートエンジンはerbですが、今回はslimを使っていて、CSSはSassを使っています。 Middlemanはtiltというどのようなテンプレートエンジンにも対応できるレンダラを使用していて、tiltが対応している数多くのテンプレートエンジンで好きに記述することができます。

デプロイ

middleman-deploy というgemがあり、Gemfileに書いて bundle install した上で、config.rbに

activate :deploy do |deploy|
  deploy.method = :rsync
  deploy.user = "user"
  deploy.host = "example.com"
  deploy.path = "/var/www/example.com"
end

などと書くと middleman deploy でデプロイできます。deploy.method = :git にすることによりGitもつかえるようです。GitHub Pagesにデプロイするような使い方をするときに使えます。

まとめ

悪人になりたくなければ静的サイト生成はJekyllではなくMiddlemanを使ったほうがよいのではないでしょうか。 今まで静的サイト生成ジェネレータを使っていなかっただけなので、Jekyllでもよかった感じがありますがMiddlemanを選んだのでしょうがないです。便利です。Jekyllを愛してやまない方ごめんなさい。

Middlemanがあまりにも便利すぎて一週間ぐらいはまわりの人にMiddlemanのことしか話さないかもしれません。関係者各位はよろしくお願いします。