GitHub Pagesに公開する静的ページを用意する方法

はじめに

自分がGitHub Pagesを始める際に，調べたり試したことのメモです．

GitHub Pagesはリポジトリの内容を静的ページとしてホスティングしてくれるサービスです.
が，その中身のページを作成する手順は複数あるので，まとめました．

記事の構成

• リポジトリを公開するための設定
• 公開するページの作成方法の紹介

の順で説明します

リポジトリの公開準備

リポジトリの内容を公開するためには設定が必要になります．

• リポジトリを作成する．リポジトリ名がURLに含まれます．
• Setting->（少しスクロールしたところにある）GitHub Pagesの欄のうち，公開するブランチとしてmasterを選択
• (任意で)Jekyllテーマの選択 テーマを選択すると，自動的にコンフィグファイルとindex.mdが生成されます

設定前

設定後

以上の設定を行うことで公開されます．
作成したプロジェクトサイトのURLは'https://ユーザー名.github.io/リポジトリ名/' となります．

公開の対象となるブランチについて，従来はgh-pagesというブランチが必須でしたが，現在は必要ないです．
しかし，gh-pagesブランチを作成すると，Settingsの選択肢に追加されます．

補足：ユーザーページとプロジェクトページ

GitHub Pagesには3種類あります．
1つはユーザー，もしくは組織のサイト，もう1つはプロジェクトのサイトです．

違いはほとんどありません．ただし，下記の内容については違いがあります．

• 作成できる個数（ユーザー・組織ページは1つまで，プロジェクトページは複数作成できる）
• URL（リボジトリ名がない分，ユーザーページのほうが短い）

静的ページの作り方

はじめに でも書いたように，公開するページを作るためにはいくつかの方法があります．

• 自分でHTML,CSSファイルを用意する
• mdファイルを作成し，GitHubのJekyllでビルド
• ローカルのJekyllでビルドする
• ローカルのJekyll以外の静的サイトジェネレータでビルド

方法1：自分でHTML,CSSファイルを用意する

基本的ですが，今時やる人は少ないです．
HTMLファイルだけでなく，CSSを用いた装飾やJavascriptの実行も行えます．

BootStrapなどのCSSフレームワークは，ダウンロードしたもの，CDNのどちらでも利用することもできます．

方法2：mdファイルを作成し，GitHubのJekyllでビルド

GitHub PagesにはJekyllという静的サイトジェネレータが組み込まれており，自動的にmdファイルをhtmlに変換してくれます．

Settingからテーマを選択することでデザインを変更できます．一覧にないものでも，configを手で書き換えることで利用できます．

マークダウンを作成してプッシュするだけで，それなりのデザインのサイトが作成されるので一番手軽な方法です．

方法3：ローカルのJekyllでビルドする

Ruby製のツールのため，利用にはRubyのインストールが必要になります．

Rubyが使える環境で

$ gem install bundler jekyll
$ jekyll new {プロジェクト名}

上記のコマンドを実行することで雛形が作成されます．

また，ビルドしたファイルを公開する際には，_config.ymlのurlの項目を以下のように変更します．

baseurl: "/{リポジトリ名}"
url: "https://{ユーザー名}.github.io/"

方法4：ローカルでその他の静的ページジェネレータでビルドする

Jekyll以外にも多くのジェネレータが公開されており，それらを用いて生成したファイルを公開することもできます．
下記のリンクでは静的ページジェネレータが一覧で紹介されています．
https://www.staticgen.com/

この方法のみ，GitHubで自動実行されるJekyllとの衝突を防ぐため，.nojekyllという名前の空ファイルを作成する必要があります．

おわりに

一口に静的ページと言っても，様々な作成方法がありました．
ポートフォリオや紹介サイトを作ることが目的ならば，Jekyllとイケてるテーマに頼るのが最も手軽そうです．

参考

公式ヘルプ https://help.github.com/ja/github/working-with-github-pages