超簡単!GitHubのソースを直接Web公開(GitHub Pages)
  • facebookページ
  • twitterページ
  • 2018.03.17

    超簡単!GitHubのソースを直接Web公開(GitHub Pages)

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

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

    Github Pagesとは

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

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

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

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

    Github Pagesの特徴

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

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

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

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

    複数のリポジトリを公開できるわけではなく、GitHubの1アカウントまたは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」というファイル名で、中身は前述したこちらにあるコードをそのまま使いましょう。

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

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

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

    表示されました!

    ページの更新方法

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

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

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

    できました!

    GitHub Pagesの制限事項

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

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

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

    まとめ

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

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


    ポテパンが提供するサービスについて

    本メディア「ポテパンスタイル」を運営する株式会社ポテパンは、エンジニアキャリア領域で複数サービスを提供しています。

    ポテパンフリーランス

    ポテパンフリーランス

    フリーランスエンジニアの方に高単価案件をご紹介しております。弊社ではフリーランス案件を常時300件ほど保有しており、その中からあなたに適した案件をご案内いたします。また、これから独立してフリーランスになる方の無料個別相談も承っております。フリーランスになった後の案件獲得方法やお金面(税金や保険など)についてお答えいたします!フリーエンジニアになりたい方向けのコンテンツも盛りだくさんです。

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。年収800万円以上のハイスペック転職をご希望の方は「ポテパンプロフェッショナル」もご用意しておりますのでご利用下さいませ。

    ポテパンキャンプ

    ポテパンキャンプ

    ポテパンキャンプでは、RubyにてゼロからオリジナルのECサイトを作り上げてる3ヶ月間の実践型カリキュラムを提供しております。すでに本スクールの卒業生は、エンジニア職として様々な企業様に就職しております。なお、本スクールは受講料25万円と他社スクールに比べ格安となっており、またポテパンからご紹介させていただいた企業へ就職が決まった場合は、全額キャッシュバックいたします。



    株式会社ポテパンは、企業とエンジニアの最適なマッチングを追求しています。気になるサービスがあれば、ぜひ覗いてみてください!

    ポテクラバナー ポテプロバナー

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE

    ポテパンおすすめ案件