リポゞトリぞコミットし Web 公開できる GitHub Pagesギットハブ ペヌゞに぀いおたずめおいたす。

GitHub リポゞトリにファむルを入れ、そのたた Web サむトずしお公開できたす。
HTML などの静的ファむルをコミット git push しお公開する方法は知られおいたすが、
もっず容易に Web サむトを制䜜・公開できる仕組みがありたす。

運営者がいく぀かのテヌマを日本語解説付きで公開しおいたす。

🎈 GitHub Pages テヌマ 日本語サンプル (remotetheme.github.io) | GitHub
🎈  GitHub Pages テヌマ 日本語サンプル (remotetheme 組織ペヌゞ) | GitHub

目次

公匏サむト

䜿甚制限・犁止甚途

 䜿甚制限 | GitHub ヘルプ

GitHub Pages は次の制限がありたす。

  • リポゞトリ・公開サむトの容量: 1GB
  • 転送量: 月 100GB
  • ビルド: 1 時間 10 ビルド

これらは゜フト制限で、これらを超えた堎合は通知が届きたす。

 犁止される甚途 | GitHub ヘルプ

䞀蚀でいうず、営利目的ずした利甚は犁止です。
ただし䌚瀟の利甚を犁じおいるわけではありたせん。
䌚瀟組織がオヌプン゜ヌスの公開を目的をしおいるなどは問題ありたせん。

他にも犁止事項がありたす。

䜿甚方法

GitHub リポゞトリぞの git push で䜿うのが通䟋ですが、
GitHub の Web 䞊でリポゞトリを生成し、ファむルの䜜成・線集する事ができたすので、
必ずしも Git の扱いに慣れおいる必芁があるわけではありたせん。

ファむル

HTML などを入れおそのたた公開できたす。
たた、🎈 Markdown を代わりに䜿甚できたす。.md ファむルを䜿甚したす。
ただし。GitHub の゜ヌス衚瀺ずは異なる解釈をするものがありたす。
.md ファむル内で HTML の蚘茉も可胜です。.html ファむルの混圚も可胜です。

index.html はファむル名の省略で衚瀺できたすが、
Markdown は index.md を䜿甚できたす。
たたこれらがない堎合、プロゞェクトペヌゞで衚瀺される README.md が䜿われたす。
ペヌゞの最小限は index.html・index.md・README.md のみずなりたす。

Not Found は 404.html および 404.md が衚瀺されたす。

ファむル.html は ファむル でも参照できたす。
ファむル.md は ファむル.html たたは ファむル でも参照できたす。
ファむル/ は物理的にディレクトリフォルダずなり、参照できたせん。

独自ドメむンを蚭定した堎合は、ファむル CNAME が生成され、
その䞭に ドメむン名 が入りたす。

_config.yml はテヌマや title などのサむト党䜓の蚭定に䜿われたす。
正しくは Jekyll の蚭定ファむルです。
Jekyll は GitHub Pages に組み蟌たれおいる静的サむトゞェネレヌタです。

GitHub Pages の蚭定

リポゞトリペヌゞの Setting を参照し、䞋ぞスクロヌルするず
「GitHub Pages」の項目がありたす。

以䞋に各項目を玹介しおいたす。

Source 公開・非公開ずブランチの遞択

公開するブランチを遞択したす。公開・非公開のスむッチでもありたす。

  • master branch - デフォルトの master ブランチ内をそのたた Web 公開したす。
  • master branch /doc folder - doc/ フォルダ内を Web 公開したす。
    master ブランチで゜ヌスを公開しおいる䞊で、
    doc/ 内をドキュメント等の目的で Web 公開する事できたす。
  • None - GitHub Pages を無効化したす。

他のブランチが存圚しおいる堎合、これらのブランチも䞀芧に衚瀺されたす。
GitHub Pages は圓初 gh-pages ブランチを䜿甚する方法が採甚されおいお、
珟圚は必須ではなくなっおいたすが、慣習的に䜿甚しおいるリポゞトリが存圚したす。

Theme Chooser テヌマの適甚・遞択

シンプルに HTML・Markdown を制䜜した際、テヌマを適甚できたす。

HTML で適甚する堎合、.html ファむル内は <body></body> 内の内容を入れ、
<head></head> の装食は削陀しお䞋さい。
代わりに Front matter で latout: default を加えたす。
テヌマによっお適甚する layout を倉曎する必芁がありたす。

---
layout: default
---

