middlemanでブログを作ろう。インストールから初期設定まで(slimも少々)

Web/19 Aug 2015

Wordpress で始めたブログを管理画面がいらないという理由で静的サイトジェネレータの middleman に乗り換えて早 3 ヶ月。CMS 案件や Web アプリケーションの HTML/CSS 制作に middleman を使っていたのですが、ブログ機能はこの移行で初めて取り組みました。今回はこのブログ機能に絞って書いていきます。

というわけで、以下のような方におすすめの内容でお届けします。

  • middleman を使ったことがある方
  • middleman でブログを作りたい方
  • middleman でのブログ初期設定をやろうとしている方
  • なんとなく見てしまっているという奇特な方 ← どうもありがとう

middleman を初めて使う方は、まずは過去記事をご覧ください。

  • インストールからサーバーの起動まで

    ブログサイト制作するには、上記ページ内のmiddleman を起動してみようのスケルトン作成の箇所に補足として記載している、$ bundle exec middleman init --template blogをターミナルに入力し、ブログテンプレートの初期ファイルを作成します。(後述します。)

  • レイアウトとパーシャルについて

    今回はあまり触れませんが、ここも見ておくと良いかも。

開発環境を用意する

過去記事のインストールからサーバ起動までインストールしてみようを行った上で進めていくのが理想ですが、念の為に再掲しておきます。すでに初期セットの作成が完了している方は飛ばしていただいて大丈夫です。

ブログ用の初期セットを作成する

middleman のインストールが完了していると、下記のようなディレクトリ構造になっています。

middlemanのインストール

この状態では、middleman が使えるようになっただけで、スケルトン自体は生成されていません。生成するには middleman init を行うのですが、今回はブログを作るので gem "middleman-blog" を Gemfile に追加しておく必要があります。

source "https://rubygems.org"

gem "middleman"
gem "middleman-blog"

追加後は、有効にするために bundle install を実行します。middleman-blog は middleman の拡張機能でタグや記事抽出などブログに必要な機能を提供してくれます。

middleman-blog をインストール後は bundle exec middleman init --template blog でスケルトンを作成します。

middleman-blogのインストール

もしかすると、 Could not find gem 'builder (~> 3.0) ruby' in any of the gem sources listed in your Gemfile or available on this machine. のエラー(赤字)が出るかもしれません。これは、gem の builder が見つからないと言うことなので、

  • Gemfile に gem "builder", "~> 3.0" が追加されているか
  • vendor/bundle/ruby/ 以下に builder があるか

を確認し、無ければ bundle update しておいてください。 ここまで来れば、 bundle exec middleman でサーバを起動してブログの初期セットを確認します。

ブラウザから http://localhost:4567 にアクセスし、以下のページが表示されていれば、初期セットが正しく生成されています。

middleman-blogの初期画面

復習のつもりが長くなりましたが、ここからブログの設定作業です。 現状の初期セットではあまりにも簡素で、ディレクトリ構成もちょいと使いづらそうです。なので、以降は下記の 2 点について記載していきます。

  • config.rb でカスタム設定
  • Slim の初期セット生成

config.rb で自分だけのカスタム設定

config.rb は設定ファイルで、以下のような内容を設定することができます。

  • ブログ設定
  • ディレクトリ設定
  • リンクパスの設定
  • ビルド時の出力形式

公式サイトにはヘルパーや相対パス設定など、他にもたくさん紹介されていますが、ブログ作成という観点で上記をピックアップしています。前項で実際に生成された config.rb を見ながらご覧いただくとわかりやすいと思います。

ブログの設定

activate :blog do |blog|
...
end

activate :blog do |blog| から end までの内容がブログ設定の記述箇所となり、ここを適宜変更したり、有効化していくことで詳細に設定することが可能となります。

# はコメントアウトとなり、これを外すと設定を有効化できます。 ↓ サンプルとして自分の設定内容を掲載しました。

