middleman入門

5972 ワード
middleman middleman テキストリンク

middleman入門

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を作ってみよう。

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 %>

初めてのMiddleman：Middleman-Syntaxを使ったシンタックスハイライト
使える言語の一覧