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. [所有者] ドロップダウン メニューを使い、リポジトリを所有させたいアカウントを選びます。

   注: マネージド ユーザー アカウント は、組織が所有するリポジトリからの GitHub Pages サイトの発行のみを行うことができます。 詳しくは、「GitHub Pages について」を参照してください。

   1. リポジトリの名前と、任意で説明を入力してください。 ユーザーまたは Organization サイトを作成する場合は、リポジトリに `.github.io` または `.github.io` という名前を付ける必要があります。 ユーザーまたは Organization の名前に大文字が含まれている場合は、小文字にする必要があります。 詳しくは、「[AUTOTITLE](/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites)」を参照してください。  1. リポジトリの可視性を選択してください。 詳しくは、「[AUTOTITLE](/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 サイトの可視性を変更する」を参照してください。

      <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] の下で **[ サイトにアクセスする]** をクリックします。 ![GitHub Pages の確認メッセージのスクリーンショット。サイトの URL が一覧表示されています。 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 サイトにテーマを追加する」をご覧ください。