Herokuに静的ファイルサイトを作る

タイトルと違うけど、ただpicture-showのスライドをHerokuでみたかっただけです。

１．[unfiltered] picture-showをインストール
https://github.com/softprops/picture-show

２．giter8でpicture-showのテンプレートをダウンロード

> g8 softprops/picture-show

３．編集
好きなように編集する、
上のURL見れば方法が書いてます。
どんな感じかみたいだけなら飛ばしてもダイジョブです。

４．offline出力
3で作ったディレクトリに移動して、以下のコマンドを実行

> pshow --offline

すると、outディレクトリができます。

５.Herokuにアップするディレクトリ構成の準備
Herokuにアップしたいディレクトリを作成(HerokuSite)し、その中にoutディレクトリを移動させます。
そこでoutをpublicという名称に変更してください。
次にconfig.ruという名称のファイルを作成します。

config.ru

use Rack::Static,
   :urls => ["/assets", "/css", "/hello","/js"],
   :root => "public"

 run lambda { |env|
   [
     200,
     {
       'Content-Type'  => 'text/html',
       'Cache-Control' => 'public, max-age=86400'
     }, 
     File.open('public/index.html', File::RDONLY)
   ]
}

最終的にはこんな感じになるはずです。

- HerokuSite/
  |- config.ru
  |- public/
    |- assets/
    |- css/
    |- hello/
    |- index.html
    |- js/

６．いざ、Herokuへ

> git init
> git add .
> git commit -m init
> heroku create
> git push heroku master

終了！！！
かっこいいスライドが見えるよ！！！