Middleman 4 の新機能を試す シリーズMiddleman 4 で middleman-blog をインストールしてみる

はじめに

今回は前回作成したMiddleman 4のサンプルににmiddleman-blogを導入してみます。

準備

sauce フォルダ内のファイルをすべて削除してから middleman-blog のテンプレート導入します。

3.x からの変更点

• engineが kramdown から redcarpet に変更
• 記事テンプレートの root パスが変更

必要なGem

middleman-blog を使うには3つの Gem を追加します。

gem "middleman-blog"
gem 'redcarpet', '~> 3.3', '>= 3.3.3'

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

Gemのインストール

Gemfile に追記するとこのような感じに。追記したら $ bundle install を行ってください。

# If you do not have OpenSSL installed, change
# the following line to use 'http://'
source 'https://rubygems.org'

# For faster file watcher updates on Windows:
gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw]

# Windows does not come with time zone data
gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]

# Middleman Gems
gem 'middleman', '>= 4.0.0'
gem 'middleman-livereload'
gem "middleman-blog"
gem 'redcarpet', '~> 3.3', '>= 3.3.3'
# For feed.xml.builder
gem "builder", "~> 3.0"

テンプレートのインストール

テンプレートを既存のプロジェクトにインストールする際は以下のコマンドを実行します。 このコマンドは Gemfile も含めて上書きするので、Gemfile だけ上書きされないよう Overwrite をスキップしてください。

$ middleman init ./ --template=blog
         run  git clone --depth 1 https://github.com/middleman/middleman-templates-blog /var/folders/h2/x9673n8j4hv3wwsl7w87qcsh0000gn/T/d20160920-3563-27o79v from "."
Cloning into '/var/folders/h2/x9673n8j4hv3wwsl7w87qcsh0000gn/T/d20160920-3563-27o79v'...
remote: Counting objects: 16, done.
remote: Compressing objects: 100% (14/14), done.
remote: Total 16 (delta 0), reused 13 (delta 0), pack-reused 0
Unpacking objects: 100% (16/16), done.
Checking connectivity... done.
       exist
   identical  .gitignore
    conflict  Gemfile
Overwrite /Users/rin/Projects/mm4/Gemfile? (enter "h" for help) [Ynaqdh] n
        skip  Gemfile
   identical  config.rb
      create  source/2012-01-01-example-article.html.markdown
      create  source/calendar.html.erb
      create  source/feed.xml.builder
      create  source/index.html.erb
      create  source/layout.erb
      create  source/tag.html.erb
         run  bundle install from "."

インストールが終わったら $ middleman server でローカルサーバーを起動。

設定

Middleman 3.x の時の設定との違いはほぼ無かったのですが、新しい記事を作成するコマンド $ middleman article TITLE のテンプレートファイルを置く場所が source フォルダ内でなはく、プロジェクトのルートからパスを指定するように変わったようです。

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 = "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 = ".markdown"

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

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

page "/feed.xml", layout: false

今回はここまで。
テンプレート内の呼び出し方など細かいところで何か違いがあればそのうち記事にしたいと思います。

シリーズ

1. Middleman 4 をインストールしてみる
2. Middleman 4 で middleman-blog をインストールしてみる
3. Browserify を試してみる
4. Gulp から Browserify を実行する
5. Watchify を使った Browserify の 変更監視と自動バンドル
6. Gulp から Watchify と Browserify を使う
7. Middleman 4 の External Pipeline（外部パイプライン）を試す
8. Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル
9. Middleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）
10. gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）
11. Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った
12. Wercker の step-s3sync で起こった 「Parameter problem: Invalid source/destination」エラーの直し方（小ネタ）