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

middleman blog

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 = /()/
  # 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の知識が十分な人はそこまで苦労しないと思います。

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

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

関連記事