GitHub Pagesを使って静的サイトを公開する方法

:::note info
2021年最新化しました。
:::

# GitHub Pagesとは

ソースコード管理サービスであるGitHubのリポジトリにウェブページファイルを登録すると無料で静的サイトを公開できるサービスとして[GitHub](https://github.com)が提供しています。
![Untitled design.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/76f985ec-48cb-f7f4-97bc-ed025d123175.png)

## 準備

### 1. GitHubアカウント作成

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/5a097600-05bc-96f1-5b1d-4329a3dd5828.png)


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

Macユーザーは不要ですが、Windowsユーザーは[Gitクライアント](https://git-scm.com/downloads)をインストールしてください。

## 手順

[公式手順](https://pages.github.com/)を見ればわかりやすく書いてあります。
今後はMacベースで記述していきます。

### 1. リポジトリ作成

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/dfe41732-7245-c612-334d-70fca01310e9.png)

> Repository Name項目以外は設定しなくても良いですが、「404エラー」ページが現れるので、READMEファイル/.gitignoreファイル/licenseファイルの一つ以上チェックを入れた方が良いです。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/75965997-2231-10ae-0e6f-2a048c87b7d4.png)


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

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

#### リポジトリClone

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/c7a4a8fb-8649-f11f-6c82-9ba0da75228f.png)

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

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

#### "Hello World"ファイル作成

```shell
$ echo "Hello World" > index.html
```

#### GitHubへPush

GitHubへPushまたはCloneする際に認証情報にてパスワードが個人アクセストークンを入力するように仕様が変わりましたので、アクセストークンをGitHub設定から発行する必要があります。
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/c5965b6a-e5c5-f7a0-f7e5-5c17e82546db.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/704ffcef-9342-c159-dd36-a09f11a37818.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/b54cab03-f26d-4dbc-743d-d9562df6475e.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/ee7edad4-eabf-4de0-5a6b-1d160d6d1138.png)

```shell
$ 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」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/c032f111-e2cf-649e-5c6c-d158df82ef19.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/fb0551f5-e5e3-3c3e-a844-4728678eb8b9.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/b1fb5665-edfc-6bc0-d707-f252c981ef95.png)

# 404エラー対応

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/40e921ac-10db-eff0-83d0-6cbaa51f54ca.png)

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

# テーマ変更

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/0a30b873-029a-fa4d-802f-c64691182c88.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/87a23cab-0840-dc6a-2ef8-68e01a61c1d8.png)

> リポジトリを作成する際に「README.md」ファイルを作成した場合、下記の画面のように編集画面が現れるので「Commit changes」をクリックしてください。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/d79992c8-c969-1deb-c93b-a703b36cfa24.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/21b607bd-e81a-16e7-6392-12550676b270.png)

### _config.yml

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

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

### index.html

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

```ruby
---
layout: default
---

Hello World
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/35d54e05-9ef0-b5c7-f62a-8a4eec5e29f5.png)

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

https://jekyllrb.com/