top / index / prev / next / target / source

2017-02-09 diary: [github] で [gh-pages] を使って静的 web サイトを公開するときの手順(古典的手順)

いがぴょんの日記 日記形式でつづる いがぴょんコラム ウェブページです。

[github] で [gh-pages] を使って静的 web サイトを公開するときの手順(古典的手順)

github では gh-pages という機能を使うと 静的 web サイトを公開することが可能になります。 ここでは、その手順をメモします。

まず、この文書は github アカウントを既に取得済みであることを前提にします。ここでは igapyon というアカウントを持っていることを前提に記載します。また、gh-pages には幾つかの設定方法がありますが、ここでは gh-pages というブランチを作成することによる公開方法を示します。

ここでは以下のような順序で web 公開設定を実施することとします。

静的 web 公開用リポジトリの作成

新規に静的web公開用のリポジトリの作成します。github にログインして、Repositories タブを開いて New ボタンをクリックします。

Create new repository

新規リポジトリ作成詳細画面で Repository name にリポジトリ名を入力するなどして Create repository ボタンをクリックします。

日記を公開することを想定するならば、リポジトリ名は `diary` などの名称にすることを推奨します。

Create new repository detail

リポジトリが作成されると以下のような画面が開きます。ここで表示される https://github.com/igapyon/diarysample.git のような文字列をメモしておくと後で便利です。

https://github.com/`AccountName`/`RepositoryName`.git

Create new repository result

静的 web サイト用ブランチに gh-pages ブランチの作成

Branch ボタンをクリックして、Switch branches/tags の下に ブランチ名として gh-pages を入力して、その後 すぐ下に表示される Create branch: gh-pages をクリックします。

`gh-pages` という名称が特別な意味を持っているのです。

Create new branch

gh-pages ブランチを 静的 web リポジトリのデフォルトブランチに設定

gh-pages ブランチを静的 web リポジトリのデフォルトブランチとして設定します。 Settings タブを開いて Default branch から gh-pages を選択して Update ボタンをクリックします。

初心者のうちは、`gh-pages` ブランチがデフォルトブランチであるのが混乱が少なく作業しやすいのです。

Set gh-pages to default

Are you sure? ダイアログが開くので I understand, update the default branch. ボタンをクリックします。

gh-pages default confirm

ブランチの変更に成功したら、以下のように gh-pages がデフォルトになっていることが表示されます。

gh-pages default result

まとめ

ここまでの手順が終われば、これ以降の静的 web リポジトリの gh-pages ブランチへのコミット＆プッシュ内容が github の静的 web として公開されるようになりました。

ちなみに、上記のような手順で作成すると、以下のような URL で web 公開されます。

https://`AccountName`.github.io/`RepositoryName`/

なお、この手順をには web コンテンツ作成は含まれていないので、そのままではコンテンツが存在しません。markdown (.md) ファイルなどをコミット＆プッシュして、コンテンツを公開していきましょう。

関連するコンテンツ

Last modified: $Date: 2017-02-13 $

登場キーワード

この日記について