activate :blog do |blog|
  blog.prefix = "blog"
  blog.permalink = "{category}/{title}.html"
  blog.sources = "{year}-{month}-{day}-{title}.html"
  blog.taglink = "tags/{tag}.html"
  blog.layout = "layouts/layout"

  # blog.summary_separator = /(READMORE)/
  # 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 = ".md"
  blog.tag_template = "tag.html"
  blog.calendar_template = "calendar.html"

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

  blog.custom_collections = {
    category: {
      link: "/{category}.html",
      template: "/category.html"
    }
  }
end

各内容を簡単に紹介すると下記の通りです。

  • blog.prefix

    ブログのデフォルトパスを設定。初期値は / でルートパスになっている。

  • blog.permalink

    ブログ記事のパーマリンク形式。初期値は /2015/08/19/title.html で、このサイトでは "{category}/{title}.html" とすることで、 /web/tech-middleman-blog/ のような、カテゴリー名と記事タイトルのパスとなります。

  • blog.sources

    記事作成時のファイル名の形式で、下図のようになります。ビルドすると blog.permalink で設定したファイル名で出力されます。 middleman-blogの作成記事

  • blog.taglink

    タグページが出力される時のリンク形式の設定

  • blog.layout

    ブログ記事に使用するレイアウトファイルの設定

  • blog.year_link

    年別ページのパス設定。同様に blog.month_link は月別、 blog.day_link は日別の設定。

  • blog.default_extension

    作成記事のファイル形式。 .markdown が初期値ですが、 .md の方が馴染みがあるのでこちらにしています。どちらも MarkDown 形式です。

  • blog.tag_template

    タグページのテンプレートファイルの指定。同様にカレンダーページは blog.calendar_template で指定。

  • blog.paginate

    ページネーションを有効化するかどうかの設定。 blog.per_page ではページあたりの記事出力件数を設定し、 blog.page_link では 2 ページ目以降のパス形式を設定します。

カテゴリーを自作する

middleman には Wordpress のようなカテゴリーがなく、タグがその役割を担っています。ただ、タグとカテゴリーを使い分けたい人もおり、私もその一人です。で、カテゴリーの設定には blog.custom_collections を使い、以下はその記述です。

blog.custom_collections = {
  category: {
    link: "/{category}.html",
    template: "/category.html"
  }
}

link はカテゴリの出力パスで、template は使用するファイル名です。 タグと同じですが、 category.html.erb は初期セットで作られていないので、カテゴリーを設定した時は対応するファイルも作るようにしてください。

ディレクトリ設定

set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'

名前の通りのディレクトリ名ですが、任意の名前に変更できます。ここを変更した場合は、実際のディレクトリ名も同じように変更してください。

リンクパスの設定

middleman 公式サイトのきれいな URL (ディレクトリインデックス)に記載されている内容です。通常はビルド時に /blog/aaa.html となるのですが、それを /blog/aaa/index.html とするための設定です。

activate :directory_indexes

ただ、404.html のように .html の形式で出力したいものがある時は、以下のようにします。(個人的にはこれが少しはまった箇所です)

page "404.html", :directory_index => false
activate :directory_indexes

ビルド時の出力形式

ブログデザイン、記事作成まで完了すれば、html ファイルとして出力するためにビルドします。 bundle exec middleman build で実行されるのですが、config.rb の configure :build do 内に設定を加えることで、ビルド時に行う処理を追加することができます。

例えば、css と javascript のミニファイ化であれば、 activate :minify_cssactivate :minify_javascript のコメントアウトを外して有効化するだけです。

ただ、HTML のミニファイ化には別途 gem のインストールが必要で、Gemfile に gem "middleman-minify-html" を追加し、 bundle install を実行。で、config.rb に戻って activate :minify_html を記載します。

configure :build do
  activate :minify_html, :remove_intertag_spaces => true
  activate :minify_css
  activate :minify_javascript
end

minify_html はオプションがあり、 :remove_intertag_spaces を追加すれば、タグ間のスペースを除去してくれます。 他にもいろいろあるので、興味のある方は https://github.com/middleman/middleman-minify-html をご参考に。

slim を使えるように設定

※ slim を使わない人はスルーしてください。

slim は Ruby 環境で動く超ミニマルなテンプレート言語です。HTML から </> を除いて書いていきます。さらに構造の階層を示すためインデントを用いるため、閉じタグも必要ありません。

