いつかエンジニアになりたい

Nothing is too late to start

GitHub Pages 入門 - Part 1

概要

  • 現在、社内WIKIでよく利用されている「Confluence」がリッチすぎて非常に使いにくい
  • GHEが利用できるので、どうせなら「GitHub Pages」を使おうと思い、一度、「GitHub Pages」の利用方法を整理する

GitHub Pages

GitHub Pages」とは

f:id:berukann:20180812150655p:plain

  • GitHub Pages」は、GitHubのレポジトリから直接、静的サイト*1ホスティングできるサービスです
  • GitHub社から提供されており、基本的に無料で利用することができ、OSSのドキュメント等で利用されていることが多いです
  • GitHub Pages」は、静的ページホスティングサービスであるため、PHPRubyPythonなどのサーバーサイドのコードは動作しません

GitHub Pages」の種類

  • GitHub Pages」は、大きく分けて以下の二種類があります
    • ユーザ・グループページ:ユーザ、グループに紐づくページ。ユーザ、グループごとに1つだけ作成できる
    • プロジェクトページ:プロジェクトに紐づくページ。レポジトリごとに1つずつ作成できる
  • ページ毎の「GitHub Pages」は以下の通りになります*2 f:id:berukann:20180812174738p:plain

  • 例:ユーザ「berukann」、独自ドメインを「ghe.beru.io」にしている場合のURL例は以下になります

Domain Type Page Type Repository Name URL
Normal User Page berukann/berukann.github.io https://berukann.github.io/
Normal Project Page berukann/gh-pages-001 https://berukann.github.io/gh-pages-001/
Custom User Page berukann/berukann.ghe.beru.io https://ghe.beru.io/pages/berukann/
Custom Project Page berukann/gh-pages-001 https://ghe.beru.io/pages/berukann/gh-pages-001/

GitHub Pages」で公開されるフォルダについて

  • GitHub Page」で公開されるフォルダは、以下から選択ができる *3
    • [gh-pages] ブランチのルートフォルダ
    • [master] ブランチのルートフォルダ
    • [master] ブランチのdocsフォルダ配下
  • 公式ページに記載の通り、GitHub Pagesは、プライベートリポジトリであっても、インターネット上に公開されるため注意してください

GitHub Pages」を作成してみる

  • 試しに、テストプロジェクトを作成し、「GitHub Pages」を表示してみる。具体的な流れは以下になります
  • (1)テストリポジトリ(gh-pages-001)を作成する
  • (2)「GitHub Pages」を有効にする
  • (3)テストページを「GitHub Pages」に表示させる

(1)テストリポジトリ(gh-pages-001)を作成する

  • GitHub にアクセスし、右上の「+」より、[New repository] を選択、テストリポジトリを作成する ※ ここでは「gh-pages-001」で作成 f:id:berukann:20180812151513p:plain

(2)「GitHub Pages」を有効にする

  • 作成したリポジトリの [Settings] を選択し、「GitHub Pages」が「None」になっていることを確認 f:id:berukann:20180812152329p:plain
  • [Select source] にて [master branch] を選択し、[Save]を実施する。これで「GitHub Pages」が有効になる f:id:berukann:20180812152554p:plain
  • 再度、[Settings]->[GitHub Pages] を確認すると、URLが表示されてことを確認 f:id:berukann:20180812152735p:plain
  • ブラウザから上記URLにアクセスし、「404. There isn't a GitHub Pages site here.」が表示されることを確認 f:id:berukann:20180812153410p:plain
  • ちなみに 「GitHub Pages」を有効にしていない場合は、「404. File not found.」が表示されます f:id:berukann:20180812153545p:plain

(3)テストページを「Github Pages」に表示させる

  • Terminalにて、上記で作成したリポジトリをクローンし、テストページをプッシュする
daicho ~/work> git clone git@github.com:berukann/gh-pages-001.git
Cloning into 'gh-pages-001'...
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
daicho ~/work> cd gh-pages-001/
daicho ~/w/gh-pages-001> git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/master
daicho ~/w/gh-pages-001> vim index.html
daicho ~/w/gh-pages-001> cat index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>GitHub Pages Test</title>
    </head>
    <body>
        <main>
            <h1>GitHub Pages Test</h1>
        </main>
    </body>
</html>
daicho ~/w/gh-pages-001> git add .
daicho ~/w/gh-pages-001> git commit -m "first commit."
daicho ~/w/gh-pages-001> git push origin master
  • GitHubのページにアクセスし、正常にテストページが表示されていることを確認 f:id:berukann:20180812154710p:plain

補足:「gh-pages」 ブランチで作成した場合の挙動について

  • よく古いブログに出てくる「gh-pages」ブランチでプッシュした場合の挙動についても念の為、確認した
  • レポジトリ設定から「GitHub Pages」を有効にしないまま、「gh-pages」ブランチにプッシュしてみたが、「GitHub Pages」は正常に表示された
  • GitHub Pages」の [Settings] -> [GitHub Pages] を確認すると、[Select source] に [gh-pages branch] が追加されていた f:id:berukann:20180812155830p:plain
  • 公式ドキュメントで確認すると、「gh-pages」ブランチについて記載もあり、未対応になったわけではなさそうだが、わざわざ利用する必要もなさそう

まとめ

  • GitHub Pages」は、「master」、「gh-pages」ブランチ、もしくは、「master」ブランチの docs フォルダを公開フォルダとして指定できる
  • 次回は、静的ジェネレータを利用したファイルを [GitHub Pages] で公開する方法について整理する

*1:静的サイトとはHTMLベースのサイトであり、事前に生成したページを表示するだけなので、サーバー負荷が低く、高速に動作する

*2:独自ドメインを設定している場合、URLが変わるため注意してください。詳細は 公式ページ を参照してください

*3:以前は「gh-pages」ブランチでしか公開されない仕様だったようですが、現状は「master」ブランチでも公開できます(現在でも「gh-pages」ブランチでも公開は可能)。詳細は 2016年新機能! GitHubのmasterブランチをWebページとして公開する手順@Qiita を参照にしてください