GitHub PagesでWebページをホスティングする

GitHub Pages

ソースコード管理サービスのGitHubには静的サイトをホスティングする機能(GitHub Pages)があります。今回はこの機能を使って実際に静的サイトをホスティングしてみたいと思います。

GitHub Pagesの種類

GitHub Pagesには下記の2種類があります。

  • ユーザーページ
  • プロジェクトページ

ユーザーページ

ユーザーページは名前の通りユーザー自身を表すページを作成する為のもので、http://username.github.ioのURLで公開されます。また、ユーザーページはusername/username.github.ioという名前で作成されたリポジトリでのみ作ることが出来るので、各ユーザーにつき1ページしか作成することができません。

GitHubの通り、username/username.github.ioを作成してhtmlファイルをpushするだけなので解説は割愛します。

プロジェクトページ

プロジェクトページはプロジェクトを表すページを作成する為のものでhttp://username.github.io/repositoryのURLで公開されます。またプロジェクトページはusername/repositoryという名前で作成されたリポジトリに対して上記のURLで公開されるので、リポジトリさえ作れば何個でも作成することが出来ます。

プロジェクトページを作成するにはブランチを切ったり切り替えたりとgit自体の勉強にもなるので、今回はこちらの方法について解説したいと思います。

リポジトリを作成する

username/repositoryという名前でリポジトリを作成します。今回私はokash1n/ghp-testという名前で作成してみたいと思います。.gitignoreLICENSEはとりあえずNoneで大丈夫です。

image.png (233.7 kB)

リポジトリをクローンする

  • 今回はgitプロトコルを使って進めるので、sshの設定が終わっていない場合はこちらを参考に設定してから進めてください。

カレントディレクトリにリポジトリをクローンしてから移動します。

$ git clone git@github.com:username/repository.git
$ cd repository

masterブランチにファイルを追加

空のリポジトリにはブランチを作成することが出来ないようなので、一度masterブランチにファイルを作成してpushしておきます。

$ echo "README" > README.md
$ git add .
$ git commit -m "add readme"
$ git push origin master

gh-pagesブランチの作成

gh-pagesというブランチを作成してブランチを切り替えます。

#ブランチの作成
$ git branch gh-pages

#ブランチの切替
$ git checkout gh-pages

ファイルの作成とpush

$ echo "Hello world" > index.html
$ git add .
$ git commit -m "add gh-pages branch"
$ git push origin gh-pages

masterではなくgh-pagesにpushする点に注意してください。

ページを確認してみる

https://username.github.io/ghp-test/を確認するとHello worldだけが記載されたページに飛びます。

ページを更新する

index.htmlの中身を更新することでWebページを更新することができます。

$ echo "My GitHub Pages" > index.html
$ git add .
$ git commit -m "edit page"
$ git push origin gh-pages

以上になります。

Share Comments
comments powered by Disqus