超簡単！GitHubのソースを直接Web公開（GitHub Pages）

GitHubにプッシュしたHTMLのソース、実際の表示結果をブラウザで即確認できる、そんなことができればとても便利ですよね。レンタルサーバーを借りる必要もなく、インフラの管理も不要・・・夢のようですね。

そんな方法、あるんです！それが今回ご紹介するGitHub Pagesです。特にインフラまわりの弱いエンジニアの方、必見です。

1 Github Pagesとは
2 Github Pagesの特徴
3 Github Pagesの使い方
4 ページの更新方法
5 GitHub Pagesの制限事項
6 まとめ

Github Pagesとは

フロントエンジニアの方、ソースコード管理はどうされていますか？

履歴管理や複数人数での開発を考えると、やはりGitHubを導入する方がよいです。ただ、導入したあとが大変です。Githubにソースをおいたところで、それをどうやってテスト環境や本番環境へデプロイするのでしょうか？

クライアントにリポジトリをプルしてFFFTP等のツールでアップ・・・大変ですね。

仮にGitHubにプッシュしたHTMLが直接Webブラウザで結果確認できたら、最高ですね。それを実現するのがGitHub Pagesです。

Github Pagesの特徴

GitHub Pagesの特徴を挙げてみましょう。

GitHubにあるHTMLソースがすぐに確認できる

これはすでに述べてきたとおりです。変更したソースをGitHubにプッシュするだけで即反映です。サーバーやインフラの知識はほぼ必要ないので、インフラまわりが弱いエンジニアの方々はとても助かりますよね。

1アカウントごとに1つのリポジトリのみ

複数のリポジトリを公開できるわけではなく、GitHubの１アカウントまたは1組織につき公開できるのは1つのリポジトリのみになります。

JavaScriptやjQuery、Bootstrapも

普通のWebサイトはHTMLとCSSだけで完結しているものは少なく、だいたいJavaScriptやjQuery、モバイル対応でBootstrapを導入しています。そしてGitHub Pagesもそれらに対応しています。

静的サイトに限定

あくまで静的サイトのみであり、PHPやRuby、Javaといった開発言語によって構築された動的サイトは対応していません。

独自URLに対応

デフォルトでは「https://ユーザまたは組織名.github.io/リポジトリ名」ですが、独自のドメインを設定することも可能です。

Github Pagesの使い方

実際に環境をセットアップしてみましょう。ここではクライアントツールはGitHub Desktopを使っています。よって、GitHub Desktopをセットアップしていない方は、こちら＜他記事：GUIで簡単操作！GitHub Desktopを解説します＞をご覧の上、以降の内容を実行してください。

GitHub側でリポジトリの作成

手順はこちらに準拠しています。

まず、新規にリポジトリを作成します。リポジトリ名は「（ユーザー名または組織名）.github.io」としてください。

リポジトリができたら、以下の青枠内を確認してください。

「Setup in Desktop」というボタンがありますので、クリックしてください。すると、GitHub Desktopが自動的に立ち上がり、リポジトリをクローンしてくれます。

次に、お好みのエディタで新規にファイルを作りましょう。「index.html」というファイル名で、中身は前述したこちらにあるコードをそのまま使いましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>

ファイルを保存すると、GitHub Desktopに変更があったことが通知されます。

画面左下の「summary」と書かれたテキストボックスに、任意のコミット名を入力します。ここではとりあえず「create index.html」と入力して、「Commit to master」と書かれたボタンをクリックします。続けて、「Publish branch」ボタンをクリックします。

これで終わりです。いよいよ、ブラウザで確認する時がきました。ブラウザを立ち上げ、「https://(ユーザー名).github.io/」と入力してください。

表示されました！

ページの更新方法

あとはGitHubを使った開発と特別変わったことはありません。好みのエディタやIDEでソースを変更し、クライアント側のリポジトリにコミット、GitHubへプッシュ、すると即変更が確認できます。

エディタでh1の文字を青色に変更します。

<!DOCTYPE html>
<html>
<body>
<h1><font color="blue">Hello World</font></h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>

GitHub　Desktopでコミット、プッシュをします。そしてブラウザでページの再読み込みをすると・・・

できました！

GitHub Pagesの制限事項

良いことばかりではなく、何点か制限事項があります。

リポジトリの容量は1GB以下
1ヶ月の転送量量は100GB以下
更新は1時間に10回以下

（本家サイトでは推奨要件といった書き方なのですが、ここでは断言的な表現にしました）

まとめ

GitHub Pagesの解説をしました。いかがでしたか？

テスト用環境やお客様へ提示する仮環境的な使い方なら十分ではないでしょうか。ぜひ導入を検討してみてくださいね！

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。

超簡単！GitHubのソースを直接Web公開（GitHub Pages）

Github Pagesとは