GitHub Pagesを使って無料でWebサイトを公開してみよう！
2020/03/06
こんにちは、okutani(@okutani_t)です。GitHubでは静的なページ（PHPやRubyなどのサーバーサイドで動く言語を使わないページ）であれば、無料でお手軽にWebサイトを公開することができます。
ちょっとした検証や、GitHubで管理しているプロジェクトの紹介ページをこの機能で作ると良いですね。
実際にGitHubページで運用されているサイトはたくさんありますが、「Animate.css」や「slick – the last carousel you’ll ever need」なんかは、この機能を使って公式サイトをオープンしています。
「yoshiko-pg.github.io」を初めてみたときは感動しました。一度見てみてください。
合わせて公式のチュートリアルを見ておくとより理解が深まるかと思います。
もし、GitHubのアカウント作成がまだ済んでいない方は「GitHubの登録手順、SSH設定＆リポジトリをclone,pushまで | vdeep」を一読して、GitHubを利用できる状態にしておきましょう。
GitHubページは「ユーザーアカウント用のページ」「リポジトリごとのページ」がそれぞれ作成できます。本記事では両方解説しています。
では、実際にGitHubでWebサイトを公開してみましょう！
スポンサーリンク
ユーザー名.github.ioのページを作成してみる
まずはユーザーアカウント用のページを作成してみましょう。
GitHub上で「ユーザー名.github.io」という名前で空のリポジトリを作成します。
次のコマンドでリポジトリをクローン。
$ git clone https://github.com/ユーザー名/ユーザー名.github.io.git私のアカウントでは次のようになりました。
$ git clone https://github.com/okutani-t/okutani-t.github.io.gitあとは、この中にHTMLファイルを生成していけばOKです。
$ cd okutani-t.github.io
$ echo hello github page! > index.htmlステージング、コミットしてプッシュ。
$ git add -A
$ git commit -m "Initial commit"
$ git push origin masterすこし待って（10分ぐらい）下記へアクセス。作成したページが表示されるか確認してみましょう。
https://ユーザー名.github.io/
無事にユーザーアカウントのWebページが公開できました。
リポジトリごとのページを作成してみる
次はリポジトリごとのページを作成してみましょう。
作り方はかんたんで、『gh-pages』という名前でブランチを作ればOKです。試しにfirst-gitリポジトリで作成してみます。
[追記：2018/04/27]masterブランチでも作成できるようになりました。詳しくは記事末にまとめています
$ git clone https://github.com/okutani-t/first-git.git
$ cd first-git
$ git checkout -b gh-pages
$ echo first git! > index.htmlコミットしてプッシュします。
$ git add -A
$ git commit -m "Initial commit"
$ git push origin gh-pagesGitHubにプッシュしたら、次のURLへアクセスしてみましょう。
https://ユーザー名.github.io/リポジトリ名/
ちゃんとWebサイトが表示されました！かんたんにリポジトリからWebサイトを作ることができましたね。
私はJavaScript, jQueryで書いたテストコードをすぐにブラウザで確認できるように、gh-pagesブランチでリポジトリを管理しています。リンクを載せておくので参考にしてください。
参考okutani-t/javascript-code: JavaScriptのテストコード
参考okutani-t/jQuery-code: jQueryのテストコード
また、Webサイトの内容はgh-pagesブランチを常に見ているので、masterブランチの内容は破棄してもOKです。一応、masterブランチを破棄する手順も合わせてご紹介しておきます。
masterブランチを削除する方法
まずは、Github上のデフォルトブランチをmaster以外にします。
GithubのリポジトリTOPページから「Settings」→「Branches」へ移動。「Default branch」の項目を次のように変更しましょう。
これで、masterブランチを削除する準備ができました。変更できたら、ローカルリポジトリ上でmasterブランチを削除しましょう。
$ git branch -d master次のコマンドで、リモートリポジトリのmasterブランチを削除。
$ git push origin :master次のコマンドで、ローカルとリモートリポジトリのブランチの状態をまとめて確認できます。
$ git branch -a
* gh-pages
remotes/origin/gh-pagesきちんとmasterブランチが削除されていることが確認できました。これでgh-pagesブランチのみで運用できますね。
ただし、はじめに作ったユーザー名.github.ioのブランチはmasterでの運用でOKです。わざわざgh-pagesブランチで運用する必要はないので気をつけましょう。
Githubを使ってサイトを作成したい方の参考になれば幸いです。
追記：masterブランチで公開する
以前は「gh-pages」というブランチを作る必要がありましたが、masterブランチで公開できる機能ができたようです。
GitHubリポジトリから「Settings」→「GitHub Pages」→Sourceから「master branch」を選択、「Save」をクリック。
あとは「https://ユーザー名.github.io/リポジトリ名/」へアクセスすればWebサイトが表示されます。
GitHubユーザーの参考になれば幸いです。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
