Subscribed unsubscribe Subscribe Subscribe

@kyanny's blog

Write down what I learnt. Opinions are my own.

ポートフォリオページを Middleman で作り直した

Kensuke Nagae

http://kyanny.me/ というポートフォリオページを Middleman で作り直した。

元々 Jekyll を使っていたがどうもうまく使いこなせなくて、見栄えも悪いままだった。 Middleman は一度使ってみたいと思っていたので、ちょうどいい題材になった。

Middleman に特有の便利な機能は一切使っていないので、 Jekyll でも他の static site generator でも事足りたはずだし、そもそも一枚ペラのページなのでツールを導入するまでもないんだけど、 Middleman はなんとなく使いやすくてようやく多少は見栄えのするページを作れた。

Middleman はサイト作成時にテンプレートを選ぶことができ、 HTML5 Boilerplate を選んでみたのだけど、 CSS を自分で書いてデザインできる気がしなかったので結局 Bootstrap を入れた。デザインのベースは Bootstrap starter template そのまま。

はてなブログのロゴは公式配布されているものを、その他のロゴは Drawic のものを使わせてもらった。それぞれ大きさが違うので同じくらいの大きさに見えるようにサイズを調整したら横に並べたとき間隔がちぐはぐになってしまって、そこの調整だけ頑張った。でもまだ微妙にズレてそうだし、 iPhone のブラウザで見るとズレてしまう。

HTML5 Boilerplate のテンプレートに favicon がはいっていたがお世辞にも格好よいとは言えない代物で、とはいえ自分じゃグラフィックデザインはできないし諦めようかどうしようかと考えて、 Identicon を使ってみることにした。これもそんなに格好よいものではないけど、少なくとも自分専用感は出せたので満足。せっかくあるのに普段目にしなくてもったいないので再利用できたのもよかった。


Middleman は Jekyll に比べてドキュメントが充実している気がする。特にチュートリアルの出来は素晴らしい。さらに日本語訳も完成度が高くて、迷わず使い始められたのもうまくいった要因だと思う。お世話になったお礼に本家日本語訳に Pull Request を送ってみたらすぐにマージしてもらえて、開発・メンテナンスが活発なのも好印象だった。

あと、デフォルト設定でだいたい困らないとか、使うファイル点数が少なくてわかりやすいとか、全体的にバランスが良い感じがして良かった。静的サイトを作る機会はそんなに多くなさそうだけど、次も Middleman を使ってみたいし他の人にも薦めたい。