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

Jekyll を使用して GitHub Pages サイトを設定するを参考に、
GitHub Pages+Jekyll で静的サイトを作ってみたので忘備録としてまとめました。

作業環境

WSL2(Ubuntu 20.04)

jekyll のインストール

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

# 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 などが生成されます。

# リポジトリを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を参照して置き換え

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

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

$ 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/から動作を確認します。

# 起動
$ bundle exec jekyll serve

GitHub Pages への反映

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

変更内容をリモートリポジトリに反映する

$ git add .
$ git commit -m 'Initial GitHub pages site with Jekyll'
$ git push origin main

GitHub のリポジトリの設定を変更する
1. Settings->Pages から GitHub Pages の設定を開く
2. デプロイ方法や、対象とするブランチ、ディレクトリなどを選択して保存する
GitHub Actions で自動的にビルドとデプロイが行われる