GitHubPages + Honoka + Jadeでサイトを作った

yashihei.net

前から作ったゲームなどを公開して置く場所が欲しいなと思っていて、まぁ特に強く必要性を感じてはいなかったので後でいいやーってなってたのだけど、暇だったので作ってた。

きっかけというか先日、先輩(id:windyakin)が公開されたBootstrapテーマを使って見たかったのもあった。honokak.osaka

Bootstrapを使うのは初めてだったけど、グリッドシステムさえ抑えれば特に難しいことは無くて、簡単に扱うことが出来た。Bootstrapの扱いやすさと適当に組んでもそれなりに見栄えがいい感じになるので、こんなに楽出来ていいのかなと感じたぐらいには楽だった。実際今回cssに関してはmarginをちょっと付けるだけで後は何もしてない。

んで、サーバーとか特に持って無かったのでGitHub Pagesを使った。なのでWordPressみたいなCMSは使えないのだけど、コンテンツ量が特に多くは無いしCMSを導入するまでも無いかなって思った。
ただHTMLを一々手書きするのは苦痛だったので、Jadeを使った。これが思ったより便利だった。

まず、Jadeが素晴らしかったのがページのレイアウトを継承出来ることだ。例えば、WordPressの場合、ヘッダはheader.phpからサイドバーはsidebar.phpからみたいな感じでモジュール化していくのだが、Jadeでもそのようなモジュール化はincludeで可能なのだが、それとは別にページ全体のレイアウトを継承することができる。実際にコードを見てもらうのがわかりやすいが、今回の場合複数ページのレイアウトをlayout.jadeで定義した。

あと、mixinが便利だった。元々JSONでゲームの説明文やurlなどを定義してeachで回して拾っていこうと思っていたのだけど、mixinを使えば手軽に繰り返すhtmlが生成出来た。mixinを使ったのがこれ。ただかなり適当に書いてるのでもっと良い書き方とかあるのかもしれない…。

ただJade使いどころが難しいかなというか、ブログとかつけたりもうちょっと大きなサイトになるとCMSとかが必要になるだろうし、HTMLを短く書きたいなら他にもHamlとかあるし…、けどjsなのでローカルで完結するし、手軽なのは良いのではと思う。モックアップとかを作るときに使うと良いかも。

ドメインどうするかなーって思って何かそれで1ヶ月経ってたのだけど、何も変哲の無いドメインにした。

と、かなり楽して目的に応じたサイトが作れたので楽しかったです。