Skip to main content

Jekyll を使用して GitHub Pages サイトにコンテンツを追加する

GitHub Pages の Jekyll サイトに、新規ページや投稿を追加できます。

GitHub Pages は GitHub AE の内部およびプライベート リポジトリで利用できます。 GitHub Pagesは、GitHub Free及びOrganizationのGitHub Freeのパブリックリポジトリ、GitHub Pro、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Serverのパブリック及びプライベートリポジトリで利用できます。

リポジトリへの書き込み権限があるユーザは、Jekyll を使用して GitHub Pages サイトにコンテンツを追加できます。

Jekyll サイトのコンテンツについて

GitHub Pages で Jekyll サイトにコンテンツを追加する前に、Jekyll サイトを作成する必要があります。 詳細については、「Jekyll で GitHub Pages サイトを作成する」を参照してください。

Jekyll サイトのコンテンツとして 2 つの主なタイプは、ページと投稿です。 ページとは、特定の日付に紐付けられていない、「About」ページなどの独立したコンテンツです。 既定の Jekyll サイトには、YOUR-SITE-URL/about のご自分のサイトでページとしてレンダリングされる about.md というファイルが含まれています。 このファイルのコンテンツを編集して、「About」ページをパーソナライズできます。また、新しいページを作成するため、「About」ページをテンプレートとして使用できます。 詳細については、Jekyll のドキュメントの「Pages」(ページ) を参照してください。

投稿とは、ブログ記事のことです。 デフォルトの Jekyll サイトには、既定の投稿ファイルがある、_posts という名前のディレクトリが含まれています。 この投稿のコンテンツを編集し、デフォルト投稿を、新規投稿を作成するためのテンプレートとして使用できます。 詳細については、Jekyll のドキュメントの「Posts」(投稿) を参照してください。

テーマには、デフォルトのレイアウト、およびサイトの新規ページや新規投稿に自動的に適用されるスタイルシートが含まれますが、これらのデフォルト設定はオーバーライドできます。 詳細については、「GitHub Pages と Jekyll について」を参照してください。

サイト上のページやポストに対してタイトルやレイアウトといった変数やメタデータを設定するには、任意のMarkdownあるいはHTMLファイルの先頭にYAMLフロントマターを追加できます。 詳しくは、Jekyll のドキュメントの「フロント マター」をご覧ください。

変更 は、それが該当するサイトの公開元にマージされると、自動的に公開されます。 まず変更をプレビューしたいなら、GitHub AE 上ではなくローカルで変更を行うことができます。 そしてサイトをローカルでテストしてください。 詳細については、「Jekyll を使用して GitHub Pages サイトをローカルでテストする」を参照してください。

新規ページをサイトに追加する

  1. GitHub AEで、サイトのリポジトリにアクセスしてください。 1. サイトの公開ソースにアクセスしてください。 詳細については、「ご利用の GitHub Pages サイトに合わせた公開元の構成」を参照してください。
  2. 公開元のルートに、ご自分のページ用の PAGE NAME.md という名前の新規ファイルを作成します。PAGE-NAME は、ページを示す意味のあるファイル名に置き換えます。
  3. 以下の YAML frontmatter を、ファイルの先頭に追加します。PAGE TITLE はページのタイトルに、URL-PATH はページの URL として指定するパスに置き換えます。 たとえば、サイトのベース URL が https://octocat.github.ioURL-PATH/about/contact/ である場合、ページは https://octocat.github.io/about/contact に配置されます。
    layout: page
    title: "PAGE TITLE"
    permalink: /URL-PATH/
  4. frontmatter の下に、ページのコンテンツを追加します。
  5. ページの下部で、ファイルに対して行った変更を説明する短く分かりやすいコミットメッセージを入力してください。 コミットメッセージでは、複数の作者にコミットを関連づけることができます。 詳細については、「複数の共同作成者とのコミットの作成」を参照してください。 変更のコミット メッセージ 1. コミットメッセージフィールドの下で、コミットの追加先を現在のブランチか新しいブランチから選択してください。 現在のブランチがデフォルトブランチなら、コミット用に新しいブランチを作成してからPull Requestを作成すべきです。 詳細については、「新しい pull request の作成」を参照してください。 コミット ブランチのオプション 1. [ファイルの変更の提案] をクリックします。 [ファイルの変更の提案] ボタン 1. 提案した変更に対するPull Requestを作成してください。
  6. "Pull Requests"リスト内で、マージしたいPull Requestをクリックしてください。 1. [pull request のマージ] をクリックします。 詳細については、pull request のマージに関するページを参照してください。 1. 要求されたら、コミットメッセージを入力するか、デフォルトのメッセージのままにします。 Commit messageフィールド 1. [マージの確認] をクリックします。 1. あるいは、ブランチを削除してください。 詳細については、「リポジトリ内でブランチを作成および削除する」を参照してください。

新規投稿をサイトに追加する

  1. GitHub AEで、サイトのリポジトリにアクセスしてください。 1. サイトの公開ソースにアクセスしてください。 詳細については、「ご利用の GitHub Pages サイトに合わせた公開元の構成」を参照してください。
  2. _posts ディレクトリに移動します。
  3. YYYY-MM-DD-NAME-OF-POST.md という名前の新しいファイルを作成し、YYYY-MM-DD をご自分が投稿する日付に置き換え、NAME-OF-POST を投稿の名前に置き換えます。
  4. 以下の YAML frontmatter を、ファイルの先頭に追加して、POST TITLE は投稿のタイトルに、YYYY-MM-DD hh:mm:ss -0000 は投稿の日時に置き換え、CATEGORY-1CATEGORY-2 を投稿するカテゴリの数に合わせて置き換えてください。
    layout: post
    title: "POST TITLE"
    date: YYYY-MM-DD hh:mm:ss -0000
    categories: CATEGORY-1 CATEGORY-2
  5. frontmatter の下に、投稿のコンテンツを追加します。
  6. ページの下部で、ファイルに対して行った変更を説明する短く分かりやすいコミットメッセージを入力してください。 コミットメッセージでは、複数の作者にコミットを関連づけることができます。 詳細については、「複数の共同作成者とのコミットの作成」を参照してください。 変更のコミット メッセージ 1. コミットメッセージフィールドの下で、コミットの追加先を現在のブランチか新しいブランチから選択してください。 現在のブランチがデフォルトブランチなら、コミット用に新しいブランチを作成してからPull Requestを作成すべきです。 詳細については、「新しい pull request の作成」を参照してください。 コミット ブランチのオプション 1. [ファイルの変更の提案] をクリックします。 [ファイルの変更の提案] ボタン 1. 提案した変更に対するPull Requestを作成してください。
  7. "Pull Requests"リスト内で、マージしたいPull Requestをクリックしてください。 1. [pull request のマージ] をクリックします。 詳細については、pull request のマージに関するページを参照してください。 1. 要求されたら、コミットメッセージを入力するか、デフォルトのメッセージのままにします。 Commit messageフィールド 1. [マージの確認] をクリックします。 1. あるいは、ブランチを削除してください。 詳細については、「リポジトリ内でブランチを作成および削除する」を参照してください。

あなたの投稿がサイトにアップされているはずです。 ご自分のベース URL がhttps://octocat.github.io の場合は新しい投稿の場所は https://octocat.github.io/YYYY/MM/DD/TITLE.html になります。

次のステップ

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