middleman で構築したサイトを GitHub Pages で公開するまでの流れをまとめてみた

@supermomonga さんに教えてもらいながら middleman で構築したサイトを GitHub Pages で公開する事ができたので、その手順をまとめておきます。
デプロイとかめんどくさいと思っていたんですが、実際やってみたらめちゃくちゃ簡単でした。

[必要なもの]

[middleman の生成]

まずはローカルに middleman のプロジェクトを作成します。
middleman は gem からインストールする事ができます。

$ gem install middleman
$ middleman version
Middleman 3.2.2


これで、middleman のコマンドを使用できるようになったので次のようにして middleman でプロジェクトを生成します。

$ middleman init test_page


これでカレントに test_page というディレクトリが作成され、その中に middleman のプロジェクトが生成されます。
この時のディレクトリ構成は以下のような感じになります。

test_page
│  .gitignore
│  config.rb
│  Gemfile
│  Gemfile.lock
│
└─source
    │  index.html.erb
    │
    ├─images
    │      background.png
    │      middleman.png
    │
    ├─javascripts
    │      all.js
    │
    ├─layouts
    │      layout.erb
    │
    └─stylesheets
            all.css
            normalize.css


その他、middleman の基本的な使い方は以下のサイトが参考になります。

[サーバを起動してサイトを確認]

$ middleman server

で、サーバが起動し、http://localhost:4567/ にアクセスするとそのプロジェクトのサイトを見ることができます。
デフォルトでは以下の様なページが表示されます。

[ページを追加する]

せっかくなのでサイトに新しいページを追加してみたいと思います。
サイトにページを追加する場合は ./source にファイルを追加します。

[./source/test.html.erb]

<h1>hello, middleman</h1>
<img src="http://hail2u.net/images/blog/vim-tango-icon.png"></img>


./source/test.html.erb を作成した状態でサーバを起動し http://localhost:4567/test.html にアクセスすると以下のようなページが表示されます。

[ビルドする]

$ middleman build

で、ビルドされた HTML ファイルなどが ./build ディレクトリに出力されます。
ここで生成されたファイルが最終的に github-pages に上げるファイルになります。
ちなみに ./source 内のファイルが全て ./build にコピーされるので注意して下さい。
ビルド後のディレクトリ構成は以下の様な感じになります。

test_page
│  .gitignore
│  config.rb
│  Gemfile
│  Gemfile.lock
│
├─build
│  │  index.html
│  │  test.html
│  │
│  ├─images
│  │      background.png
│  │      middleman.png
│  │
│  ├─javascripts
│  │      all.js
│  │
│  └─stylesheets
│          all.css
│          normalize.css
│
└─source
   │  index.html.erb
   │  test.html.erb
   │
   ├─images
   │      background.png
   │      middleman.png
   │
   ├─javascripts
   │      all.js
   │
   ├─layouts
   │      layout.erb
   │
   └─stylesheets
           all.css
           normalize.css

[ホスティング先の生成]

デプロイする前にホスティング先の githubリポジトリを生成しておきます。
github でサイトを公開する場合、ホスティング先として『ユーザページ』と『プロジェクトページ』を使用することができるんですが今回は『プロジェクトページ』を使用します。
両者の違いは以下のサイトが参考になります。


そんなわけで github に公開するサイトのリポジトリを作成します。
githubリポジトリを作成した後は test_page に git を生成して remote に github を追加します。

$ git init
$ git remote add origin {リモート先}


今回、テスト用に https://github.com/osyo-manga/test-middleman-page を生成しました。
また、次に紹介する middleman-deploy を使用すれば自分で git にコミットしたりやブランチを作成したり push を行う必要はありません

[デプロイする準備]

middleman をデプロイする手段として『Travis を利用する手段』がありますが、今回は middleman-deploy を使用します。
middleman-deploy は gem からインストールする事ができます。
また、middleman-deploy をイントールする際の注意なのですが、gem コマンドからインストールするのではなくて Gemfile に

gem "middleman-deploy"

を追記して使用して下さい。
Gemfile に追加しておかないと正しくコマンドを実行することができません。
middleman-deploy の他に ./config.rb に以下のコードを追加します。

[./config.rb にコードを追記]

# Build-specific configuration
configure :build do
  # ~~~~~~~
  # 色々とデフォルトの設定が書かれている
  # ~~~~~~~
  
  # リポジトリ名を host に設定しておく
  # こうすることで stylesheet_link_tag などで展開されるパスが
  # /test-middleman/stylesheets/normalize.css
  # のようになる
  activate :asset_host, :host => "/test-middleman-page"
end


# デプロイの設定
# 今回は gh-pages を使用するので branch に 'gh-pages' を設定する
activate :deploy do |deploy|
  deploy.build_before = true
  deploy.method = :git
  deploy.branch = 'gh-pages'
end

[デプロイする]

上記の通りに ./Gemfile と ./config.rb にコードの追加が終わったら、

$ middleman deploy

を実行します。
これで middleman build が実行され、出力されたファイルが github の gh-pages へと自動的に push されます。
その為、自分でコミットしたりブランチを作成したり push する必要はありません。
middleman deploy 後に http://{カウント名}.github.io/{リポジトリ名} へとアクセスするとサイトができています。
※最初に gh-pages へ push した場合は反映されるまでに10分ぐらい時間がかかります。
今回作成したサイトは http://osyo-manga.github.io/test-middleman-page/ になります。
http://osyo-manga.github.io/test-middleman-page/test も問題なくアクセスする事ができます。


あとは ./source 内のファイルを編集して middleman deploy を行うだけでサイトの更新を行うことができます。
めちゃくちゃ簡単ですね。
また、master に ./source ファイルなどをコミットすれば gh-pages とは別に ./source のバージョン管理も可能です。

  • master → ./source 管理
  • gh-pages → 公開サイト用

みたいにブランチを使い分けるとよさそうですね。

[まとめ]

ぶっちゃけ、やっていることはビルドして作成されたページを push しているだけなので慣れている人にとっては当たり前のようなことなのですが、最初にデプロイした時は地味に感動しました。
便利な世の中ですね。
これでオレオレサイトとかをつくる敷居がだいぶ下がったのでなにか機会があれば作ってみたいですね。
@supermomonga さんありがとうございました。