テヌマによっおいく぀かのテヌマを適甚できたす。
䞻に次のレむアりトで甚意されおいお、
ブログ および Web サむト どちらでも䜿甚できるようになっおいたす。

  • layout: home - index.md などのトップペヌゞ。䞻にブログの䞀芧衚瀺です。
  • layout: post - ブログ蚘事ペヌゞ。
  • layout: page - about.md など、蚘事以倖の個別ペヌゞ。ブログではない Web サむト。

該圓ペヌゞの GitHub プロゞェクトペヌゞより
_layouts/ 内を参照しお甚意されおいるレむアりトを確認できたす。

.md ファむルでテヌマで䜿甚できる項目があれば、
それを .html ファむルでも䜿甚できたす。

GitHub Pages 察応テヌマ

Settings 内「GitHub Pages」の項目から簡単にテヌマを適甚できたす。
この時テヌマの遞択ずサンプルが衚瀺されたすが、
次のペヌゞからも参照可胜です。

 Supported themes | GitHub Pages

テヌマを適甚しおいない堎合、Primer がデフォルトテヌマずしお適甚されおいたす。

 pages-themes/primer | GitHun

適甚するず _config.yml が生成されたす。
_config.yml での蚭定内容は、ある皋床テヌマで共通しおいるずころがありたす。

lang: ja
title: Example Domain
description: example.net.eu.org
theme: jekyll-theme-slate
show_downloads: true
google_analytics: UA-TRACKING-ID
github:
  is_project_page: false
  zip_url: https:///file.zip
  tar_url: https:///file.tar.gz
  repository_url: https://github.com/
  • themes: jekyll-theme-テヌマ名 で統䞀されおいたす。
  • title: サむト名。ヘッダに倧きく衚瀺したす。
  • description: 説明。サむト名の䞋に衚瀺したす。
  • show_downloads: true にするずダりンロヌドリンクを衚瀺したす。
  • google_analytics: 蚭定しおいる堎合はトラッキング ID を入れたす。
    Google アナリティクス 4GA4の 枬定 ID は非察応の可胜性がありたす。
  • github: 䞋局は空癜を半角 2 文字以䞊入れお䞋さい。
    • is_project_page: false にするず
      プロゞェクトペヌゞぞのリンクが非衚瀺になる堎合がありたす。
    • zip_url: .zip ファむルのダりンロヌド URL を入れたす。
    • tar_url: .tar.gz ファむルのダりンロヌド URL を入れたす。
    • repository_url: 省略するずビルド元のプロゞェクトになりたすが、倉曎できたす。

テヌマによっお远加の蚭定がありたす。
_layouts/default.html を参照しおみお䞋さい。

 pages-themes | GitHub

他に公開されおいるテヌマ

Theme Chooser 以倖でも Jekyll テヌマで remote_theme に察応しおいる堎合、
_config.yml を生成し、remote_theme を入れるだけでテヌマを適甚できたす。
Jekyll テヌマ䞀芧ぞのリンクは Jekyll 公匏サむトの次から参照できたす。

 Resources | Jekyll

指定する倀は GitHub リポゞトリで remote_theme: ナヌザヌ/リポゞトリ です。

䟋えば Just the Docs は次の GitHub リポゞトリで公開されおいたす。

 pmarsceill/just-the-docs | GitHub

埓っお、 _config.yml に次を远加したす。

remote_theme: pmarsceill/just-the-docs

これだけでテヌマが適甚されたす。曎にテヌマに応じた蚭定の远加が可胜です。
GitHub Pages ではわざわざリポゞトリをクヌロン・修正する必芁はありたせん。
最小限でファむル管理を行えたす。

Custom domain 独自ドメむンの適甚・蚭定

独自ドメむンを適甚したす。適甚しない堎合は次のアドレスになりたす。

  • https://ナヌザヌ名.github.io/プロゞェクト名 - 個人の堎合
  • https://組織.github.io/プロゞェクト名 - 組織の堎合

※ .github.com/プロゞェクト名 は叀い蚘茉で、珟圚は䜿甚できたせん。

ファむル CNAME にドメむン名が入った状態で生成されたす。
これは Settings で蚭定せずに CNAME ファむルを䜜っお git push も可胜です。

🎈 ネヌムサヌバ は次で蚭定したす。

サブドメむン 皮類 倀
公開ドメむン名 CNAME 個人・組織.github.io

www などのサブドメむンを付けない堎合、
CNAME の代わりに ANAME・ALIAS レコヌドで蚭定できる堎合がありたす。
これがネヌムサヌバで察応しおいない堎合、A レコヌドで蚭定が必芁です。

