middlemanの設定

本サイトで使用している middleman の主な設定をご紹介します。

Gemfile

# If you have OpenSSL installed, we recommend updating
# the following line to use "https"
source 'http://rubygems.org'

gem "middleman", "~> 3.1.5"
gem "middleman-blog", "~> 3.3.0"
gem "middleman-livereload", "~> 3.1.0"
gem "middleman-deploy"
gem "middleman-rouge"
gem "nokogiri"
gem 'redcarpet'

# For feed.xml.builder
gem "builder", "~> 3.0"

config.rb

Time.zone = "Tokyo"

# [1] ブログ基本設定
activate :blog do |blog|
  blog.prefix = "blog"
  blog.taglink = "tags/:tag.html"
  blog.layout = "layouts/layout"

  blog.tag_template = "tag.html"
  blog.calendar_template = "calendar.html"

  blog.paginate = true
  blog.per_page = 10
  blog.page_link = "page/:num"
end

# [2] markdown 設定
set :markdown_engine, :redcarpet
set :markdown, :fenced_code_blocks => true, :smartypants => true

# [3] シンタックスハイライト
activate :rouge_syntax, :lineanchor => 'line'

activate :directory_indexes

# [4] Atom フィード設定
page "/feed.xml", :layout => false
activate :livereload

set :css_dir, 'stylesheets'

set :js_dir, 'javascripts'

set :images_dir, 'images'

# [5] build 時の設定
configure :build do
  # For example, change the Compass output style for deployment
  activate :minify_css, :ignore => ['syntax.css']

  # Minify Javascript on build
  activate :minify_javascript
end

# [6] デプロイ設定
activate :deploy do |deploy|
  deploy.build_before = true
  deploy.method       = :rsync
  deploy.host         = 'www'
  deploy.path         = '/var/local/projects/risin.jp'
end

以下、解説。

[1] ブログ基本設定

ブログエントリは /blog 配下になるよう、blog.prefix を指定しています。その他、ページネーション設定等、基本的な設定を行っています。

[2] markdown 設定

redcarpet という markdown engine を使用しています。 fenced_code_block は、「`“」で囲んだ箇所がコードブロックとして解釈されます。

[3] シンタックスハイライト

middleman-rouge を使用しています。スタイルシートは /stylesheets/syntax.css.erb を用意し、以下の様にします。

<%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %>
<%# <%= Rouge::Themes::Github.render(:scope => '.highlight') %> %>
<%# <%= Rouge::Themes::Colorful.render(:scope => '.highlight') %> %>
<%# <%= Rouge::Themes::Base16.render(:scope => '.highlight') %> %>
<%# <%= Rouge::Themes::Base16::Solarized.render(:scope => '.highlight') %> %>
<%# <%= Rouge::Themes::Base16::Monokai.render(:scope => '.highlight') %> %>

お好みでスタイルを選んでください。

[4] Atom フィード設定

サイトを build する際に、自動的に xml ファイルを出力します。 source/feed.xml.builder を編集して、xml.title, xml.subtitle を適切に書き換えます。

[5] build 時の設定

build 時に、CSS, JavaScript の minify を行います。 [3] の syntax.css を minify 対象から外すようにしてください。

[6] デプロイ設定

middleman-deploy プラグインを使いました。middleman deploy コマンドを実行すると、build コマンドが行われ、スタティックなファイルを生成した後に、rsync, Git, FTP, SFTP などで Web サーバに転送することができます。今回は rsync を用いました。

deploy.host = 'www' となっているのは、ホスト名は別途 ~/.ssh/config にて設定しているためです。適切に設定してください。

deploy.path は、転送先に存在しない場合は作られます。

以上、参考になりましたら幸いです。