LoginSignup
1241
1110

More than 1 year has passed since last update.

GitHubのソースコードをWebページとして公開する手順(GitHub Pages)

Last updated at Posted at 2016-08-18

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

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

手順

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

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

GitHubのリポジトリページ上で、[Setting]→[Pages]に移動します。

[Source]の箇所から、「Branch: main」、「/docs」フォルダーを指定します。

CleanShot 2022-02-20 at 17.53.15@2x.png

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

CleanShot 2022-02-20 at 17.53.44@2x.png

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

■ リポジトリ
https://github.com/tonkotsuboy/16018_myProject

■ 公開Webページ
https://tonkotsuboy.github.io/16018_myProject/

image.png

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

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

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

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

是非ご利用ください。

1241
1110
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1241
1110