読者です 読者をやめる 読者になる 読者になる

夢とガラクタの集積場

落ちこぼれ三流エンジニアである管理人の夢想=『夢』と、潰えた夢=『ガラクタ』の集積場です。

コマンドラインを使わずにgh-pagesを導入する方法

GitHubでph-pagesを使って色々静的ページを公開することを行っていたのですが、
他のページを見てみると途中でコマンドラインが混ざるものが多かったので、
GitHubのWeb画面 + GitHub for Windows」のみで実際に導入する方法をまとめました。

・・・ええ、完全にコマンドラインうちたくない自分用です^^

1.gh-pagesブランチの作成

GitHubにログインしてリポジトリのトップ画面を開きます。
トップ画面の「Admin」をクリックします。



するとGitHubの管理画面に移動するため、「GitHub Pages」 > 「Automatic Page Generator」を選択します。



GitHub Page作成画面が開きますので、「Load README.md」をクリックします。
後からこの辺の内容は差し替えればいいので、とりあえず進めてしまいます。



次に「Continue to Layouts」をクリックします。



ページデザインを選択するページに移りますので、「Publish」をクリックします。



リポジトリのトップ画面に戻り、画面上部にGitHub Pageが作成された旨の通知が表示されます。
ページ上部のリンクをクリックして実際に出来ていることを確かめます。



こんな感じにページが表示されればOKです。


2.gh-pagesへのブランチ切り替え

先ほどGitHub Pageを作成したリポジトリをCloneします。
この際、何故か元々CloneしてあるリポジトリをSyncするだけではブランチにgh-pagesが表示されませんでした。
そのため、新たに取得しなおしてください。



Clone完了後、「master」と表示されているブランチ表示個所をクリックし、表示される「gh-pages」に切り替えます。


「gh-pages」に切り替えた後、GitHubのチェックアウト先が下記のように
GitHub Pageのインデックスファイルが表示されていれば切り替え成功です。



その後は、ローカルのファイルを編集してGitHub for Windowsを使ってcommit→pushしてください。



・・・と、こんなノリでコマンドラインを使うこともなくあっさりと公開用の静的ページが作れました。
色んなものをお手軽に公開できるため、かなり色んな用途が考えられますね。