middleman で slim を使うには、Gemfile に gem "slim" を追加し bundle install します。 次に、config.rb で slim を使う宣言をしなければいけません。

set :slim,
    :format => :html,
    :sort_attrs => false,
    :pretty => true,
    :shortcut => {
      "#" => {:tag => "div", :attr => "id"},
      "." => {:tag => "div", :attr => "class"},
      "&" => {:tag => "input", :attr => "type"}
    }

上記は、slim を使えるようにセットし、出力時のコード整形や class や id を簡略化するオプションを記述したものです。

slim はどれくらいスリムにしてくれるのか

slim を使うと HTML を書くのがイヤになります。 という程、記述量が増えてもごちゃごちゃせず、シンプルで可読性高く書けます。Rails で Web サービス作るエンジニアさんが好む印象があり、最近でも「slim で書けますよ」と言うと喜ばれました。

で、簡単な HTML と slim を比べると、以下のようになります。

<!DOCTYPE html>
<html>
  <head>
    <title>Slim Examples</title>
  </head>
  <body>
    <h1>Markup examples</h1>
    <div id="content">
      <p>This example shows you how a basic Slim file looks like.</p>
    </div>
  </body>
</html>
doctype html
html
  head
    title Slim Examples

  body
    h1 Markup examples
    #content
      p This example shows you how a basic Slim file looks like.
  • </> がいらない
  • 閉じタグがいらない
  • 階層はインデントで表現

というシンプルさです。さらに middleman の記述でも見ていきます。以下は、初期生成時の tag.html.erb に記載されている、リンク付きの記事タイトルと投稿日を動的に取得する記述です。

<ul>
  <% page_articles.each_with_index do |article, i| %>
    <li><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span></li>
  <% end %>
</ul>

これをスリムにします。

ul
  - page_articles.each_with_index do |article, i|
    li
      = link_to article.title, article
      span = article.date.strftime('%b %e')

どうでしょうか。この程度の記述では行数は大きく変わらないのですが、閉じタグが必要なく、シンプルになっていることは伝わるかと思います。

で、どちらも HTML に変換すると、以下のように出力されます。

<ul>
  <!-- 該当記事の数だけ出力される -->
  <li><a href="/2012/01/01/example-article.html">Example Article</a> <span>Jan 1</span></li>
</ul>

index.html.erb をスリムにしてみよう

今日のラストの項です。せっかくなので、middleman-blog で生成した index.html.erb をスリムに変換してみましょう。

html2slim を使う

手動で全て変換しても良いのですが、若干手間なので、自動変換してくれる gem をインストールして効率的に行います。Gemfile に gem "html2slim" を追加し、 bundle install です。

次に erb 形式のファイルを slim に置換するために、ターミナルに以下を入力します。

$ erb2slim index.html.erb index.html.slim

これで index.html.slim が生成されますが、初期ファイルではおそらく最上部の記述がおかしく、下図のように表示されているはずなので修正が必要です。

手動で修正が必要な箇所

この原因は 1 行目が | --- pageable: true per_page: 10 --- となっているからで、以下のように修正すると正しく表示されます。

# | --- pageable: true per_page: 10 ---
# ↑ここを修正する

---
pageable: true
per_page: 10
---

ブログをスキルアップの場に使うのもあり

長くなりましたが、middleman でブログを始める時の設定とおまけに slim の設定と変換を見てみました。slim でやってみるかどうかは別として、ブログの初期設定は言語問わず通る道なので、設定する時は config.rbという事だけでも覚えておくと良いです。

もし余裕があって、ついでに slim もやってみようという場合は、今回の記事が参考なれば嬉しい限りです。自分は何も知識がない状態から HTML を覚えた時の方が難しかった記憶があるので、HTML の知識が十分な人はそこまで苦労しないと思います。

などなど良文献多しなので、ぜひチェレンジしてみてください。

インプットし過ぎで目が疲れたら、ほっと一息つくのも重要ですよ。自分はあずきパワーのアイマスクの温もりにハマっています。これの肩用もなかなかよろし。