Middleman — удобный инструмент для генерации статических файлов из псевдодинамических исходных данных. Вы задаете набор страниц с переменными, значения этих переменных в виде массива. Эти переменные становятся доступны в шаблонах. Во время разработки middleman работает в качестве простейшего приложения на мини-фреймворке Sinatra. Потом вы просто генерируете все возможные странички и заливаете их на сервер. Вот такая получается псевдодинамика.

Очень удобно для создания всяких лендингов, продающих страниц, заточенных под определенные ключевые слова, интернет-магазинов с нечасто меняющимся набором товаров и т.д.

Чем хорош middleman, так это тем, что работает он на ruby + node.js, а это значит, что можно легко прикрутить все милые сердцу препроцессоры (coffescript, sass, haml, slim).

Далее я опишу процесс установки и настройки этого чуда. Кстати, на нем я буду делать демо-приложение для моей библиотеки для инициализации backbone вьюх Vtree.js.

Установка

Сначала сразу перейдем в папку для нашего будущего проекта и зададим там локальную версию руби, после этого поставим гем (он сразу поставится для текущей версии руби, что нам и нужно):

mkdir -p ~/projects/pseudo_app
cd ~/projects/pseudo_app
rbenv local 2.0.0-p247
gem install middleman
rbenv rehash

Наше приложение можно инициализировать с набором предустановленных инструментов. Можно использовать разные наборы. Вот список всех — http://directory.middlemanapp.com/#/templates/all, а я использую набор slimmer (Slim, SASS, Coffeescript). Для этого сначала скачаем этот темплейт:

mkdir ~/.middleman
cd ~/.middleman
git clone git@github.com:polymatt/slimmer.git slimmer

А потом инициализируем приложение (для этого сначала переходим в папку ~/projects, а после ставим все необходимые гемы):

cd ~/projects
middleman init pseudo_app --template=slimmer
bundle install

Чтобы начать разработку, запускаем локальный development сервер, который будет доступен по http://localhost:4567:

cd ~/projects/pseudo_app
bundle exec middleman server

После того, как сайт сделан, можно его сгенерировать в статику (сделать билд). Это тоже очень просто:

bundle exec middleman build

Настройка и разработка приложения

Сначала разберемся с темплейтами. Здесь всё практически идентично рельсам, за небольшими исключениями. Кастомные лейауты можно указывать для отдельных страничек в файле конфигурации config.rb:

page '/login.html', layout: 'admin'

А можно прямо в хтмл странички с помощью специального формата Frontmatter (например, в login.html.erb):

---
layout: admin
---
 
<h1>Login</h1>
<form>
  <input type="text" placeholder="Email">
  <input type="password">
  <input type="submit">
</form>

Так же доступны вложенные лейауты. Если быть точным, то мы оборачиваем указанный для странички лейаут другим лейаутом. К примеру, если основной лейаут такой:

page 'blog/*', layout: :article_layout

То обернуть его другим лейаутом можно вот так (файл layouts/article_layout.erb):

<% wrap_layout :layout do %>
  <article>
    <%= yield %>
  </article>
<% end %>

Можно полностью отключить лейаут для каких-нибудь страниц:

page '/foo.html', layout: false

Дальше переходим к партиалам. Они рендерятся с помощью метода partial:

<html>
<head>
  <title>Admin Area</title>
</head>
<body>
  <%= yield %>
  <%= partial "footer" %>
</body>
</html>

Как и везде, можно передавать локальные переменные этого партиала:

<%= partial(:paypal_donate_button, locals: { amount: 1, amount_text: "Pay $1" }) %>
<%= partial(:paypal_donate_button, locals: { amount: 2, amount_text: "Pay $2" }) %>

На этом, пожалуй, хватит для этой небольшой статьи. Здесь я всего лишь переписываю документацию. Дальше продолжим в том же духе.