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リポジトリ をクリックして中に入ると、
gh-pagesブランチ が作られていて、index.html
がアップロードされている。
アップロードされたページは、https://82pkdick.github.io/gh-demo/
でアクセスできる。アップロード(プッシュ)するときのURLとは違っていて(考えてみれば違っていて当たり前だが)、「ユーザID.github.io/リポジトリ名」で公開サイトにアクセスというのが GitHub Pages のルールのようだ。
(masterブランチが公開できる現在は、上記コマンドのgit push origin gh-pages
は、git push origin master
でよいでしょう。)