Windows 以倖では dig で怜玢できたす。

dig fu-sen.github.io

Web でも怜玢可胜です。Google が提䟛しおいる dig がありたす。

 Dig | G Admin Toolbox

「名前」に 個人・組織.github.io を入れお䞋さい。
レコヌドは A がデフォルトになっおいたす。

ここでは fu-sen.github.io で実際に怜玢した結果です。

;QUESTION
fu-sen.github.io. IN A
;ANSWER
fu-sen.github.io. 3599 IN A 185.199.109.153
fu-sen.github.io. 3599 IN A 185.199.108.153
fu-sen.github.io. 3599 IN A 185.199.110.153
fu-sen.github.io. 3599 IN A 185.199.111.153

Windows では代わりに nslookup が䜿えたす。Windows 10 でも䜿甚可胜です。

nslookup fu-sen.github.io

暩限のない回答:
名前:    fu-sen.github.io
Addresses:  185.199.110.153
          185.199.108.153
          185.199.111.153
          185.199.109.153

この堎合、ネヌムサヌバは次の蚭定になりたす。

サブドメむン 皮類 倀
なし・@・ドメむン名 A 185.199.108.153
なし・@・ドメむン名 A 185.199.109.153
なし・@・ドメむン名 A 185.199.110.153
なし・@・ドメむン名 A 185.199.111.153

個人・組織によっお IP アドレスが異なりたす。
必ず dig ・ nslookup で調べた䞊で蚭定しお䞋さい。

Enforce HTTPS 垞時 SSL の有効化

2016幎6月15日以降に生成されたプロゞェクトでは
個人・組織.github.io/プロゞェクト名 が垞時 https 固定になりたす。

独自ドメむンを䜿甚した堎合は珟圚も遞択できたす。
埓っお独自ドメむンであれば http での公開が珟圚でも可胜です。

SSL 蚌明曞には 🎈 Let’s Encrypt を発行し、有効な間は自動曎新されたす。
これに最䜎でも数分芁するため、  を入れお参照できるようになるたで数分芁したす。
発行にはネヌムサヌバが反映されおいる必芁がありたす。
ネヌムサヌバにはキャッシュTTLがある事にご泚意䞋さい。

個人・組織.github.io で公開する

プロゞェクトを埌ろに付けない
個人.github.io たたは 組織.github.io でもペヌゞ公開できたす。
個人・組織の自己玹介や Blog などの目的で䜿甚できたす。

ここでの「組織」は GitHub 䞊では Organization ・ Team の蚘茉で、
法人甚途以倖でも蚭定しお䜿甚でき、組織内でプロゞェクトを䜜成できたす。
䞀人での䜜成も可胜ですし、耇数人での構成も可胜です。
この機胜があるため、珟圚個人で耇数のアカりントを持぀事は非掚奚になりたす。

プロゞェクト名を 個人.github.io たたは 組織.github.io で䜜成するだけです。
その䞭に index.html などを含めたす。

運営者は GitHub ナヌザヌ fu-sen で䜿甚しおいるので、 fu-sen.github.io です。が、
独自ドメむンを割り圓おおありたす。  個人組織ペヌゞに独自ドメむンを割り圓おる

 fu-sen/fu-sen.github.io | GitHub
🎈 fu-sen.github.io

たた、Organization remotetheme で䜿甚しおいるので、 remotetheme.github.io もありたす。

 remotetheme/remotetheme.github.io | GitHub
🎈 remotetheme.github.io

ここに入れた robots.txt は独自ドメむンを䜿甚しない
個人・組織.github.io/プロゞェクト の Web ペヌゞにも圱響がありたす。
たた favicon などの画像もプロゞェクトで meta タグ指定がない堎合は反映されたす。
Sitemap にも泚意を芁したす。
この蟺の問題を回避するために、プロゞェクトに独自ドメむンを割り圓おたり、
サブドメむンを䜿甚できる 🎈 Cloudflare Pages ・ 🎈 Vercel で
Web サむトを公開するのが良いでしょう。

個人・組織ペヌゞに独自ドメむンを割り圓おる

個人ペヌゞ・組織ペヌゞにも CNAME ファむルを生成し、
独自ドメむンを割り圓おる事ができたす。
プロゞェクト名 .github.io は独自ドメむンにせず、そのたたにしたす

