2016年新機能! GitHubのmasterブランチをWebページとして公開する手順

  • 867
    Like
  • 2
    Comment

GitHubでは、サーバーを自前で準備しなくてもWebページを公開できる「GitHub Pages」という機能があります。これまでは、gh-pagesという別ブランチを作成して、そこにソースコードをプッシュする必要がありました。しかし、本日(2016/08/18)実装された新機能により、masterブランチのみでWebページを公開できるようになりました

本エントリーでは、この新機能の具体的な設定手順を紹介します。

手順

masterブランチにて、「docs」フォルダを作成します。このフォルダに公開したいWebページのソースコードを入れます。

masterブランチをプッシュします。

GitHubのリポジトリページ上で、[Setting]→[GitHub Pages]→[Source]で、[master branch/docs folder]を指定します。

[Save]を押すと、下図の赤枠部分に公開されたWebページのURLが表示されます。URLはhttps://(ユーザー名).github.io/(リポジトリ名)/となります。

URLにアクセスすると、docsフォルダ以下にWebページが閲覧できます。サンプルページを公開しました。

■ リポジトリ
https://github.com/ics-kano/16018_myProject

■ 公開Webページ
https://ics-kano.github.io/16018_myProject/

△ 公開Webページのキャプチャー

HTML、CSS、画像ファイル、JavaScript(コンソールログを出力しています)が正しく反映されているのがわかります。

masterブランチで作業できるのは非常に便利

サーバーを別途準備せずにWebページを公開できるGitHub Pages機能は重宝していましたが、これまで別ブランチgh-pagesで作業する必要があり、masterブランチとの差分をマージするのが手間でした。今回の新機能により、最新ファイルを一括でmasterブランチで管理できるようになり、利便性が高まりました。是非ご利用ください。