GitHub Pages でWebサイトを公開する方法

GitHub Pages を使って静的なHTMLファイルなどをアップロードして公開する方法。ここではアップロードの方法だけに絞って試してみるが、Jekyllなどで作ったサイトを公開する場合も、ローカルでレンダリングされた後のサイトをアップロードするだけなら基本同じ。

前の記事GitHub Pages でのリポジトリの作り方を説明したが、その作業が前提になる。

とりあえずローカルにデモサイトの作業DIRをつくり、中に単純なHTMLファイルを置く。 サイトの名前は、前の記事で作ったリポジトリ名と揃える。

$ mkdir gh-demo
$ cd gh-demo/
$ touch index.html
$ ls
index.html

[~/gh-demo/index.html]

<!DOCTYPE html>
<head>
  <title>My GitHub Website</title>
</head>
<body>
  <h1>My GitHub Website</h1>  
</body>

このローカルの「gh-demo」DIRをgitコマンドで初期化しリポジトリを作成してコミットしておく。

$ git init
Initialized empty Git repository in ~/gh-demo/.git/
$ ls -a
./  ../  .git/  index.html
$ git add .
$ git commit -m "Add a new github demo site."
[master (root-commit) ece0331] Add a new github demo site.
 1 file changed, 7 insertions(+)
 create mode 100644 index.html

GitHub Pages で単に静的なファイルでのサイトを公開するだけなら、masterブランチは使わないということらしい。そこでローカルの設定も masterブランチ を gh-pagesブランチに変更しておく。 (※ 2016年8月から GitHub Pages に機能が追加され、別途ブランチを切る必要が無くなったそうだ。 masterブランチの内容がそのまま GitHub Pages として公開できるのでこの作業は現在は必ずしも必要ない。ただしgh-pagesブランチを切る今までのやり方でも問題はない)

$ git branch -m master gh-pages

ここで設定した gh-pagesブランチを GitHubにあらかじめ作った gh-demoリポジトリ にプッシュする.

$ git remote add origin https://github.com/82pkdick/gh-demo.git
$ git push origin gh-pages
Username for 'https://github.com': 82pkdick
Password for 'https://82pkdick@github.com':  ********
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Delta compression using up to 4 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 300 bytes | 300.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/82pkdick/gh-demo.git
 * [new branch]      gh-pages -> gh-pages

トップのリポジトリ一覧にある gh-demoリポジトリ をクリックして中に入ると、

f:id:pkdick:20190115192502p:plain

gh-pagesブランチ が作られていて、index.htmlがアップロードされている。

f:id:pkdick:20190115192514p:plain

アップロードされたページは、https://82pkdick.github.io/gh-demo/でアクセスできる。アップロード(プッシュ)するときのURLとは違っていて(考えてみれば違っていて当たり前だが)、「ユーザID.github.io/リポジトリ名」で公開サイトにアクセスというのが GitHub Pages のルールのようだ。

(masterブランチが公開できる現在は、上記コマンドのgit push origin gh-pagesは、git push origin masterでよいでしょう。)