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

メモ

Organization 所有者は、organization が所有しているリポジトリからの GitHub Pages サイトの公開を制限できます。詳しくは、「組織の GitHub Pages サイトの公開を管理する」をご覧ください。

前提条件

Jekyll を使用して GitHub Pages サイトを作成する前に、Jekyll と Git をインストールする必要があります。詳細については、Jekyll ドキュメントの「Installation」(インストール) と、「Git のセットアップ」を参照してください。

Bundler を使用して Jekyll をインストールして実行することをお勧めします。 Bundler は、Ruby gem の依存関係を管理し、Jekyll ビルドのエラーを減少させ、環境に関係するバグを防止します。以下はBundlerのインストール手順です。

Ruby をインストールします。詳しくは、Ruby のドキュメントで「Ruby のインストール」を参照してください。
Bundlerをインストールしてください。詳しくは、Bundler のページを参照してください。

ヒント

Bundler を使って Jekyll をインストールしようとすると Ruby エラーが発生する場合は、RVM や Homebrew などのパッケージマネージャーを使って Ruby のインストールを管理することが必要な場合があります。詳しくは、Jekyll のドキュメントでトラブルシューティングに関する説明を参照してください。

サイト用にリポジトリを作成する

リポジトリを作成することも、自分のサイト用の既存のリポジトリを選ぶこともできます。

リポジトリに対して GitHub Pages サイトを作成したい場合、そのリポジトリ内のすべてのファイルがサイトに関連付けられるわけではないのなら、そのサイトに対して公開元を構成することができます。たとえば、サイトソースファイルを保持する専用のブランチとフォルダーを用意することや、カスタムの GitHub Actions ワークフローを使ってサイトソースファイルをビルドして配置することができます。

リポジトリを所有しているアカウントが GitHub Free または Organization 用の GitHub Free を使用している場合、そのリポジトリはパブリックである必要があります。

既存のリポジトリにサイトを作成する場合は、「サイトを作成する」セクションに進んでください。

ページの右上隅でを選択し、 [新しいリポジトリ] をクリックします。
[所有者] ドロップダウンメニューを使い、リポジトリを所有させたいアカウントを選びます。

メモ

マネージドユーザーアカウントは、organization が所有するリポジトリからの GitHub Pages サイトの公開のみを行うことができます。詳しくは、「What is GitHub Pages?」をご覧ください。
リポジトリの名前と、任意で説明を入力してください。ユーザーまたは Organization サイトを作成する場合は、リポジトリに <user>.github.io または <organization>.github.io という名前を付ける必要があります。ユーザーまたは Organization の名前に大文字が含まれている場合は、小文字にする必要があります。詳しくは、「What is GitHub Pages?」をご覧ください。
リポジトリの可視性を選択してください。詳しくは、「リポジトリについて」をご覧ください。

サイトを作成する

サイトを作成する前には、GitHub 上にサイト用のリポジトリがある必要があります。既存のリポジトリにサイトを作成していない場合は、「サイト用にリポジトリを作成する」をご覧ください。

警告

Enterprise で Enterprise Managed Users が使われていない限り、サイトのリポジトリがプライベートまたは内部であっても、GitHub Pages のサイトは既定でインターネット上で一般公開されます。サイトのアクセス制御を管理することで、サイトをプライベートで公開できます。それ以外の場合、サイトのリポジトリにセンシティブなデータがあるなら、公開前にそのデータを取り除くのが良いでしょう。詳細については、「リポジトリについて」および「GitHub Pages サイトの可視性を変更する」を参照してください。

[ターミナル][ターミナル][Git Bash] を開きます。
リポジトリのローカルコピーがまだない場合は、サイトのソースファイルを保存したい場所に移動して、PARENT-FOLDER を、リポジトリのフォルダーを含めるフォルダーで置き換えます。
```
cd PARENT-FOLDER
```

ローカルの Git リポジトリをまだ初期化していない場合は、REPOSITORY-NAME をリポジトリの名前で置き換えて初期化します。

git init REPOSITORY-NAME
> Initialized empty Git repository in /REPOSITORY-NAME/.git/
# Creates a new folder on your computer, initialized as a Git repository

