自分のWebサイト、前はこんな感じでRailsでやってたんだけど、特にDB使ってるとか裏でなんかやってるとかでないのでRailsである必要をまったく感じなくなったり、iPhoneのSafariから見るとレイアウト崩れて微妙だったりしていた。
さらに先日参加した逆求人の時に、自分が今どこで何をしていて、これまで何をやってきたかをざっくりわかってもらえるような何かが必要だなと思ったので、Webサイトを作り変えることにした。
サイトを作りはじめる前に考えていた要件は、こんな感じ。
- ざっくりな自己紹介から連絡先、所属、ブログやTwitterなどソーシャルメディアへのリンク、あとは今まで作ったものをのせる。
- RailsとかSinatraとかWAFを使わずに静的サイトジェネレータ使ってみる。今回はLOUPEのコーポレートサイトでも使っているmiddlemanを採用。
- デプロイ先は自分のVPSを継続して使う。HerokuとかGItHub Pagesでもいいけど、Twitter Bot稼働させたりサーバいじりの勉強もしたかったので。
- サイトの見た目こだわりたいけど、何が良くて何が悪いとかあんまり良くわかってないので、その辺ちゃんとわかってる人（つまりデザイナさん）が作ってくれたテーマを使おうと思う。有料でいい。そこにお金を払う価値は十分にあると思う。
以下、やったことのメモ。自分用メモだし、クロッキー帳にラフ書いてからとかそういう感じのはめんどくさくてやってないのであんまり参考にならないかも。middlemanの使い方とかはドキュメント読んでほしい。
1．Bootstrapのテーマを選ぶ
1から全部自分で考えるのめんどくさかったし、先述した理由でデザイナさんが作ったテーマ使ってみたかったので、よさ気なテーマを見つけてそれを良い感じにして使うことにした。
自分の場合はWrap Bootstrapという有料Bootstrapテーマの販売サイトから選んだ。安くて5ドルで、高いのでも20ドルいかないくらいかな。キーワード検索できたりカテゴリ検索（ECサイト向けテーマとかポートフォリオ向けテーマとか、管理画面向けテーマとかある）できたり、あとはBootstrap 2.x系か3.x系かとかで絞込み検索できて良い感じ。
今回は3ColorResume - Personal Resume/CVというテーマを使った。5ドルだった。
2．middleman導入してプロジェクト作成する
middleman、いつの間にかv4になっていろいろ変わってた。まぁドキュメント読めばなんとかなるので見ると良いと思う。
middleman initでプロジェクト作成できる。プロジェクト作成時にCommpass使うかとかLiveLoading有効にするかとかいろいろ聞かれたのち、bundle installが走る。
3．テーマを適用する
sourceディレクトリにstylesheetsとかjavascriptsとか置くところあるのでそこに置けばOK。fontsディレクトリは無かったけどmkdirしてfontファイル置いておけば勝手に読み込んでくれた。
テーマはさっきのやつを使ってるけど、それとは別に日本語を美しく表示してくれるHonokaというテーマも導入した。bootstrap.cssやbootstrap.jsを置き換えるだけでOKなので便利。
4．コードを書く
作り始める前にざっくり方針を決めたとはいえ、プロフィールの文章に悩むタイプなのでつらい。
ちなみに僕はmiddlemanデフォルトのerbを書く気になれなかったので、html2slimを使って全部Slimに変換しておいた。
middlemanはassets pipelineに対応している記憶だったけど、v4から削除されたらしい。middleman-sprocketsというのがあってこれ使えば良さそう（要確認）だけどとりあえずめんどくさかったのでlayoutファイルにstylesheet_link_tagとかjavascript_include_tagとか使って直接指定した。
5．ビルドする
middleman buildでbuildする。これをサーバーのドキュメントルートに置けばOK。
6．デプロイする
buildしたファイルたちをscpでサーバーのドキュメントルートに送った。さっさと公開したかったからscpでやったけど、そのうちmiddleman-deployとか使ってちゃんとやりたい。CI回そうかとも思ったけどそこまでやらなくてもなぁという感じ。
以上が、今回やったことのメモ。もしかしたら何か抜けているかも。
そのうちmiddleman-sprocketsについて調べたりデプロイ自動化したり、あとはWebサーバーとして使っているnginxのチューニングしたりとかしていきたい。
自分のWebサイトひとつ持っておくのおすすめで、先日の逆求人に参加した時もそうだっだけど、思ったよりもいろいろな人に見られてたりする。ホントはコードもGitHubにあげたかったけど、買ったテーマを勝手に配布するの規約違反っぽかったのでやめた。
みんなもお年玉がまだ残っているうちにドメイン取って、自分のWebサイト作って公開してみると良いと思う。
