GitHub Pages を作る : プロジェクトサイト編

前回の記事に引き続き、今回は GitHub Pages のプロジェクトサイトを作る。

プロジェクトサイトもユーザサイトと同様、GitHub Pages として機能するが、生成される URL と使用するブランチ名が異なる。URL はプロジェクトサイトの配下、https://【ユーザ ID】.github.io/【リポジトリ名】/ となり、使用するブランチは gh-pages というブランチになる。

ちなみに、今回の手順で作成したプロジェクトサイトのサンプルはコチラ → Dot Install Ruby - Neo's GitHub Pages (https://neos21.github.io/practice-dot-install-ruby/) (現在は削除)

手順

  1. 適当なリポジトリを作る (既存のリポジトリを使用する場合は 2. へ進む)
  2. gh-pages という名前のブランチを作成する
  3. gh-pages ブランチをローカルに複製し、ウェブページ用のファイルをコミットする
  4. ちょっと待ったらアクセスする

1. 適当なリポジトリを作る (既存のリポジトリを使用する場合は 2. へ進む)

リポジトリを作っていない場合は適当に作る。

自分は今回、Dot Install Ruby リポジトリを使うことにする。

2. gh-pages という名前のブランチを作成する

GitHub のページ上で、ファイル一覧の左上にある「Branch:」から「gh-pages」という名前で新たなリポジトリを作る。

自分の例でいくとこんな URL でリポジトリができたのが確認できる → https://github.com/Neos21/practice-dot-install-ruby/tree/gh-pages

3. gh-pages ブランチをローカルに複製し、ウェブページ用のファイルをコミットする

ローカルの適当なフォルダで以下のとおり進める。

# リポジトリをローカルに複製する
$ git clone https://github.com/【ユーザ ID】/【リポジトリ名】.git

# ローカルのブランチを gh-pages に切り替える
$ git checkout -b gh-pages origin/gh-pages
Branch gh-pages set up to track remote branch gh-pages from origin.
Switched to a new branch 'gh-pages'

# あとは適当なファイルをコミットする (ここでは index.html をコミットする)
$ git add index.html
$ git commit -m "First Commit."
$ git push origin gh-pages

リポジトリの master ブランチはコード、gh-pages ブランチはプロジェクトサイトを別々に管理していくため、リポジトリ管理がちょっとめんどくさい感じがある。なんか調べた感じだと上手いこと切り分けて管理する方法があるようだけど、そこまで追いついてない。とりあえず上のとおりやってもやりたいことはできてるのでひとまずこれで。

4. ちょっと待ったらアクセスする

反映されるのを待って https://【ユーザ ID】.github.io/【リポジトリ名】/ にアクセスする。自分が作ったプロジェクトサイトだと https://neos21.github.io/practice-dot-install-ruby/ になる。

GitHub Pages のみ作成するリポジトリの場合 : master ブランチを消しちゃう

GitHub Pages のみ作成するリポジトリを用意する場合は、gh-pages ブランチさえあればよくて、master ブランチは要らなくなるので、gh-pages ブランチをデフォルトのブランチにしたうえで master ブランチを消してしまうと良い。

  1. リポジトリ作成、gh-pages ブランチ作成までは同じ。
  2. ページのタイトル下のタブから「Settings」タブ → 「Branches」メニューに進み、「Default branch」を「master」から「gh-pages」に変えて「Update」ボタンを押す。 これでデフォルトブランチが gh-pages になった。これをしておかないと master ブランチが消せない。
  3. ローカルにリポジトリを複製するところは同じ。ローカルには gh-pages と master の両ブランチを含むリポジトリが複製された状態。
  4. 以下のとおり git push することで、GitHub 上の master ブランチを消す。これで GitHub 上は gh-pages ブランチのみになる。 
    $ git push origin :master
  5. ローカルブランチを gh-pages に切り替える。
  6. ローカルからも master ブランチを削除する。 
    $ git branch -d master
Deleted branch master (was dc07aa5).
  7. これで GitHub とローカルのリポジトリから master ブランチが消え、gh-pages ブランチのみになった。以下のとおり git branch コマンドでブランチの状態を確認。 
    $ git branch -a
* gh-pages
  remotes/origin/gh-pages

以上。

参考

プロジェクトサイトを作る際に参考にした記事。前回記事の参考リンクも合わせて確認のこと。