Hugoで生成した記事をGitHub Pagesで公開する(1)
概要
- 現在、会社では、GHEを利用しており、「GitHub Pages」が利用できる
- あまり「GitHub Pages」を利用したことがなかったので、今回、情報を整理してみる
- 今回の記事では、「GitHub Pages」に整理し、次回の記事で Hugo を利用した記事を公開してみる
GitHub Pages
- 「GitHub Pages」については、既によくまとまった記事が多くあるため、詳細はそちらをご確認ください
「GitHub Pages」とは
- 「GitHub Pages」は、GitHubのレポジトリから直接、静的サイト*1 をホスティングできるサービスです
- GitHub社から提供されており、基本的に無料で利用することができ、OSSのドキュメント等で利用されていることが多いです
- 「GitHub Pages」は、静的ページホスティングサービスであるため、PHP、Ruby、Pythonなどのサーバーサイドのコードは動作しません
「GitHub Pages」の種類
- 「GitHub Pages」は、大きく分けて以下の二種類があります
- ユーザ・グループページ:ユーザ、グループに紐づくページ。ユーザ、グループごとに1つだけ作成できる
- プロジェクトページ:プロジェクトに紐づくページ。レポジトリごとに1つずつ作成できる
- ページ毎の「GitHub Pages」は以下の通りになります*2
- 例えば、ユーザ「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」で作成
- 今回は、[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」になっていることを確認
- [Select source] にて [master branch] を選択し、[Save]を実施する。これで「GitHub Pages」が有効になる
- 再度、[Settings]->[GitHub Pages] を確認すると、URLが表示されてことを確認
- ブラウザから上記URLにアクセスし、「404. There isn't a GitHub Pages site here.」が表示されることを確認
- 補足:「GitHub Pages」を有効にしていない状態で上記URLにアクセスした場合、「404. File not found.」が表示されます
(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のページにアクセスし、正常にテストページが表示されていることを確認
補足:[gh-pages] ブランチで作成した場合の挙動について
- よくブログに書かれている [gh-pages] ブランチでプッシュした場合の挙動についても念の為、確認した
- レポジトリ設定から「GitHub Pages」を有効にしないまま、「gh-pages」ブランチにプッシュしてみたが、「GitHub Pages」は正常に表示された
- 「GitHub Pages」の [Settings] -> [GitHub Pages] を確認すると、[Select source] に [gh-pages branch] が追加されていた
- 公式ドキュメントで確認すると、「gh-pages」ブランチについて記載もあり、未対応になったわけではなさそうだが、わざわざ利用する必要もなさそう