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のアカウントを持っている。

サイト作成の流れ

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

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

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

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

2. GitHub Pagesでサイトを作る

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

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

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

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

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

  1. リポジトリのディレクトリに移動する。
    コマンドプロンプトかPowerShellを開き、以下を実行します。
    <リポジトリのディレクトリのパス><リポジトリをクローンするディレクトリのパス>/<リポジトリ名> です。
    > cd <リポジトリのディレクトリのパス>
    
  2. README.md を削除する。
    リポジトリのルートディレクトリに README.md がある場合、README.md を削除します。
    以下を実行します。
    > git rm README.md
    
  3. docs ディレクトリを作成して移動する。
    サイトを作成するディレクトリを作成して移動します。以下を実行します。
    > mkdir docs
    > cd docs
    
  4. Jekyllでサイトを作成する。
    現在のディレクトリ(docs ディレクトリ)にサイトを作成します。以下を実行します。
    > jekyll new --skip-bundle .
    
  5. Gemfile を変更する。
    作成された Gemfile をテキストエディターで以下のように変更します。
    GitHub Pagesを使う場合は github-pages が必要なので、次の行をコメントから戻します。
    gem "github-pages", group: :jekyll_plugins
    

    上記の行に , "~> <github-pagesのバージョン>" を追加します。<github-pagesのバージョン> にはDependency versionsgithub-pages のバージョンを入力します。

    gem "github-pages", "~> <github-pagesのバージョン>", group: :jekyll_plugins
    

    github-pages に含まれるので、jekyll を定義する行をコメントアウトします。

    #gem "jekyll", "~> <jekyllのバージョン>"
    
  6. _config.yml を変更する。
    作成された _config.yml をテキストエディターで変更します。
    以下の項目を確認して変更します。サイトで表示したくない場合は項目ごとコメントアウトします。
項目 説明
title サイトのタイトルを入力します。
description サイトの説明を入力します。
twitter_username Xのアカウント名を入力します。
github_username GitHubのアカウント名を入力します。
  1. gemをインストールする。
    gemをインストールするため、以下を実行します。
    > bundle install
    

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

  1. ローカルでサーバーを立ち上げる。
    コマンドプロンプトかPowerShellを開き、以下を実行します。
    > cd <リポジトリのディレクトリのパス>/docs
    > bundle add webrick # Rubyのバージョンが3.0以降の場合に実行します。
    > bundle exec jekyll serve
    
  2. http://localhost:4000 にアクセスする。
    以下のようにトップページが表示されます。
    サイトのテーマはデフォルトでminimaが使用されています。
    「Welcome to Jekyll!」は jekyll new で作られたページです。
    トップページ

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

  1. .gitignore を変更する。
    GitHub Pagesは GemfileGemfile.lock を見てインストールしません。
    そのため、作成された .gitignore に以下の行を追加します。
    Gemfile
    Gemfile.lock
    
  2. コミット・プッシュする。
    コマンドプロンプトかPowerShellを開き、以下を実行します。
    > cd <リポジトリのディレクトリのパス>
    > git add docs/
    > git commit -m "Jekyllで作成したサイトを追加"
    > git push origin main
    

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

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

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

8. サイトを確認する

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

  1. GitHubにアクセスする。
  2. 作成したGitHubリポジトリのページにアクセスする。
    GitHubリポジトリのページにアクセスするリンク
  3. 「Settings」をクリックする。
    Settingボタン
  4. 「Pages」をクリックする。
    Pagesボタン
  5. 「Visit site」をクリックする。
    Visit siteボタン
    トップページが確認できます。
    トップページ