phoenix-powerMiddlemanでブログを構築するのは思った以上に簡単でした。

Middlemanについて

Middleman とは、 Octopress 同様、コマンドラインから静的ページを簡単に構築するためのツールです。

Template も豊富で、 Octopress よりも手順が簡略化され、かつ各モジュールのバージョンも最新に近い状態なので、人気があります。

middleman-blog-bootstrap-template

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

今回は、middleman-blog-bootstrap-template というテーマを使ってみます。

Ruby のバージョンは、2.1.2を使うことにします。このテンプレートでは、bowerも使っているようですね。

テンプレートを使うための手順は、まず、~/.middleman以下のディレクトリにテンプレートを置きます。そして、そのディレクトリ名でmiddleman init プロジェクト名 --template=テンプレートのディレクトリ名というコマンドを実行します。

すると、プロジェクト名のディレクトリが現在ディレクトリに作成されますので、その中からmiddlemanの各種コマンドを実行します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ rvm install 2.1.2

$ rvm use 2.1.2

$ gem install middleman

$ git clone https://github.com/biblichor/middleman-blog-bootstrap-template.git ~/.middleman/blog-bootstrap

$ middleman init my_new_project --template=blog-bootstrap

$ cd my_new_project

$ bundle

$ npm install -g bower

$ bower install

Gemfile

必要なモジュールは、Gemfileに書き、bundle installで導入します。

現時点では以下の様な感じです。MarkdonwSyntax-Highlightingなどを使いたい場合は、各自導入する必要があります。たぶん。

./Gemfile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# If you have OpenSSL installed, we recommend updating
# the following line to use "https"
source 'http://rubygems.org'

gem "middleman", "~> 3.2.2"
gem "middleman-blog", "~> 3.5.1"
gem "middleman-target", "~> 0.0.6"
gem "middleman-deploy", "~> 0.1.4"

# Live-reloading plugin
gem "middleman-livereload", "~> 3.1.0"

# For Slim
gem "slim", "~> 2.0.2"

# For Markdown
gem "redcarpet", "~> 3.1.1"

# For blog summary
gem "nokogiri", "~> 1.6.1"

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

config.rb

設定は、config.rbに書きます。とりあえずは、デプロイ簡易化の設定を書いておきます。

なお、デプロイ簡易化の設定は、gem "middleman-deploy"モジュールが必要になります。

./config.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
configure :build do
  # For example, change the Compass output style for deployment
  activate :asset_host, :host => "/middleman"
  activate :minify_css

  # Minify Javascript on build
  activate :minify_javascript

  # Enable cache buster
  # activate :asset_hash

  # Use relative URLs
  activate :relative_assets
  set :relative_links, true
end

  # Or use a different image path
  # set :http_prefix, "/Content/images/"
  activate :deploy do |deploy|
  deploy.build_before = true
  deploy.method = :git
  deploy.branch = 'gh-pages'
end

ちなみに、デフォルトでは#rootsource/foo/index.html.erbの中から相対パスなので、link_toで作られるあらゆる URL を相対パスにしたい場合の設定は以下の通りです。

./config.rbLINK
1
2
activate :relative_assets
set :relative_links, true

私の場合は、rootでは、 Octopress を展開させていますので、以下のように書きます。ただし、これは、 GitHub Pages で構築するページの通常の設定ではありません。

./config.rbLINK
1
2
3
4
# Use relative URLs
# activate :directory_indexes
# activate :relative_assets
# set :relative_links, true

参考:

http://middlemanapp.com/jp/basics/blogging/

テンプレートのプレビューやビルド

1
2
3
4
5
6
7
8
# 現在のディレクトリにある source フォルダをプレビューを行うコマンド(http://localhost:4567/)
$ middleman server

# 現在ディレクトリの source フォルダ build フォルダ内に HTML 変換するコマンド
$ middleman build

# 指定されたホストにデプロイするコマンド
$ middleman deploy

現時点では、一応こんな感じのテンプレートみたいです。

デプロイが上手くいかない場合は、こちらの記事を参考にしてください。

Middlemanのzsh completions

zshの補完が効かなかったので、探してみました。こういうのは大体公式リポジトリに置いてあるので、インストールフォルダ探せば見つかるような気もしますが。

1
2
3
4
5
$ cd ~/.zsh/functions/

$ curl -O https://raw.githubusercontent.com/sshankar/dotx/master/.zsh/completions/_middleman

$ source ~/.zshrc