2021年最新化しました。
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のブログ書き方に従って静的ページを変更することになります。