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

前提条件

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

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

1. Ruby をインストールします。 詳細については、Ruby ドキュメントの「Installing Ruby」 (Ruby のインストール) を参照してください。
2. Bundlerをインストールしてください。 詳細については、「Bundler」を参照してください。

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

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

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

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

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

1. ページの右上隅で、[] ドロップダウン メニューを使用して、 [新しいリポジトリ] を選択します。 1. [所有者] ドロップダウン メニューを使い、リポジトリを所有させたいアカウントを選択します。
   注: managed user account は、組織が所有するリポジトリからの GitHub Pages サイトの発行のみを行うことができます。 詳細については、「GitHub Pages について」を参照してください。
   1. リポジトリの名前と、任意で説明を入力してください。 ユーザーまたは Organization サイトを作成する場合は、リポジトリに `.github.io` または `.github.io` という名前を付ける必要があります。 ユーザーまたは Organization の名前に大文字が含まれている場合は、小文字にする必要があります。 詳細については、「[GitHub Pages について](/articles/about-github-pages#types-of-github-pages-sites)」を参照してください。  1. リポジトリの可視性を選択してください。 詳細については、[リポジトリ](/repositories/creating-and-managing-repositories/about-repositories#about-repository-visibility)に関する説明を参照してください。 

サイトを作成する

サイトを作成する前には、GitHub Enterprise Cloud上にサイトのためのリポジトリを持っていなければなりません。 既存のリポジトリにサイトを作成していない場合は、「サイト用にリポジトリを作成する」を参照してください。

1. [ターミナル][ターミナル][Git Bash] を開きます。

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

   $ cd PARENT-FOLDER

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

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

4. ディレクトリをリポジトリに変更します。

   $ cd REPOSITORY-NAME
   # Changes the working directory

5. 使用する公開ソースを決定します。 詳細については、「ご利用の GitHub Pages サイトに合わせた公開元の構成」を参照してください。 1. サイトの公開ソースにアクセスしてください。 詳細については、「ご利用の GitHub Pages サイトに合わせた公開元の構成」を参照してください。 たとえば、既定ブランチの docs フォルダーからサイトを公開することを選択した場合は、docs フォルダーを作成して、そこに移動します。

   $ mkdir docs
   # Creates a new folder called docs
   $ cd docs

   gh-pages ブランチからサイトを公開することを選択した場合は、gh-pages ブランチをチェックアウトします。

   $ 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

6. 新しい Jekyll サイトを作成するには、jekyll new コマンドを使用します。

   $ jekyll new --skip-bundle .
   # Creates a Jekyll site in the current directory

7. Jekyll が作成した Gemfile を開きます。

8. gem "jekyll" で始まる行の先頭に「#」を追加して行をコメントアウトします。

9. # 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 の依存関係としてインストールされます。

10. Gemfile を保存して閉じます。

11. コマンド ラインから bundle install を実行します。

12. 必要に応じて、_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
    

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

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

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

15. リポジトリを GitHub.com にリモートとして追加します。その際に、USER をリポジトリを所有するアカウントに、REPOSITORY をリポジトリの名前に置き換えます。

    $ git remote add origin https://github.com/USER/REPOSITORY.git
    

16. リポジトリを GitHub Enterprise Cloud にプッシュします。BRANCH を作業対象のブランチの名前で置き換えます。

    $ git push -u origin BRANCH

17. 公開ソースを設定してください。 詳細については、「GitHub Pages サイトの公開元を設定する」を参照してください。 1. GitHub Enterprise Cloudで、サイトのリポジトリにアクセスしてください。 1. リポジトリ名の下の [ 設定] をクリックします。

18. サイドバーの [コードと自動化] セクションで、 [ ページ] をクリックします。

19. 必要に応じて、プライベートまたは内部リポジトリからプロジェクトを発行する場合、サイトを表示するか選びます。 [GitHub Pages] の下で、 [GitHub Pages の可視性] ドロップ ダウン メニューを選択してから、可視性をクリックします。 詳細については、「GitHub Pages サイトの可視性の変更」を参照してください。

      <div class="extended-markdown note border rounded-1 mb-4 p-3 color-border-accent-emphasis color-bg-accent f5">
    

    注: GitHub Pages サイトをプライベートで公開するには、組織で GitHub Enterprise Cloud を使用する必要があります。 GitHub Enterprise Cloud を無料で試す方法の詳細については、「GitHub Enterprise Cloud の試用版を設定する」を参照してください。

    1. 公開されたサイトを表示するには、"GitHub Pages" の下で **[ サイトにアクセスする]** をクリックします。 ![公開されたサイトの URL の横にある [サイトにアクセスする] ボタンのスクリーンショット](/assets/images/help/pages/click-pages-url-to-preview.png)

    注: サイトに対する変更は、その変更を GitHub Enterprise Cloud にプッシュしてから公開されるまでに、最大 10 分かかることがあります。 GitHub Pages サイトの変更が 1 時間経ってもブラウザーに反映されない場合は、「GitHub Pages サイトの Jekyll ビルド エラーについて」を参照してください。

20. GitHub Pages サイトは、GitHub Actions ワークフローでビルドされ、デプロイされます。 詳細については、「ワークフロー実行の履歴を表示する」を参照してください。

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

次の手順

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

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