Jekyllを使用して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」をクリックする。
トップページが確認できます。