読者です 読者をやめる 読者になる 読者になる

weblog of key_amb

主にIT関連の技術メモ

Middleman を使って GitHub Pages に静的サイトを公開する

だいたい下記のブログの通りです。

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

環境としては Mac OS X Mavericks, ruby 2.2.0 (on rbenv), middleman 3.3.7 で実施しました。

(1) gem install

gem install middleman

※ちょうどこのとき(2014/12/28 21時ごろ) au-m.rubygems.org が落ちていたので、gem sources のリストを http://production.cf.rubygems.org だけにしました。

デフォルトのHTMLテンプレートエンジンは ERB ですが、Slim を使いたいときは "middleman-slim" も gem でインストールしておくといいです。

(2) テスト用プロジェクト作成

middleman init middleman-test [--template slim]

middleman-test/ ディレクトリ以下にファイル群が作成されます。 また、bundle install で必要な gem がインストールされます。

Slim を使いたい人は --template slim を付けましょう。

※ここでも au-m.rubygems.org のせいで(以下略)

今回は GitHub Pages を使うので、 GitHubリポジトリを作りました。

https://github.com/key-amb/middleman-test

プロジェクトディレクトリに移動し、middleman server を実行すると、http://localhost:4567/ でサーバが起動します。

cd middleman-test
bundle exec middleman server

(3) GitHub Pages にデプロイする

事前に Gemfile に gem "middleman-deploy" を追加して、bundle install し直す必要があります。

vi Gemfile
# gem "middleman-deploy" を追記
bundle install

次に config.rb に下記のように追記します。

$ vi config.rb
:
# Build-specific configuration
configure :build do
  :

  # for GitHub Pages
  activate :asset_host, :host => "/middleman-test"
end

# Deploy to GitHub Pages
activate :deploy do |deploy|
  deploy.build_before = true
  deploy.method = :git
  deploy.branch = 'gh-pages'
end

middleman deploy を実行すると、自動的に gh-pages branch を作成し、push してくれます。

bundle exec middleman deploy

下記のURLでサイトが閲覧できるようになりました。

http://key-amb.github.io/middleman-test/

参考