More than 3 years have passed since last update.

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

Posted at 2020-03-15

はじめに

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

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

の順で説明します

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

設定前

設定後

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

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

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

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

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

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

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

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

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

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

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

Rubyが使える環境で

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

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

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

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

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

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

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