Jekyllを使用してGitHub Pagesのサイトを作る

blog github-pages

Jekyllを使用してGitHub Pagesのサイトを作成します。
Jekyllは静的サイトジェネレーターです。GitHub PagesではデフォルトでJekyllを使用してサイトを作成しています。

サムネイル

環境

Windows 10 64ビット
Git for Windows 2.44.0
Ruby 3.2.3
Jekyll 4.3.3

前提

Gitをインストールしている。
GitHubのアカウントを持っている。

サイト作成の流れ

Jekyllをインストールする。
GitHub Pagesでサイトを作る。
GitHubリポジトリをクローンする。
Jekyllを使用してサイトを作る。
ローカルでサイトを確認する。
変更をコミット・プッシュする。
リポジトリの設定を変更する。
サイトを確認する。

以下のページを参考にしています。
Jekyll を使用して GitHub Pages サイトを作成する

1. Jekyllをインストールする

Jekyllのインストールについてはこちらをご覧ください。

2. GitHub Pagesでサイトを作る

GitHub Pagesのサイト作成についてはこちらをご覧ください。

3. GitHubリポジトリをクローンする

Jekyllを使用してサイトを作成します。

GitHubにアクセスする。
サインインしていない場合、サインインします。
作成したGitHubリポジトリのページにアクセスする。
「Code」をクリックする。
クローン用のURLをコピーする。
GitHubリポジトリをクローンする。
コマンドプロンプトかPowerShellを開き、以下を実行します。
<リポジトリをクローンするディレクトリのパス> は任意のパスです。
https://github.com/<アカウント名>/<リポジトリ名>.git はコピーしたクローン用のURLです。
```
> cd <リポジトリをクローンするディレクトリのパス>
> git clone https://github.com/<アカウント名>/<リポジトリ名>.git
```

4. Jekyllを使用してサイトを作る

リポジトリのディレクトリに移動する。
コマンドプロンプトかPowerShellを開き、以下を実行します。
<リポジトリのディレクトリのパス> は <リポジトリをクローンするディレクトリのパス>/<リポジトリ名> です。
```
> cd <リポジトリのディレクトリのパス>
```
README.md を削除する。
リポジトリのルートディレクトリに README.md がある場合、README.md を削除します。
以下を実行します。
```
> git rm README.md
```
docs ディレクトリを作成して移動する。
サイトを作成するディレクトリを作成して移動します。以下を実行します。
```
> mkdir docs
> cd docs
```
Jekyllでサイトを作成する。
現在のディレクトリ(docs ディレクトリ)にサイトを作成します。以下を実行します。
```
> jekyll new --skip-bundle .
```
Gemfile を変更する。
作成された Gemfile をテキストエディターで以下のように変更します。
GitHub Pagesを使う場合は github-pages が必要なので、次の行をコメントから戻します。
```
gem "github-pages", group: :jekyll_plugins
```
上記の行に , "~> <github-pagesのバージョン>" を追加します。<github-pagesのバージョン> にはDependency versionsの github-pages のバージョンを入力します。
```
gem "github-pages", "~> <github-pagesのバージョン>", group: :jekyll_plugins
```
github-pages に含まれるので、jekyll を定義する行をコメントアウトします。
```
#gem "jekyll", "~> <jekyllのバージョン>"
```
_config.yml を変更する。
作成された _config.yml をテキストエディターで変更します。
以下の項目を確認して変更します。サイトで表示したくない場合は項目ごとコメントアウトします。

項目	説明
title	サイトのタイトルを入力します。
description	サイトの説明を入力します。
twitter_username	Xのアカウント名を入力します。
github_username	GitHubのアカウント名を入力します。

gemをインストールする。
gemをインストールするため、以下を実行します。
```
> bundle install
```

5. ローカルでサイトを確認する

ローカルでサーバーを立ち上げる。
コマンドプロンプトかPowerShellを開き、以下を実行します。

> cd <リポジトリのディレクトリのパス>/docs
> bundle add webrick # Rubyのバージョンが3.0以降の場合に実行します。
> bundle exec jekyll serve

http://localhost:4000 にアクセスする。
以下のようにトップページが表示されます。
サイトのテーマはデフォルトでminimaが使用されています。
「Welcome to Jekyll!」は jekyll new で作られたページです。

6. 変更をコミット・プッシュする

.gitignore を変更する。
GitHub Pagesは Gemfile と Gemfile.lock を見てインストールしません。
そのため、作成された .gitignore に以下の行を追加します。
```
Gemfile
Gemfile.lock
```

コミット・プッシュする。
コマンドプロンプトかPowerShellを開き、以下を実行します。

> cd <リポジトリのディレクトリのパス>
> git add docs/
> git commit -m "Jekyllで作成したサイトを追加"
> git push origin main

7. リポジトリの設定を変更する

リポジトリの設定を変更します。

GitHubにアクセスする。
作成したGitHubリポジトリのページにアクセスする。
「Settings」をクリックする。
「Pages」をクリックする。
「Build and deployment」の「Branch」のルートフォルダを変更する。
「/docs」を選択します。

8. サイトを確認する

公開したサイトを確認します。

GitHubにアクセスする。
作成したGitHubリポジトリのページにアクセスする。
「Settings」をクリックする。
「Pages」をクリックする。
「Visit site」をクリックする。

トップページが確認できます。