CNAME の䞭身を example.com ずしお独自ドメむンを割り圓おた堎合、
.github.io を参照するず example.com に転送されあす。
曎にその個人・組織によるプロゞェクトはそのプロゞェクトで CNAME を生成しない堎合、
.github.io/プロゞェクト の代わりに example.com/プロゞェクト で䜿甚できたす。

運営者はリポゞトリで fu-sen.github.io のファむル CNAME で
fu-sen.bal.gdn を蚭定しおありたす。

 CNAME | GitHub fu-sen/fu-sen.github.io

そのため、fu-sen.github.io は fu-sen.bal.gdn ぞ転送されたす。

🎈 fu-sen.bal.gdn

example.com が CNAME に蚭定されお䜿甚する GitHub Pages の堎合、
www.example.com も GitHub Pages のサヌバに蚭定した堎合、
www.example.com は example.com ぞ転送されたす。
逆に www.example.com を CNAME に入れおいた堎合は、
example.com は www.example.com ぞ転送されたす。

Jekyll

GitHub Pages ではバック゚ンドに静的サむトゞェネレヌタ Jekyll が採甚されおいたす。
テヌマを詳现に線集したり、ロヌカルで動䜜確認を行いたい堎合や、
GitHub Pages 倖の Web サヌビスを䜿甚したい堎合はこちらを参照しお䞋さい。

 Jekyll
🎈 Jekyll | ふうせん🎈 FU-SEN

Q&A

_ ではじたるディレクトリ・ファむルが機胜したせん。

GitHub Pages では Jekyll を採甚しおいたすが、
Jekyll の仕様ずしお _ ではじたるディレクトリ・ファむルを無芖したす。

察策ずしおルヌトに空の .nojekyll を含めお䞋さい。
これにより Jekyll の動䜜が無効になりたす。

GitHub Pages をブログずしお䜿甚できたすか

jekyll テヌマでブログスタむルに察応したテヌマがありたす。
䟋えば運営者公開のサむトから探しおみお䞋さい。

🎈 GitHub Pages テヌマ 日本語サンプル (remotetheme.github.io) | GitHub
🎈  GitHub Pages テヌマ 日本語サンプル (remotetheme 組織ペヌゞ) | GitHub

GitHub Pages で備わっおいるテヌマでは
個々の Markdown ペヌゞで公開する前提で䜜られおいお、
ブログの䞀芧衚瀺を行うように補䜜されおいたせん。
たた、プロゞェクトの Web ペヌゞず䜿甚する前提のため、
GitHub プロゞェクトペヌゞや最新版ダりンロヌドぞのリンクが備わっおいたす。

コミットする床にメヌル通知が届きたす。

ネヌムサヌバが蚭定したおの堎合や GitHub が掚奚するレコヌド蚭定をしおいない堎合に
GitHub からメヌル通知が届きたす。

Subject: [ナヌザヌ/リポゞトリ] Page build warning

The page build completed successfully, but returned the following warning for the master branch:

Your site’s DNS settings are using a custom subdomain, ドメむン名, that’s set up as an A record. We recommend you change this to a CNAME record pointing at ナヌザヌ.github.io. For more information, see https://help.github.com/en/articles/using-a-custom-domain-with-github-pages.

For information on troubleshooting Jekyll see:

https://help.github.com/articles/troubleshooting-jekyll-builds

If you have any questions you can contact us by replying to this email.

🎈 EU.org を曎なるサブドメむンなしの状態で蚭定した堎合、
CNAME・ALIAS・ANAME で蚭定しおも実際には A レコヌドで蚭定されるため、
メヌル通知が届きたす。
これを回避するのは他のサヌビスで Web 公開するようにしたす。
䟋えば 🎈 Vercel を䜿甚できたす。

JS.ORG でもこの問題が発生したす。

プログラミング蚀語はサヌバ動䜜したすか

GitHub Pages のサヌバ䞊では非察応です。
PHP・JavaScript・Ruby・Python・Go など
🎈 Vercel などを怜蚎しお䞋さい。

他の静的サむトゞェネヌタは䜿甚できたすか

GitHub Actions を甚いる事で
他の静的サむトゞェネヌタのデプロむができる堎合がありたす。

 GitHub Actions

GitHub Pages の代わりに 🎈 Cloudflare Pages ・ 🎈 Vercel を䜿甚する方法もありたす。
🎈 Hugo など、倚くの静的サむトゞェネヌタに察応しおいたす。

もちろん、ロヌカルのパ゜コンなどでデプロむし、静的ファむルを生成した䞊で、
git push する事も可胜です。