この記事は Competitive Programming (1) Advent Calendar 2019 の 12 日目の記事として書かれました。
2019 年 11 月に、北海道大学競技プログラミングサークルのホームページを FC2 から GitHub Pages へと移行しました。移行していろいろと便利になりましたので、今後競技プログラミングサークルでホームページを作ることを検討している方への参考になればと思い、記事を書くことにしました。
TL; DR
GitHub を使って、資料管理・ホームページ作成をするやり方を説明します。資料管理用・ホームページ用リポジトリをそれぞれ作り、GitHub Pages + Jekyll (+ CI) でページをビルドします。
ホームページのコンテンツ
弊サークルのホームページの主なコンテンツは以下が挙げられ、これらを便利に見れるようにすることを重視してホームページを構成しました。
- ICPC 参加報告
- スライド
- 弊サークルでは「勉強会」という、予め決定されたテーマについてスライドを通じて勉強する活動があります。今まで作られたスライドがどこかにまとまっていれば、新しくサークルに興味を持ってくれた方にも勧めやすいですし、勉強もしやすいです。
- 大学サークル主催の競技プログラミング合宿で出した問題やその解説についても、どこかにまとめる必要があります。
- 連絡先
従来のホームページの構成、その問題点
従来の構成は以下のようになっていました。
- ホームページは FC2 の無料スペース を使用
- 各種資料は SlideShare にアップロード
ですが、この構成にはいくつか問題点があります。
- ホームページを三ヶ月以上更新しないと広告がつく
- これは FC2 のホームページ側が課している制約です。無料だし仕方ないですが、できればこの制約はなくしたいところです。
- SlideShare でスライドをアップロードしても日本語が見れない
- フォントが埋め込みされていない、などが理由の場合もあります。
- しかしながらフォントを埋め込んでいるのに見れない場合もあります。こういった場合はなぜかフルスクリーンにすると大体は見れるのですが、わざわざフルスクリーンにするのは不便です。
- SlideShare でスライドを差し替えられない
- SlideShare にはスライドを編集して再アップロードする機能はありません。いったんスライドを削除して全く同じものをアップロードしても、スライドへの URL は今までとは異なるものになってしまいます。
- スライドの中身を変更した場合、URL の変更を何らかの形で周知しなければならないことを考えるとこれも非常に不便な点です。
これらの問題を解消するために、以下で説明する構成に変更しました。
移行後のホームページの構成
- ホームページは GitHub Pages を使用
- リポジトリ: hcpc-hokudai/hcpc-hokudai.github.io
- Jekyll で Markdown をビルドして HTML を生成
- 各種資料は hcpc-hokudai/archive リポジトリにアップロード
GitHub Pages では広告が付きません。また、今時 PDF が見れないブラウザを使用する人はそうそういないだろう・・・ということで、資料はリポジトリに直接入れて Web 上で見れるようにしました。ファイルを編集して再アップロードする機能は当然 GitHub に備わっていますので、日本語が見れない問題や再アップロードができない問題は解消されました。
それでは、実際にこの構成でホームページを作成してみましょう。資料管理・ホームページ作成について、どう設定すればよいかを以下で詳しく説明します。
資料管理について
資料管理用に、archive というリポジトリを作ったとします。
まず、master ブランチに各種資料を push します。次に、GitHub Pages を有効にするために以下を設定します。
これで、資料が Web 上から参照できるようになります。
GitHub Pages について
ここに書くと記事が非常に長くなるので、別途リポジトリ tsutaj/pages-example を用意しました。Jekyll や CI について簡単に知ることができる構成にしたつもりです。
上に示したものを fork するかリンク先のコンテンツを含んだリポジトリを自分で作成するかして、説明を読んだり、ビルドしたものがどのように見えるか試してみたりしてください。
サンプルはこちらにあります: tsutaj.github.io/pages-example/
まとめ
GitHub Pages + Jekyll は少しの設定で便利にホームページを構成できます。また、CI と組み合わせることで Jekyll への機能追加にも柔軟に対応できます。
この記事に関して質問がありましたら tsutaj までご連絡ください。
宣伝？
現在、kimiyuki さんと beet さんと自分で kmyk/online-judge-verify-helper を開発中です。これは CI と連携して C++ のライブラリリポジトリを自動で verify し、その結果を GitHub Pages で可視化するというものです。まだ現在進行中で開発をしているところですが、よろしければぜひお試しください。
