Middleman と GitHub Pages でブログを作った話

Posted on 2014-08-30 tags: ruby, github, travis

tl;dr

Middleman

Middleman は最近よく使われている気がする静的サイトジェネレータ。少し前から静的サイトジェネレータは Middleman 一強感あったので流行に乗り遅れまいと使ってみることにした。この種のソフトウェアで Ruby 製のものは古くから Jekyll が有名でしたが、 Middleman だと Asset Pipeline の概念だったりテンプレートに erb, haml, slim が使えたりといったところで Rails に近いっぽいところが受けているのだとか。

公式のチュートリアルと、その日本語版が充実しているので一通り読めばだいたいのことはできる気がします。以下、ハマったところやちょっとしたカスタマイズだけ。

後からブログ仕様にする

middleman init するときに --template=blog を付けずに実行してしまい (というかこんなオプションがあるのを知らなかった) 、ある程度サイトを作ってからブログ機能をつけることになってしまった。するとブログテンプレートを使った場合の config.rb や他のファイルの中身がわからないので、解説サイトを見ても何のことだかわからない、ということがあった。

middleman-blog/lib/middleman-blog/template にテンプレートファイルが一通り置いてあるので、これをコピーすれば良い。

VM 内で livereload

middleman-livereload という拡張があり、これは記事を書いている途中に保存すると勝手にブラウザがリロードしてくれるものです。使っている rack-livereload がファイルの変更を検知して WebSocket でブラウザ側に伝えて、 JavaScript でリロードとかやっているっぽい。以前似たようなものを書いたことがあるのであーあんな感じだろうなと想像しつつ。

最近は Vagrant で全部 VM の中でやるようにしているのですが、ネットワーク共有をポートフォワードでやっている場合は rack-livereload のデフォルトである 35729 番をフォワードしておく必要があります。あと、 middleman のプレビューのデフォルトである 4567 番もフォワードしておきます。

1
2
config.vm.network "forwarded_port", guest: 4567, host: 4567 # middleman
config.vm.network "forwarded_port", guest: 35729, host: 35729 # livereload

そして config.rb に activate :livereload を書いておく。すると

1
$ middleman

と打つと localhost:4567 でプレビューでき、 livereload もできる。

日本語で80行で改行するのを無視する

エディタで書くときは80文字で折り返したいのだけど、日本語の場合それを普通にレンダリングさせてブラウザで見ると改行位置で半角スペースが開いてしまう。それが嫌だったので、 Markdown レンダリングエンジンをいじって改行を取り除く処理をつけている。 Redcarpet での処理。

1
2
3
4
5
class Redcarpet::Render::HTML
  def preprocess(text)
    text.gsub(/([^\x01-\x7E])\n([^\x01-\x7E])/, '\1\2')
  end
end

これを config.rb に書いておけば良い。

シンタックスハイライト

シンタックスハイライトは Rouge を Gemfile に書いておくだけ。少し使ってみている限りは特に問題なさそう。

GitHub Pages のユーザーサイト

GitHub Pages は github.io ドメインで静的なファイルをホスティングできるサービス。 User や Organization のページと Project ごとのページの2種類 あるが、ここでは個人ページを作ることを想定しているので User & Organization のほうを使う。

この場合、 User もしくは Organization に [user or organization].github.io というリポジトリを作り、その master ブランチに静的ファイルを push することで https://[user or organization].github.io にアクセスできるようになる。自分の場合は daimatz.github.io とする。

独自ドメイン使用

GitHub Pages で独自ドメインを使う場合やることは以下のとおり：

  1. DNS レコードの設定
  2. CNAME ファイルを置く

DNS レコードの設定

CNAME を設定する方法と A レコードを設定する方法がある。自分の場合は daimatz.net を使いたかったので、「apex domain の場合は A レコードを設定せよ」との指示通り A レコードを設定する。

ググると 204.232.175.78 を使うといい、という情報が見つかるのだが、一度それで push すると「その IP アドレスは deprecated なので公式ページに書いてある正しいものを使ってね」というメールが来た。そこから A レコードの設定ページに飛ぶと、現時点では

の2つを使えと書いてある。

自分は VALUE DOMAIN を使っているので DNS 設定ページで次のように記入した。

1
2
a @ 192.30.252.153
a @ 192.30.252.154

CNAME ファイルを置く

GitHub Pages リポジトリの master ブランチ直下に CNAME というファイルを置き、その中に独自ドメインを書く。すると、 http://[user or organization].github.io にアクセスされたときにそのドメインにリダイレクトしてくれる。

middleman を使う場合、 source/ 直下に置いて次のようにするのが良いと思う。

1
page 'CNAME', layout: false

ソースを push すると Travis CI がデプロイ

Travis CI は言わずと知れたクラウド CI サービスですが、これをデプロイに使おうとすると少し面倒な設定が必要になる。ビルドログがダダ漏れなので認証情報をそのまま書くわけにはいかない。

認証情報の持ち方

まず Travis が GitHub リポジトリに push できるようにする方法だが、これはアプリケーション登録して Access Token を設定すれば良い。 自分の設定の Applications ページに行き、 Personal access tokens の Generate new token からトークンを生成する。

さて、そのトークンを Travis に教える方法だが、このために Travis CI に暗号化の仕組みがある。 travis コマンドを使って次のようにする。

1
2
$ gem install travis
$ travis encrypt -r daimatz/daimatz.github.io "GH_TOKEN=<token>"

そして .travis.yml に次のように書く。

1
2
3
env:
  global:
    - secure: ".............."

すると、ビルド時に復号化した GH_TOKEN=<token> が展開される。もちろんビルドログには表示されない。

Travis が master ブランチを push

[user or organization].github.io ではデプロイするファイルは master ブランチに置かなければならない。そこで、ソースはすべて source ブランチに置いておき、 source ブランチを push すると Travis が master ブランチに成果物を commit して push という手順をとることになる。 master に push する用のリポジトリを build というディレクトリで clone してきて、 middleman build したときに build ディレクトリに入るようにする。具体的には次のような感じ。

1
2
3
4
5
6
7
8
9
before_script:
    - git clone --quiet https://github.com/daimatz/daimatz.github.io build
script:
    - bundle exec middleman build
after_success:
    - cd build
    - git add -A .
    - git commit -m "Update [ci skip]"
    - '[ "$TRAVIS_BRANCH" == "source" ] && git push --quiet https://$GH_TOKEN@github.com/daimatz/daimatz.github.io master 2> /dev/null'

git push 時に --quiet を付けないとトークンが表示されてしまうので注意。

Travis ではコミットメッセージに [ci skip] という文字列を入れておくと、そのコミットについてはビルドしない。こうしないと Travis が master ブランチに push したコミットについてまた CI が走ってしまい、 .travis.yml がないためビルドが失敗してエラーメールが飛んでくることになる。

まとめ

ソースを見てもらうのが一番わかりやすい気がする。

comments powered by Disqus
ページのトップへ戻る