いまの派遣先のプロジェクトが軒並みRuby（Rails）製で、ソシャゲ（主にPerl製）しかやってない人はテンプレートの書き方から覚えておきましょう、ということになり所属部署で勉強会が開かれるらしいのですが、負けず嫌いの自分は「だったら先に勉強してやんよ」的な感じでとりあえず動かしてみることにしました。

で、公式見つつ見よう見まね的にやってたんですが、結構つまづきポイントがあったので（特にデプロイ周り）メモに残しておきます。

middlemanとは

Middleman: 作業を効率化するフロントエンド開発ツール

これ。
いわゆる「Rubyで動かす静的サイトジェネレーター」ってやつ…なんですかね？
大雑把に言うと、生のHTMLとかCSSをシコシコ1枚ずつ書くのではなくて、テンプレート化＆共通化できるものは共通化したりして効率よく静的Webサイト作っちゃいましょう、みたいな感じ。

まあこんな雑な説明よりは公式とか検索して使ってる人のブログとか見たほうが理解は早いと思います。

インストールとプロジェクトの作成

もともとプリプロセッサは使ってたし、rubygemsに関しては慣れてはいるので早速インストール。

% gem install middleman

普段からrubygemsのメンテナンスしてれば、インストールではそんなつまづくことはないと思います。
続いてプロジェクトを作成したいディレクトリにcdして

% middleman init project-name

project-nameは自分で好きな名前をつけてください。

project-name/
+-- .gitignore
+-- Gemfile
+-- Gemfile.lock
+-- config.rb
+-- source
    +-- images
    ¦   +-- background.png
    ¦   +-- middleman.png
    +-- index.html.erb
    +-- javascripts
    ¦   +-- all.js
    +-- layouts
    ¦   +-- layout.erb
    +-- stylesheets
        +-- all.css
        +-- normalize.css

こういうディレクトリ構成でファイルが出来てたらおｋ。
これで最低限の準備は完了。

config.rbの編集

デフォルトではcss_dirが「stylesheets」だったりjs_dirが「javascript」だったりするので、いつも使ってる違和感がないディレクトリ名に直したりします。このままでいい人は何もしなくておｋ。

set :css_dir, 'css'
set :js_dir, 'js'
set :images_dir, 'img'

ディレクトリ名を直したらcss内の画像pathなども変更しましょう。

あとはライブリロードを有効にしてみます。

# Reload the browser automatically whenever files change
# configure :development do
   activate :livereload
# end

ここは activate :livereload のコメントマークを外すだけでおｋ。
これでcommand+Sで保存したら即プレビューサーバに変更が反映されるようになります。

プレビューサーバを起動する

ここまでの流れだと、現在地はプロジェクトディレクトリの上だと思うので、% cd project-name でプロジェクトディレクトリ内に入ります。
起動コマンドは↓

% middleman server

で、一通りログが流れたあとに http://localhost:4567/ に移動すると…

f:id:montdsichel:20150721120852p:plain

こういう画面が出てきたら起動成功してます。

とりあえずbuildしてみる

ここでERb変更してみたりするのもいいんですが、まずはプロジェクト作成〜ビルドまでの一通りの流れを体験したいので、このままビルド（コンパイル）してみます。

control+Cでプレビューサーバを落としたあと

% middleman build

すると、一通りログが流れたあと、ルート直下に「build」ディレクトリが出来ます。
ここに格納されるのは静的なHTMLやCSSなので、これをサーバにFTPでアップロードすれば、プレビューサーバで見ていたままの静的サイトが公開できるというわけ。

deployの準備

今回の勉強会では Github Pages を使って公開することになっているので、deployの準備もしておきます。
deployは middleman-deploy というプラグインを使ってやります。

まずはルート直下にあるGemfileに

gem "middleman-deploy"

を追記。
普通に % gem install middleman-deploy でも入るんだけど、なんかこれだとコマンドが通らないとかなんとか…

追記したら

% bundle install

します。
これで middleman-deploy がインストール出来たので、いつでもデプロイできます。

Github側の準備

続いてデプロイ先の設定。
Githubにアカウントがある前提で話を進めます。

Github Pages には 2種類あるそうで。

ユーザページまたはグループページ
- アカウントにひとつだけ作れる Github Pages
  URLは http://アカウント名.github.com/
プロジェクトページ
- リポジトリごとに作れる Github Pages
  URLは http://アカウント名.github.com/リポジトリ名/

今回はプロジェクトページを作ります。

手順

Githubでプロジェクト用のリポジトリを作成
プロジェクトディレクトリ内で % git init
同じディレクトリ内でそのまま % git remote add origin リポジトリ名

これでgitの生成とリモート登録までができました。
あとは config.rb の configure :build do のスコープ内に

activate :asset_host, :host => "/リポジトリ名"

と、新規スコープとして

activate :deploy do |deploy|
  deploy.build_before = true
  deploy.method = :git
  deploy.branch = 'gh-pages'
end

を追記して

% bundle exec middleman deploy

をするとデプロイは完了です。
https://アカウント名.github.io/リポジトリ名/ にアクセスして、プレビューサーバで見たものと同じサイトが表示されていれば成功。

ここで最大のつまづきポイント

https://アカウント名.github.io/リポジトリ名/ に行ってみると…CSSが呼び出せてない！

インスペクタでheadの中身を確認すると、パスが /css/all.css になってます。そしてコンソールには「そんなファイルねーよ」というエラーが…

たぶんユーザーページの場合はルートに置かれるのでこれで呼び出せるんだと思うんですが、プロジェクトページの場合はリポジトリが下層ディレクトリになるっぽいので、パスをビルド時に書き換えるように設定しないとダメみたい。

いろいろ調べた結果、config.rb の configure :build do のスコープ内に

set :relative_links, true

を追記したら /リポジトリ名/css/all.css というパスで出力できるようになったっぽいです。

ちなみにプロジェクトページは gh-pages というブランチに置かれるので、独自ドメインで運用する場合はもう一手間必要になります。
今のところそういう運用予定はないので、ここでは割愛します。

これで「プロジェクト作成からビルド〜デプロイ」までの一連の流れが体験出来ました。
まだ意味わかんないこともたくさんありますが、それは勉強会を重ねていって、理解できた頃にまとめとしてまたエントリに書こうと思います。

なお、今回は以下のサイトを参考にさせていただきました。

middleman で構築したサイトを GitHub Pages で公開するまでの流れをまとめてみた - C++でゲームプログラミング

Github Pages について整理しておきます | そんなこと覚えてない

まんげつのつぶやき

ただのメモです

middlemanをちょっと勉強してみたけど早速つまづいた話