[Middleman 3]初めてのMiddleman：サイトにブログ機能を追加する

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

前回の記事初めてのMiddleman：データファイルとデータファイルを使った動的ページ生成でデータファイルの使い方と、データファイルを使った動的ページの作り方について勉強しました。今回はMiddlemanのブログ機能を使ってサイトにブログを付けてみたいと思います。

ブログ機能のインストール

ブログ機能（middleman-blog）はMiddleman本体とは別のGemになっています。加えてXMLを処理するためにBuilderを使います。

Gemfile

Gemfileにmiddleman-blogとbuilderを加えます。

source "https://rubygems.org"

gem 'middleman'
gem 'middleman-blog'
gem 'middleman-livereload'

gem "builder"

gem 'bourbon'
gem 'neat'

インストール

インストールを実行します。

$ bundle install
Fetching gem metadata from https://rubygems.org/........
Fetching additional metadata from https://rubygems.org/..
Resolving dependencies...
Using i18n 0.6.11
Using json 1.8.2
Using minitest 5.5.1
Using thread_safe 0.3.4
Using tzinfo 1.2.2
Using activesupport 4.1.9
Installing addressable 2.3.6
Using sass 3.4.11
Using thor 0.19.1
Using bourbon 4.1.1
Using bundler 1.7.6
Using hitimes 1.2.2
Using timers 4.0.1
Using celluloid 0.16.0
Using chunky_png 1.3.3
Using coffee-script-source 1.9.0
Using execjs 2.2.2
Using coffee-script 2.3.0
Using multi_json 1.10.1
Using compass-core 1.0.3
Using compass-import-once 1.0.5
Using rb-fsevent 0.9.4
Using ffi 1.9.6
Using rb-inotify 0.9.5
Using compass 1.0.3
Using eventmachine 1.0.4
Using http_parser.rb 0.6.0
Using em-websocket 0.5.1
Using erubis 2.7.0
Using tilt 1.4.1
Using haml 4.0.6
Using hike 1.2.3
Using uber 0.0.13
Using hooks 0.4.0
Using kramdown 1.5.0
Using listen 2.8.5
Using padrino-support 0.12.4
Using padrino-helpers 0.12.4
Using rack 1.6.0
Using rack-test 0.6.3
Using middleman-core 3.3.7
Using sprockets 2.12.3
Using sprockets-helpers 1.1.0
Using sprockets-sass 1.3.1
Using middleman-sprockets 3.4.1
Using uglifier 2.7.0
Using middleman 3.3.7
Installing middleman-blog 3.5.3
Using rack-livereload 0.3.15
Using middleman-livereload 3.4.2
Using neat 1.7.1
Installing eventmachine 1.0.5 (was 1.0.4)
Installing builder 3.2.2
Your bundle is complete!
It was installed into ./vendor/bundle

テンプレートを用意する

今回は公式のテンプレートをダウンロードしてそのまま使います。

layout.rbはファイル名を変更しつつlayouts/blog.rbレイアウトディレクトリに移動
その他はblog/ディレクトリに移動

ブログ機能の有効化

config.rbにブログ機能の有効化とオプションを指定します。今回サイト内にブログを組み込むのでblogディレクトリにブログができるよう設定します。また、コピーしたレイアウトファイルを使うようにレイアウト指定も変更しました。

activate :blog do |blog|
  # This will add a prefix to all links, template references and source paths
  blog.prefix = "blog"

  # blog.permalink = "{year}/{month}/{day}/{title}.html"
  # Matcher for blog source files
  # blog.sources = "{year}-{month}-{day}-{title}.html"
  # blog.taglink = "tags/{tag}.html"
  blog.layout = "blog"
  # blog.summary_separator = /()/
  # blog.summary_length = 250
  # blog.year_link = "{year}.html"
  # blog.month_link = "{year}/{month}.html"
  # blog.day_link = "{year}/{month}/{day}.html"
  # blog.default_extension = ".markdown"

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

  # Enable pagination
  # blog.paginate = true
  # blog.per_page = 10
  # blog.page_link = "page/{num}"
end

page "/feed.xml", layout: false

これで準備完了です。

ビルド

ビルドしてみます。

middleman build
   identical  build/assets/css/common.css
   identical  build/speakers/satou-jirou.html
      create  build/blog/feed.xml
      create  build/blog/index.html
   identical  build/index.html
   identical  build/speakers/yamada-tarou.html
      create  build/blog/2015/02/03/example-article.html
   identical  build/speakers/suzuki-saburo.html
   identical  build/speakers/suzuki-shiro.html
      create  build/blog/tags/example.html
      create  build/blog/2015.html
      create  build/blog/2015/02.html
      create  build/blog/2015/02/03.html

blogディレクトリの中にブログができているのがわかります。$ middleman serverでもhttp://localhost:4567/blog/にアクセスすればブログが表示されると思います。