middleman入門
事前準備
Amazon Linuxの場合。
# 必要なパッケージインストール
sudo yum install -y ruby23 ruby23-devel gcc gcc-c++ nginx git
sudo yum install nodejs --enablerepo=epel
# Rubyのバージョンを変更
sudo update-alternatives --set ruby /usr/bin/ruby2.3
# nginxのドキュメントルートを作成
sudo mkdir -p /var/www/html
sudo chmod 777 /var/www/html
ln -s /var/www/html ~/html
# nginxの設定
sudo vi /etc/nginx/nginx.conf
# EC2起動時にnginxを起動するように
sudo chkconfig nginx on
# 今すぐnginxを起動
sudo service nginx start
# middlemanに必要なgemをインストール
gem install middleman middleman-livereload middleman-compass middleman-syntax redcarpet
middlemanプロジェクト新規作成
mkdir m1
cd m1
middleman init
# Do you want to use Compass? などと聞かれるので、全て「y」でエンター。
ビルド
$ middleman build
create build/stylesheets/site.css
create build/images/middleman-logo.svg
create build/javascripts/all.js
create build/index.html
Project built successfully.
ビルドしてできたhtmlをドキュメントルートへ移動:
$ mv -vf build/* ~/html/
ブラウザでhttp://IPアドレス/にアクセスしてちゃんと表示されたらOK。
編集してみる
source/index.html.erb、layouts/layout.erb を自由に編集してみよう。
これらのファイルはerbテンプレートだ。<%= %>で囲まれた部分には任意のRubyのコードが書けるぞ。
例えばこんなこともできる：
<%=
require 'net/http'
Net::HTTP.get('ipinfo.io', '/')
%>
<pre>
<%= `ls`.chomp %>
</pre>
編集したらまたビルドしてmvで~/htmlに配置してみよう。
ローカルでサーバを立ち上げる
$ middleman s
でローカルにWebサーバが起動し、ポート4567で待ち受ける。
$ curl http://localhost:4567/
ソースを編集してアクセスすると反映されているぞ。
live-reloadという、ブラウザを自動的にリロードする機能までついている。
レイアウトを変えてみよう
source/layouts/layout.erbをコピーしてsource/layouts/my.erbを作ってみよう。
index.html.erbの先頭で
---
layout: my
---
と書くとこのレイアウトが使われる。
markdownを使ってみよう
hoge.html.markdown.erbを新規作成してみよう。
これはまずerbとして処理され、次にmarkdownとして処理される。
YAMLを使ってみよう
ページ先頭の---で囲まれた部分をFrontmatterという。
この部分はYAMLで任意のデータを記述できる。そしてRubyからcurrent_page.dataで参照できる。
---
layout: my
hoge: abc
moge:
- 11
- 22
- 33
---
hoge = <%= current_page.data.hoge %>
moge = <%= current_page.data.moge %>
YAMLの書き方はこちらを参照：Rubyist Magazine - プログラマーのための YAML 入門 (初級編)
プロジェクトのルートにdataディレクトリを作り、data/fruits.ymlを作ってみよう。
- name: apple
- name: banana
このデータは
<% data.fruits.each do |fruit| %>
- <%= fruit.name %>
<% end %>
のようにしてアクセスできる。
複数のページで共通に使うデータはこの方式で保存しよう。
ちなみにYAMLの代わりにJSONを使うこともできる。
ソースコードをシンタックスハイライトしてみよう
これをGemfileの末尾に追記：
gem 'middleman-syntax'
gem 'redcarpet'
これをconfig.rbの末尾に追記：
set :markdown_engine, :redcarpet
set :markdown, :fenced_code_blocks => true, :smartypants => true, :with_toc_data => true, :tables => true, :autolink => true, :gh_blockcode => true
activate :syntax
これをindex.html.erbに追記：
<style>
<%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %>
</style>
<% code("ruby") do %>
def my_cool_method(message)
puts message
end
<% end %>