読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

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

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

neos21.hatenablog.com

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

ちなみに、今回の手順で作成したプロジェクトサイトのサンプルはコチラ → DotInstallRuby - Neo's GitHub Pages

手順

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

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

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

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

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

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

自分の例でいくとこんな URL でリポジトリができたのが確認できる → https://github.com/Neos21GitHub/DotInstallRuby/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. ちょっと待ったらアクセスする

反映されるのを待って http://(ユーザ ID).github.io/(リポジトリ名)/ にアクセス。自分が作ったプロジェクトサイトだと http://neos21github.github.io/DotInstallRuby/ になる。

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
    

以上。

参考

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