GitHub Pages+Jekyll で静的サイトを作ってみる

[Jekyll を使用して GitHub Pages サイトを設定する](https://docs.github.com/ja/pages/setting-up-a-github-pages-site-with-jekyll)を参考に、
GitHub Pages+Jekyll で静的サイトを作ってみたので忘備録としてまとめました。

## 作業環境

WSL2(Ubuntu 20.04)

## jekyll のインストール

作業環境に jekyll をインストールします。

```bash
# rubyと利用するパッケージをインストール
$ sudo apt-get install ruby-full build-essential zlib1g-dev

# 非rootユーザでgemをインストールさせるために、ユーザーアカウントのgemインストール先を設定
$ echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
$ echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
$ echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
$ source ~/.bashrc

# jekyllとBundlerをインストール
$ gem install jekyll bundler
```

## テンプレートの生成～動作確認

事前に GitHub のリポジトリは作成してあるものとします(※1)。

※1 リポジトリ名と公開時の URL

| リポジトリ名                                         | GitHub Pages の可視性 | 公開時の URL                                                                                                              |
| ---------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `<user>.github.io` または `<organization>.github.io` | public                | `https://<user>.github.io` または `https://<organization>.github.io`                                                      |
| other                                                | public                | `https://<user>.github.io/<your-repository>` または `https://<organization>.github.io/<your-repository>`                  |
| other                                                | private               | `https://<organization>.github.io/<your-repository>`へアクセスすると、`https://<ランダム文字列>.github.io` へリダイレクト |


### テンプレートを生成する

デフォルトの markdown ファイルや Gemfile などが生成されます。

```bash
# リポジトリをclone
$ git clone https://github.com/<user>/<your-repository>.git && cd $(basename $_ .git)
# docsディレクトリを作成(docs配下に資材を格納したかったから)
$ mkdir docs && cd $_
# テンプレートを生成
$ jekyll new --skip-bundle .
# .gitignoreはリポジトリのルートに移動しておく
$ mv .gitignore ../
```

### Gemfile の編集

生成された Gemfile の内容を以下のように修正します。

- `gem "jekyll"`の行をコメントアウト
- `# gem "github-pages"`で始まる行の内容を変更

  ```
  gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins
  ```

  - GITHUB-PAGES-VERSION は[Dependency versions](https://pages.github.com/versions/)を参照して置き換え

### 依存する gem のインストール

`bundle install`により依存する gem をインストールします。

```bash
$ gem install liquid -v 4.0.3 # ※2
$ bundle install
```

※2 `bundle install`をした際に、存在するはずの gem なのに以下のようなエラーが表示されたため個別にインストールした

```
Bundler::GemNotFound: Could not find liquid-4.0.3.gem for installation
```

### jekyll の設定変更

必要に応じて jekyll の設定ファイルの内容を修正します。

```
domain: my-site.github.io       # if you want to force HTTPS, specify the domain without the http at the start, e.g. example.com
url: https://my-site.github.io  # the base hostname and protocol for your site, e.g. http://example.com
baseurl: /REPOSITORY-NAME/      # place folder name if the site is served in a subfolder
```

### 動作確認

以下のコマンドで起動させて、`http://localhost:4000/`から動作を確認します。

```bash
# 起動
$ bundle exec jekyll serve
```

## GitHub Pages への反映

リモートリポジトリに反映し、GitHub のリポジトリ設定を変更すると、`https://<user>.github.io/<your-repository>`で静的サイトが表示できるようになります。

1. 変更内容をリモートリポジトリに反映する
   ```bash
   $ git add .
   $ git commit -m 'Initial GitHub pages site with Jekyll'
   $ git push origin main
   ```
2. GitHub のリポジトリの設定を変更する
   1. Settings->Pages から GitHub Pages の設定を開く
   2. デプロイ方法や、対象とするブランチ、ディレクトリなどを選択して保存する
3. GitHub Actions で自動的にビルドとデプロイが行われる

## 参考

- [Jekyll を使用して GitHub Pages サイトを設定する](https://docs.github.com/ja/pages/setting-up-a-github-pages-site-with-jekyll)
- [Jekyll on Ubuntu](https://jekyllrb.com/docs/installation/ubuntu/)
- [GitHub Pages サイトの可視性を変更する](https://docs.github.com/ja/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site)