1075
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

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ブランチで管理できるようになり、利便性が高まりました

是非ご利用ください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1075
Help us understand the problem. What are the problem?