技術メモにGitHubのGitHub Pagesが最適かも
ちょっとした、公開してもよい技術メモ。今まで、はてなブログに書いてきました。Markdown記法も使えるし、書きやすいし、デザインも手軽にそこそこ良いのができるしと、個人的には中々良いと思っているのですが、以下のようなときに不都合があります。
- 画像以外のファイル(csvとか)をアップロードしたい
- 修正の差分履歴を残したい
- テーマごとに大量のサイトを作りたい
- ブログというほどでもないちょっとしたログとして使いたい
無料で何かよいのないかなーと思っていたのですが、GitHubの提供するホスティングサービスであるところのGitHub Pagesが中々良かったので紹介します。最近アップデートして更に便利になっているので、少し昔に使って不満を感じていた方も、再度試すと思わぬ発見があるかもしれません。。
あと、GitHubって何?という人は学習コストが高くなってしまうので、あんまりオススメはできないです(GitHubやgitを知らなくても使えないことはないです)。GitHubが何ぞやというところから知りたい人は、以下記事参照下さい。
以降は、GitHubやGitはある程度知っている前提の説明となります。
GitHub Pagesの使い方
GitHub Pagesは、いくつか種類があるのですが、今回はリポジトリのmasterを丸ごとWebページにしてしまう方法を紹介します。
まずは、新規のリポジトリを作成して、Settingを選択します。
次に、GitHub Pagesの項目(ページ中ほど)をみます。
こんなところ
続いて、None
というところをクリックして、master branch
を選択します。
こんな感じね
続いて、その下のTheme Chooserで好きなテーマを選択すると、好きなデザインを簡単に選択できます。
OKを押すと、下記のように何やらアドレス(https://karaage0703.github.io/リポジトリ名
)が表示されます。
実は、もうこれでWebサイトが完成しています。表示されたアドレスにアクセスすると、以下のようにサイトが見れます。
できあがり
README.md
が自動的にindex.html
の役割を果たしてくれます。
後は、Gitでリポジトリを管理する要領で、好きなエディタでファイルを作成・修正してGitでpushすれば、簡単にWebサイトを更新することができます。GitHubのWebブラウザ上で直接編集してもOKです。ディレクトリを使った階層構造を持つことも、もちろん可能です。
Markdown記法も使えるので、以下のようにソースコードの貼り付けや、写真、表の表示なども簡単にできます(Markdown記法を知っていれば)。
試しに作って見たサイト
今回、Deeplearningの実験した結果を残すために、以下のようなサイトを作って見ました。
GitHubなら、無料で手軽にいくつもこんな実験結果を記録したサイトが作れるので便利ですね。
GitHub Pagesの利点・欠点
簡単に利点・欠点をまとめてみます。普段、GitHub/Gitを使っているエンジニアなら、試して損は無いのじゃないかなと思います。
利点
- Markdown記法が使える
- 写真、表が表示できる
- ソースコード、実験結果のファイルが保存できる
- Gitでバージョン管理できる
- 無料で使える
- サイトをテーマごとに大量に作れる(リポジトリの数だけサイトが増やせる)
欠点
- GitHub/Gitを知らないとハードル高い
- 大きな容量のバイナリファイルを何度もcommitすると急激に重くなる(Gitの仕組み上の話)
- Web上で記事は書きにくい(プレビュー機能は貧弱、他サービスとの連携などは無い)
- GitHubのファイル更新してから、サイトに実際に反映されるまでタイムラグがある(1分程度)
- SNSとの連携などは無い(デフォルトでは)
- 非公開にしたい場合は有料
まとめ
GitHub Pagesを使った技術メモの公開に関して紹介しました。こうやって、個人的な実験の結果を残しておくと、後で簡単に見返せるので便利ですね。データのバックアップにもなりますし、公開することでひょっとしたらサイトをみた誰かしらからフィードバックを貰える可能性もゼロではありません。実験ノートを公開しろと言われることもないのですし、いいことだらけですね。
GitHub Pagesの欠点に関しては、はてなブログと組み合わせて(リンクを貼って)よいとこどりをするのも賢い使い方かもしれませんね。GitHub Pagesは自由度高そうなので、独自ドメイン取得して、本格的なサイト運営に使うというのも、ひょっとしたらありかもしれませんね。
気になった方は、GitHub Pagesに関して調べて、色々活用して見て下さい。