GitHub Pagesとは

ソースコード管理サービスであるGitHubのリポジトリにウェブページファイルを登録すると無料で静的サイトを公開できるサービスとしてGitHubが提供しています。

準備

1. GitHubアカウント作成

https://github.com にアクセスしてアカウントを作成します。

2. Gitクライアントインストール (Windowsユーザーのみ)

Macユーザーは不要ですが、WindowsユーザーはGitクライアントをインストールしてください。

手順

公式手順を見ればわかりやすく書いてあります。
今後はMacベースで記述していきます。

1. リポジトリ作成

緑色のNewボタンをクリックします。

「Repository Name」項目に「アカウント名.github.io」のように入力し、他の項目は初期値のままリポジトリを作成します。

Repository Name : (アカウント名).github.io

Repository Name項目以外は設定しなくても良いですが、「404エラー」ページが現れるので、READMEファイル/.gitignoreファイル/licenseファイルの一つ以上チェックを入れた方が良いです。

2. Webページファイル作成

簡単なウェブページ(index.html)を作成してGitコマンドで作成したファイルをコミットとプッシュします。しばらくすると自動的にGitHub Pagesが公開されます。

リポジトリClone

リポジトリのコードボタンをクリックするとClone情報が現れます。

$ git clone https://github.com/(アカウント名)/(アカウント名).github.io.git
$ cd (アカウント名).github.io

# 組織の場合、
$ git clone https://github.com/(組織名)/(組織名).github.io.git
$ cd (組織名).github.io

"Hello World"ファイル作成

$ echo "Hello World" > index.html

GitHubへPush

GitHubへPushまたはCloneする際に認証情報にてパスワードが個人アクセストークンを入力するように仕様が変わりましたので、アクセストークンをGitHub設定から発行する必要があります。

フローフィル > Settings > Developer settings > Personal Access tokens > Generate new token 順でクリックします。

Note項目に管理トークン名を入力し、Repoチェックボックスにチェックしてから保存してください。

発行されたトークンキーをパスワードとして使ってください。

$ git add --all
$ git commit -m "Initial commit"
$ git push
Username for 'https://github.com': (アカウント名)
Password for 'https://(アカウント名)@github.com': (個人アクセストークンキー)

3. GitHub Pagesの設定確認

リポジトリのSettingsをクリックしてサブメニューから「Pages」をクリックします。

Source部分がmainブランチになっていること、公開されていることを確認します。

4. ウェブページの公開確認

https://(アカウント名).github.io

404エラー対応

手順上、問題ないのに下記のような404エラーが表示される場合があります。
対応としては再度ビルドプッシュをしておけば、解決できます。

$ git commit --allow-empty -m "Trigger rebuild"
$ git push
Username for 'https://github.com': (アカウント名)
Password for 'https://(アカウント名)@github.com': (パスワード)

テーマ変更

Pagesの環境設定にて「Choose a theme」をクリックするとテーマ変更することができます。
テーマは静的サイトの構築ツールのJekyllテーマ形式で作られます。

テーマを選択して「Select theme」をクリックします。

リポジトリを作成する際に「README.md」ファイルを作成した場合、下記の画面のように編集画面が現れるので「Commit changes」をクリックしてください。

テーマ適用するには下記のソースコードを編集します。

_config.yml

サイトの基本的なURL構造の設定ファイルを編集します。
baseurlとtheme項目を追加します。

baseurl: ""
url: "https://(アカウント名).github.io"
theme: jekyll-theme-leap-day

index.html

デフォルトページのレイアウトを適用します。

---
layout: default
---

Hello World

しばらくするとテーマが適用されていることが確認できます。

これからはJekyllのブログ書き方に従って静的ページを変更することになります。