Skip to main content

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

新規または既存のリポジトリ内に、GitHub Pages Jekyll を使用してサイトを作成できます。

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

People with admin permissions for a repository can create a GitHub Pages site with Jekyll.

{data variables.product.prodname_pages %}は、パブリック・リポジトリのGitHub Freeと組織用のGitHub Free、パブリック・リポジトリとプライベート・リポジトリの、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Serverで利用できます。 詳しくは、「GitHub のプラン」をご覧ください。

Platform navigation

注: Organization の所有者は、Organization が所有しているリポジトリからの GitHub Pages サイトの公開を制限できます。 詳しくは、「組織の 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」を参照してください。

ヒント: Bundler を使用して Jekyll をインストールしようとしたときに Ruby エラーが表示された場合は、RVMHomebrew などのパッケージ マネージャーを使用して Ruby のインストールを管理することが必要になる場合があります。 詳細については、Jekyll ドキュメントのトラブルシューティングを参照してください。

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

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

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

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

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

  1. ページの右上隅で を選択し、 [新しいリポジトリ] をクリックします。

    新しいアイテムを作成するオプションを示す GitHub ドロップダウン メニューのスクリーンショット。 [新しいリポジトリ] というメニュー項目が濃いオレンジ色の枠線で囲まれています。

  2. [所有者] ドロップダウン メニューを使い、リポジトリを所有させたいアカウントを選びます。 新しい GitHub リポジトリの所有者メニューのスクリーンショット。 メニューには、octocat と github の 2 つのオプションが表示されます。

  3. リポジトリの名前と、任意で説明を入力してください。 ユーザーまたは Organization サイトを作成する場合は、リポジトリに <user>.github.io または <organization>.github.io という名前を付ける必要があります。 ユーザーまたは Organization の名前に大文字が含まれている場合は、小文字にする必要があります。 詳しくは、「GitHub Pages について」を参照してください。 リポジトリの GitHub Pages 設定のスクリーンショット。 リポジトリ名フィールドにはテキスト "octocat.github.io" が含まれており、濃いオレンジ色の枠線で囲まれています。

  4. リポジトリの可視性を選択してください。 詳しくは、「リポジトリについて」を参照してください。

サイトを作成する

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

警告: GitHub Pages サイトは、そのリポジトリがプライベートであってもインターネットからのアクセスに対して公開されます。 サイトのリポジトリにセンシティブなデータがあるなら、公開前にそのデータを取り除くのが良いでしょう。 詳しくは、「リポジトリについて」を参照してください。

  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 サイトの公開元を設定する」を参照してください。

  6. サイトの公開ソースにアクセスしてください。 詳しくは、「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
    
  7. 新しい Jekyll サイトを作成するには、jekyll new コマンドを使用します。

    $ jekyll new --skip-bundle .
    # Creates a Jekyll site in the current directory
    
  8. Jekyll が作成した Gemfile を開きます。

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

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

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

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

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

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

    git add .
    git commit -m 'Initial GitHub pages site with Jekyll'
    
  16. リポジトリを GitHub.com にリモートとして追加します。その際に、 USER をリポジトリを所有するアカウントに、およびREPOSITORY をリポジトリの名前に置き換えます。

    
    $ git remote add origin https://github.com/USER/REPOSITORY.git
    
    
  17. リポジトリを GitHub にプッシュします。BRANCH を作業対象のブランチの名前で置き換えます。

    git push -u origin BRANCH
    
  18. 公開ソースを設定してください。 詳しくは、「GitHub Pages サイトの公開元を設定する」を参照してください。

  19. GitHubで、サイトのリポジトリにアクセスしてください。

  20. リポジトリ名の下にある [設定] をクリックします。 [設定] タブが表示されない場合は、 [] ドロップダウン メニューを選び、 [設定] をクリックします。

    タブを示すリポジトリ ヘッダーのスクリーンショット。 [設定] タブが濃いオレンジ色の枠線で強調表示されています。

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

  22. 公開されたサイトを表示するには、[GitHub Pages] の下で [ サイトにアクセスする] をクリックします。 GitHub Pages の確認メッセージのスクリーンショット。サイトの URL が一覧表示されています。 URL の右側で、[サイトにアクセスする] というラベルの付いたボタンが濃いオレンジ色の枠線で囲まれています。

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

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

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

:

  • ブランチから公開しようとしていて、サイトが自動的に公開されていない場合は、管理者アクセス許可と検証済みの電子メール アドレスを持つユーザーが公開ソースにプッシュしていることを確認してください。

  • GITHUB_TOKEN を使う GitHub Actions ワークフローによってプッシュされたコミットでは、GitHub Pages ビルドがトリガーされません。

次の手順

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

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