GitHub Pagesについてまとめています。
GitHub Pagesとは？
GitHub Pagesは、GitHubのリポジトリからHTMLや画像を取得し、ウェブサイトを公開できるサイトホスティングサービスです。
関連）GitHub Pages について – GitHub Docs
ドメインはgithub.ioもしくは、独自ドメインを仕様することが可能。
GitHub Pagesは、Jekyll（ジキル）という静的サイトジェネレータが組み込まれていて、HTMLを取り込んで静的なウェブサイトを生成します。
参考）GitHub PagesにJekyllを使っていい感じのページを作る例 – Qiita
JekyllはRuby言語のgemとして動作するモジュールで、ローカル環境でも動作するように環境を作るなら、rubyや必要なgemなどのインストールが必要になります。
GitHub Pagesで単純なHTMLファイルを公開する
ただページをウェブ上に公開するだけなら、Jekyllを使う必要はないんですね。単にリポジトリ名をつけて、index.htmlやその他のHTML、画像ファイルを作成するだけでウェブページの公開ができます。
例えば、リポジトリにindex.htmlというファイルを作って、マスターブランチとしてリリースします。内容は以下を記述しました。
<html> テストページです。 </html>
GitHubにて、プロジェクトページのSettingsをクリック後、Pagesをクリックし、Sourceの箇所にbranch:mainを設定してSaveをクリックします。
例えば、プロジェクトのページがhttps://github.com/<username>/samplexだった場合、ウェブページはhttps://<username>.github.io/samplex/というURLになります。なお、プロジェクト名を<username>.github.ioで作成するとウェブページのURLは、<username>.github.ioとなります。
具体的に書くと、potepanuserというユーザが、potepanuser.github.ioでプロジェクトを作成すると、ウェブページのURLがhttp://potepanuser.githu.ioになるんですね。Pagesの設定で、常時httpsにしたり、独自ドメインを割り当てることも可能です。
以下は「テストページです。」という文言だけの表示結果。画像やcssファイルによる装飾、javascriptファイルの使用も可能です。
しかし、現在はワードプレスなどを使えば簡単に美しいサイトを作り込むことができるため、github.ioドメイン上で凝ったページを公開しているプロジェクトは多くありませんでした。
Jekyll（静的ページジェネレータ）を使ってページを公開
index.htmlを作成する方法は簡単ですが、実際に運用する場合生でhtmlを記述していくのは大変ですし、外部のHTMLエディターで都度編集するのも大げさ…という場合は、Jekyllによる静的ページを利用するのが良いかも知れません。
Jekyll を使用して GitHub Pages サイトを作成する – GitHub Docs
Jekyll用のファイルを用意します。
├── _config.yml ├── _layouts │ └── default.html └── index.md
_config.ymlには設定情報、default.htmlにはデフォルトレイアウトの情報、index.mdにはマークダウン言語で記述したウェブコンテンツを記述します。なお、Setting→Pages→Change themeで何らかのテーマを設定すると、_config.ymlが自動的に変更され、見栄えが変わります。
基本となる3ファイルは、以下の内容で作成します。
_config.ymlは以下の内容となります。サイト名のみの設定です。
name: My Jekyll Website
_layouts/default.htmlには以下の内容を設定します。
<!DOCTYPE html>
<html>
<body>
{{ content }}
</body>
</html>
index.mdには以下の内容を設定します。コンテンツはマークダウン言語で記述します。マークダウン言語はwikiなどでも使用されている言語で、htmlを直接記述するよりは簡単に見出しや強調などをマークの埋め込みによって実現できるというものです。
---
title: My page
layout: default
---
# {{ page.title }}
Content is written in [Markdown](https://learnxinyminutes.com/docs/markdown/). Plain text format allows you to focus on your **content**.
<!--
You can use HTML elements in Markdown, such as the comment element, and they won't be affected by a markdown parser. However, if you create an HTML element in your markdown file, you cannot use markdown syntax within that element's contents.
-->
GitHub Pagesの有効な使い方は？
確かにちょっとしたドキュメントなどを、無料ウェブスペース上にアップロード出来たら便利なのかも知れません。実際、どのように使われているのでしょうか？
GitHub Pagesから別サイトにリダイレクト
github.ioドメインを見ていたと思ったら別サイトに飛ばされてしまうケース。googleやMicrosoftなどの大手がおこなっているので、規約違反というわけではなさそうです。
例えば、Microsoftは、AzureのドキュメントやMicrosoft Open Sourceのページをgithub.ioからmicrosoft.comドメインにリダイレクトしていました。
GitHub Pagesをドキュメント公開ページとして利用
例えばPython Software Foundationは、github.ioドメインにて日本語ドキュメントの公開をおこなっていました。
ちなみにコンテンツ生成はJekyllではなく、Sphinxというソースコードに埋め込まれたreStructuredTextから生成されています。
GitHub Pagesを自己紹介ページとして利用
研究者のかたが、研究成果をとりまとめて公開＆自己紹介の場として利用しているケース。
参考）自己紹介 – Yuta Toyama（Jekyll使用）
FacebookやLinkedinなど自己紹介の場として簡単に使えるサービスがあるなか、ハードルの高いgithubのpagesで自己紹介ページを作成されているのはちょっとしたアピールになるのかも知れません。
GitHub Pagesまとめ
- GitHub Pagesを使って、単純なhtmlファイルなら簡単にウェブページとして公開できる
- Jekyllという静的ページジェネレータを使って、ファイルからコンテンツを生成することも可能
- ドキュメント公開や自己紹介ページとして使われているケースが多い
