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

Nothing is too late to start

Hugoで生成した記事をGitHub Pagesで公開する(1)

概要

  • 現在、会社では、GHEを利用しており、「GitHub Pages」が利用できる
  • あまり「GitHub Pages」を利用したことがなかったので、今回、情報を整理してみる
  • 今回の記事では、「GitHub Pages」に整理し、次回の記事で Hugo を利用した記事を公開してみる

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」でパブリックのGithubを利用した場合、GHEで独自ドメイン(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」で公開されるフォルダは、以下から選択ができます
    • A. [gh-pages] ブランチのルートフォルダ
    • B. [master] ブランチのルートフォルダ
    • C. [master] ブランチのdocsフォルダ配下
  • 以前は [gh-pages] ブランチでしか公開されない仕様だったようですが、現状は「master」ブランチでも公開できます(ただ、現在でも [gh-pages] ブランチでも公開は可能)。詳細は 2016年新機能! GitHubのmasterブランチをWebページとして公開する手順@Qiita を参照にしてください))
  • 公式ページに記載の通り、「GitHub Pages」は、プライベートリポジトリ(GHE除く)であっても、インターネット上に公開されるため注意してください

GitHub Pages」を作成してみる

  • 試しに、以下の流れでテストプロジェクトを作成し、「GitHub Pages」を表示してみる ※ 公開するフォルダは上記の [B] パターン

  • (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
  • 今回は、[master] ブランチを公開するため、TerminalにてリポジトリをCloneし、 [master] ブランチを作成しておく
➜  ~ git clone git@github.com:berukann/gh-pages-001.git
Cloning into 'gh-pages-001'...
warning: You appear to have cloned an empty repository.
➜  ~ cd gh-pages-001/
➜  gh-pages-001 git:(master) echo "# gh-pages-001" >> README.md
➜  gh-pages-001 git:(master) git init
➜  gh-pages-001 git:(master) git add README.md
➜  gh-pages-001 git:(master) git commit -m "first commit"
➜  gh-pages-001 git:(master) git remote add origin git@github.com:berukann/gh-pages-001.git
➜  gh-pages-001 git:(master) git push -u origin master

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

  • 作成したリポジトリの [Settings] を選択し、「GitHub Pages」が「None」になっていることを確認 f:id:berukann:20180915115754p: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」を有効にしていない状態で上記URLにアクセスした場合、「404. File not found.」が表示されます f:id:berukann:20180812153545p:plain

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

  • Terminalにて、上記で作成したリポジトリをクローンし、テストページをプッシュする
➜  ~ cd gh-pages-001/
➜  gh-pages-001 git:(master) git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/master
➜  gh-pages-001 git:(master) vim index.html
➜  gh-pages-001 git:(master) 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>
➜  gh-pages-001 git:(master) git add .
➜  gh-pages-001 git:(master) git commit -m "second commit."
➜  gh-pages-001 git:(master) 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 フォルダを公開フォルダとして指定できる
  • 次回は、静的ジェネレータである「Hugo」を利用した記事を [GitHub Pages] で公開する方法について整理する

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

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