Middlemanでbuild時にassets類をCDNへのパスにしよう

アドベントカレンダー2013 3日目の記事です。
Middleman Advent Calendar 2013 - Adventar

---

画像やcssだけcdnにします、というのはよくある話。それに対応しましょう。

いきなりまとめ

• build時に、set :css_dirなどでCDNへ書き換え
• リラティブプロトコルじゃないとうまくいかない

ググると答えがある

ruby - middleman - asset path for CDN at build time - Stack Overflow

config.rb

configure :build do
  set :css_dir, '//cdn.domain.com/assets'
end 

これでbuild時のみパスを変更できる。

ディレクトリを動的に設定したい。例えば日付ディレクトリ。

CDNへのデプロイは、

• キャッシュが効き過ぎる
• なんかあったら、戻りにくい

というのがあって、だいたい日付のディレクトリを作ってそこにassetsをほりこむようにしている。

http://hoge.com/assets/2013-12-07_12-34-56/

↑ こういうディレクトリを作ってそこに画像やcssなどを入れている。最終的にはhoge.com/index.htmlを差し替えるだけですむようにしている。

これをMiddlemanでやってみよう。

config.rb

configure :build do
  releaseTime = Time.now().strftime("%Y-%m-%d_%H-%M-%S")
  set :css_dir, "//hoge.com/assets/#{releaseTime}"
end

layout.slim

== stylesheet_link_tag "all"

index.html

<link href="//hoge.com/assets/2013-12-07_15-08-52/all.css" media="screen" rel="stylesheet" type="text/css" />

注意: Relative Protocol (src="//hoge.com/"みたいな書き方)にしないとうまくいかない

set :css_dir, "http//hoge.com/assets/#{releaseTime}"みたいにhttpから始めると、

<link href="/http://hoge.com/assets/2013-12-07_15-08-52/all.css" media="screen" rel="stylesheet" type="text/css" />

↑こんな感じで/httpというおかしなことになります。なんとかする方法は知らないので教えてください！