DroidKaigiのWebサイトの作り方

DroidKaigiに来ていただいたみなさん。ありがとうございました！

私は運営メンバーに参加して、Webサイトの構築・管理とかしてました。

CFP開始当初は時間がなかったので、私がえいやとBootstrapで作成。
ただし、公開前にデザイナーさんにアドバイスを頂いて細かい部分を手直ししたり、公開後も他のメンバーからガシガシPRを貰って手を入れていきました。
採択セッションの公開時のあたりで、デザインをゆりりーさんにお願いし、私が技術面を担当する体制に。

サイトはGitHub Pagesを使ってます。 今まではペライチのHTML置くくらいにしか使ってませんでしたが、DroidKaigiのサイトではも少しちゃんと機能を使ってます。

本記事ではその辺をまとめてみます。

※ Androidの話は全くしません。

リポジトリ

• GitHub PagesのOrganization siteとしてリポジトリ作成
  • https://github.com/DroidKaigi/droidkaigi.github.io
• organizationname.github.ioという名前でリポジトリを作ると、masterブランチの内容が同名のURLで公開されます。
  • Organizationじゃなく、個人ユーザーの場合も同じ。
  • gh-pagesブランチを使うのはProject siteの場合です。
• リポジトリはPrivateのままでもGitHub Pagesは公開できます。

CMS（Jekyll+Liquid）

• GitHub PagesではJekyllが使えます。
  • ただし素のJekyllが使えるわけではなく、あくまでGitHub Pagesのgemを使う形になります。
• 色々制約があるので、Using Jekyll with Pagesを要参照。
  • 例えば、_config.ymlのsource:〜設定は無視されるので、常にリポジトリのトップレベルにソースを置く必要があります。
    これに気付かずpushしたら、30分ほどサイトがすっとんだ事がありました。
• Jekyllのプラグインも決まったものしか使えません。
  • 使えるものについては、Using Jekyll Plugins with GitHub Pagesを参照。
  • sitemap.xmlのプラグイン使ってます。
• テンプレートエンジンはLiquid
• アクセス時にページを書き出すのではなく、Jekyllの起動時（GitHub Pagesではpush時）に書き出しキャッシュするだけ。
  • なので、インタラクティブなWeb APIっぽいものを作る事は出来ません。
  • 実はセッションリストをjsonで取得できるようにしてあるんですが、それもLiquidで書き出してるだけです。
• _data/の下にYAMLで任意のデータを置くとテンプレートから参照できます。
  • それでセッションリストのデータを持っています。
  • YAML書き換えるとページとjsonも勝手に書き換わります。
  • Jekyllでは普通_posts/2015-04-24-DroidKaigi.mdって感じのパスで記事を書いて行くようなんですが、 DroidKaigiのサイトではそれは使っていません。
• Jeykyllで処理するファイルの先頭にはFront Matterを書きます。
  • そこにも任意のデータを書けます。 http://droidkaigi.github.io/index.html で使ってます。

テスト

• YAML使ったり、json書き出したりとかしだしたので、CIでテストもするようにしました。
• Travis CIで回してます。
• テスト内容
  • ビルド
  • HTMLの構文チェック HTML::Proofer
  • favicon
  • リンク切れ
  • imgのalt属性のチェックはわざと無視。代替文字が必要なデザインじゃないので。
  • YAML,jsonの構文チェック（パースしてみてるだけ）

テストはとりあえずでいいやとインラインで書いちゃってるけど、どういう書き方がベターなんだろ。

Webフォント

英字はRoboto。日本語はNoto Sans。

• Roboto Condensed http://www.google.com/fonts/specimen/Roboto+Condensed
• Noto Sans Japanese http://www.google.com/fonts/earlyaccess

その他

ちゃんとSEOとか知ってる人には常識だろうけど

• 一度設定したOpenGraph用の画像を消す時は注意
  • サイトのmetaタグの画像パスなどを書き換えても、すぐにはFbは反映してくれない様です。
  • デザイン刷新時に古い画像を消したら、一時的にFbのシェア時に画像が出なくなってしまいました。
• はてブとかツイートボタンとか、ソーシャルボタンはURLが明示的に指定できるならした方がいい
  • 指定がなければ勝手に現在のURLになる
  • http/httpsの違いや、ハッシュの有無で別のページとして扱われちゃう
  • canonical URLも書くべき <link rel="canonical" href="http://droidkaigi.github.io/"/>
• ページランク
  • サイト公開直後はDroidKaigiで検索しても全然検索結果の上位に来なかった。5ページ目以降とか。
  • てくぶのコミケ用ページをGitHub Pagesで作った時もそうだったんですが、一月くらいは上がらない感じ。
  • 後からsitemap.xmlを用意したりとかしたけど、結局Googleがいつクロールしてくれるかはわからないので…

---

一緒に書いたけど、ソーシャルリンクについてはどちらかと言うとテクブのサイト作ってた時の知見。
あと、PRのブランチへにpushしたら、どっかにデプロイしてすぐ他の人がプレビュー出来るようにすればよかったなー、と気付いた。 レビューが捗る。

感想記事的なものは別に書きます。