phoenix-powerOctopress よりも導入が簡単な Middleman を使ってみました。

Middleman

http://middlemanapp.com/jp/

Middlemanとは、簡単に言うとページの構築をコマンドラインから簡単に行うためのものです。

ドキュメントが日本語で丁寧に書かれているため、使い方が分からないということは少ないと思いますが、基本的な使い方は、以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
# Web ページ作成の簡易化ツール Middleman のインストール
$ gem install middleman
$ gem install middleman-blog

# 指定のディレクトリにテンプレートを作成するコマンド
$ middleman init ~/hoge

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

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

以下、自分がページを作った際の具体的な手順を紹介します。

GitHub Pages の作成

まずは、 Middleman を使ってできるページのソース群をホスティングするための GitHub Pages を作りましょう。

ここでは、ユーザーページ(グループページも含む)、プロジェクトページがあるうちの、プロジェクトページを使用します。

それぞれのURLは、ユーザーページがusername.github.ioとなっています。プロジェクトページがusername.github.io/reponameとなっています。

したがって、まずは、GitHub Pages(プロジェクトページ版) を作るために、新しいリポジトリを作成します。リポジトリ名はなんでもいいのですが、これが URL になります。ここでは、middlemanとしました。

次に、 Settings > GitHub Pages > Automatic Page Generatorと進み、プロジェクトページを作成します。

プロジェクトページが作成されたら、username.github.io/reponameでアクセスできますので、アクセスしてみてください。

なお、私の場合は、以下のような URL になりました。

http://syui.github.io/middleman

Middleman のインストールと使用

次に、 Middleman をインストールし、実際に使ってみます。

1
2
3
4
5
6
7
8
9
10
11
$ gem install middleman

$ gem install middleman-blog

$ middleman init ~/middleman

$ cd !$

$ middleman server

$ middleman build

Middleman を実行したフォルダに GitHub Pages をホスティングする

1
2
3
4
5
$ echo 'gem "middleman-deploy"' >> Gemfile

$ bundle

$ vim config.rb

あとは、デプロイ自動化のための設定を書きます。以下を追記してください。

config.rb
1
2
3
4
5
6
7
8
9
configure :build do
  activate :asset_host, :host => "/reponame"
end

activate :deploy do |deploy|
  deploy.build_before = true
  deploy.method = :git
  deploy.branch = 'gh-pages'
end

ここで、/reponameは、私の場合、/middlemanになりますね。

内容を見てわかると思いますが、リポジトリに GitHub Pages(プロジェクトページ) を作った場合、以下のコマンドで作成したページを編集できます。

1
2
3
4
5
6
7
8
9
10
# リポジトリのクローン
git clone https://github.com/syui/middleman
cd !$:t

# ブランチの確認
$ git branch -r

# ブランチを GitHub Pages に変更
$ git checkout gh-pages
$ ls

つまり、 middleman deployコマンドを使わなくても、ブランチを変更し、更にはそこにあるファイルを全て削除した上で、~/middleman/buildフォルダ内にあるファイルを持ってきてgit pushすれば、 Middleman で作成したページを公開できるということです。

しかしそれでは面倒くさいので、上の作業を自動化するスクリプトを使ったほうがいいのです。当該スクリプトを使うには、設定ファイルに自身の設定を書けば良いわけですね。

さて、上の設定を書けば、以下のコマンドで、./buildgh-pagesブランチにデプロイされます。

1
$ middleman deploy

あとは、作成した GitHub Pages の URL にアクセスしてみればページが表示されているはずです。

username.github.io/reponame

Middleman のテンプレート

Middleman もいくつかのテンプレートがあるみたいです。

http://directory.middlemanapp.com/#/templates/all

テンプレートを使いには、以下のコマンドのようにやります。

1
$ middleman init my_new_mobile_project --template=html5

せめてデモページヘの URL は載せておいてほしい…。これは、プレビューするまでわからないという感じなのでしょうか。

参考:

Middleman Advent Calendar 2013 - Adventar

middleman で構築したサイトを GitHub Pages で公開するまでの流れをまとめてみた - C++でゲームプログラミング

GithubPagesとMiddlemanで技術系っぽいBLOGを始めて見る::Route4610

Middleman Blog

ブログも簡単に作成できます。具体的には、必要なモジュールをインストールした上で、middleman init myproject --template=blogコマンドとブログの設定をconfig.rbに書きます。

config.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Time.zone = "Tokyo"

activate :blog do |blog|
  # blog.prefix = "blog"
  # blog.permalink = ":year/:month/:day/:title.html"
  # blog.sources = ":year-:month-:day-:title.html"
  # blog.taglink = "tags/:tag.html"
  # blog.layout = "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 = ".markdown"

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

  # blog.paginate = true
  # blog.per_page = 10
  # blog.page_link = "page/:num"
end

参考:

Middleman + Slim + Herokuでブログをつくりました - ROCHAS