ディレクトリをリポジトリに変更します。
```
cd REPOSITORY-NAME
# Changes the working directory
```
使用する公開ソースを決定します。詳しくは、「GitHub Pages サイトの公開元を設定する」をご覧ください。
サイトの公開ソースにアクセスしてください。詳しくは、「GitHub Pages サイトの公開元を設定する」をご覧ください。たとえば、既定ブランチの docs フォルダーからサイトを公開することを選択した場合は、docs フォルダーを作成して、そこに移動します。
```
mkdir docs
# Creates a new folder called docs
cd docs
```
If you chose to publish your site from the gh-pages branch, create and checkout the gh-pages branch.
```
git checkout --orphan gh-pages
# Creates a new branch, with no history or contents, called gh-pages, and switches to the gh-pages branch
git rm -rf .
# Removes the contents from your default branch from the working directory
```
新しい Jekyll サイトを作成するには、リポジトリのルートディレクトリで jekyll new コマンドを使用します。
```
jekyll new --skip-bundle .
# Creates a Jekyll site in the current directory
```
Jekyll が作成した Gemfile を開きます。
gem "jekyll" で始まる行の先頭に「#」を追加して行をコメントアウトします。
# gem "github-pages" で始まる行を編集して、github-pages gem を追加します。行を次のように変更します。
```
gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins
```
GITHUB-PAGES-VERSION を、サポートされる最新バージョンの github-pages gem で置き換えます。このバージョンは、「依存関係のバージョン」にあります。

正しいバージョンの Jekyll が、github-pages gem の依存関係としてインストールされます。
Gemfile を保存して閉じます。
コマンドラインから bundle install を実行します。
Jekyll が作成した .gitignore ファイルを開き、次の行を追加して gems ロックファイルを無視します。
```
Gemfile.lock
```

必要に応じて、_config.yml ファイルに対して必要な編集を行います。これは、リポジトリがサブディレクトリでホストされている場合に相対パスに対して必要です。詳しくは、「サブフォルダを新規リポジトリに分割する」をご覧ください。

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

必要に応じて、サイトをローカルでテストします。詳細については、「Jekyll を使用して GitHub Pages サイトをローカルでテストする」を参照してください。

作業内容を追加してコミットしてください。

git add .
git commit -m 'Initial GitHub pages site with Jekyll'

リポジトリを GitHub.com にリモートとして追加します。その際に、 USER をリポジトリを所有するアカウントに、およびREPOSITORY をリポジトリの名前に置き換えます。
```
git remote add origin https://github.com/USER/REPOSITORY.git
```
リポジトリを GitHub にプッシュします。BRANCH は実際に作業しているブランチの名前に置き換えてください。
```
git push -u origin BRANCH
```
公開ソースを設定してください。詳しくは、「GitHub Pages サイトの公開元を設定する」をご覧ください。
GitHub で、サイトのリポジトリにアクセスしてください。
リポジトリ名の下にある [設定] をクリックします。 [設定] タブが表示されない場合は、 [] ドロップダウンメニューを選び、 [設定] をクリックします。
サイドバーの [コードと自動化] セクションで、 [ ページ] をクリックします。
必要に応じて、プライベートまたは内部リポジトリからプロジェクトを発行する場合、サイトを表示するか選びます。 [GitHub Pages] で、可視性のドロップダウンメニューを選択し、パブリックまたはプライベートを選択します。

メモ

GitHub Pages サイトをプライベートで公開するには、organization が GitHub Enterprise Cloud を使っている必要があります。 GitHub Enterprise Cloud を無料で試す方法の詳細については、「GitHub Enterprise Cloud の試用版を設定する」を参照してください。
公開されたサイトを表示するには、[GitHub Pages] の下で [ サイトにアクセスする] をクリックします。

メモ

サイトに対する変更は、その変更を GitHub にプッシュしてから公開されるまでに最大 10 分かかることがあります。 GitHub Pages サイトの変更が 1 時間経ってもブラウザーに反映されない場合は、「GitHub PagesサイトのJekyllビルドエラーについて」を参照してください。
GitHub Pages サイトは、GitHub Actions ワークフローでビルドされ、デプロイされます。詳しくは、「ワークフロー実行の履歴を表示する」をご覧ください。

メモ

GitHub Actions はパブリックリポジトリでは無料です。使用料は、無料の時間 (分) の毎月の割り当てを超えるプライベートリポジトリと内部リポジトリに適用されます。詳しくは、「使用制限、支払い、管理」をご覧ください。

メモ

ブランチから公開していて、サイトが自動的に公開されていない場合は、管理者アクセス許可と検証済みのメールアドレスを持つユーザーが公開元にプッシュしていることを確認します。
GITHUB_TOKEN を使う GitHub Actions ワークフローによってプッシュされたコミットでは、GitHub Pages ビルドがトリガーされません。

次のステップ

新しいページまたは投稿をサイトに追加するには、「Jekyll を使用して GitHub Pages サイトにコンテンツを追加する」を参照してください。

JekyllのテーマをGitHub Pagesサイトに追加して、サイトのルックアンドフィールをカスタマイズできます。詳細については、「Jekyll を使用して GitHub Pages サイトにテーマを追加する」を参照してください。

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

この機能を使用できるユーザーについて

Platform navigation

この記事の内容

前提条件

サイト用にリポジトリを作成する

サイトを作成する

次のステップ