【超簡単】GitHub Pagesとは?手軽にサイト公開してみよう!

コーディングデータをポートフォリオとしてWeb上に公開したいけど、どうしたらいいのかな…

…そんなお悩みありませんか?

実はGitHubにデータをアップロードしておけば、レンタルサーバーを契約しなくても簡単にWebサイトを公開することができます。

この記事では、GitHubPagesを使ったWebサイトの公開方法を解説していきます!

既にコーディングデータを持っている方は、記事を読みながら手を動かしてみてください。

読み終えるころには自分のWebサイトが1個完成しますよ!

もちろんスマホでも閲覧可能なので、動作を確認してみるのもオススメです♪

Github Pagesとは

GitHubから提供されている、静的サイトのホスティングサービスのこと。

静的サイトとは、ユーザー操作でページ内容が変わらない、HTML・CSSなどで構築されたサイトのことです。(JavaScriptを使ったアニメーション含むサイトも公開可能です)

※PHPで動くWordPressのような動的サイト(ユーザーの操作でページ内容が変化する)の公開はできません。

これを使えばレンタルサーバーを契約しなくても気軽にウェブサイトを公開できちゃうのです。

GitHubのアカウントを持っていれば無料で静的なウェブサイトを公開することができます。

Github PagesのURL

URLは以下のようになります。

http(s)://<username>.github.io/<repository>

後で説明しますが、独自ドメインを当てはめることもできます。

privateで公開できる?

残念ながら無料版ではprivateリポジトリでは公開することができません

privateでGitHub Pagesを使いたい場合は、GitHubProなどの有料プランに切り替える必要があります。

本記事では、publicリポジトリでの公開方法を説明していきます。

GitHub Pagesは、GitHub Free及びOrganizationのGitHub Freeのパブリックリポジトリ、GitHub Pro、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Serverのパブリック及びプライベートリポジトリで利用できます。 詳しい情報については「GitHubの製品」を参照してください。

GitHub Pagesについて

GitHub Pagesの使用制限や注意点

GitHub Pages ソースリポジトリには1GB の推奨上限があり、月当たり 100GB のソフトな帯域幅制限があります。

また、GitHub Pagesは商用利用はできません。

こちらは公式サイトでも言及されていますので、利用の際は注意しておきましょう。

GitHub Pages は、オンラインビジネス、eコマースサイト、主に商取引の円滑化またはサービスとしての商用ソフトウェアの提供 (SaaS) のどちらかを目的とする、その他のウェブサイトを運営するための無料のウェブホスティングサービスとしての使用を意図したものではなく、またそのような使用を許可するものでもありません。

GitHub Pages について

GitHub PagesとJekyllについて

Jekyll(ジキル)とは、静的サイトを構築するためのRuby製のツール。

Markdownファイルから自動でHTMLを生成して、用意されたテーマをもとに静的なサイトを作成してくれる便利なツールです。

GitHub PagesではこのJekyllをサポートしているので、より手軽に静的サイトを公開することができます。

(本記事ではJekyllの使い方は割愛します…!)

Github Pagesの公開方法

それでは、GitHub Pagesでサイトを公開する手順を解説していきます!

今回は、このようなサイトを公開してみたいと思います。

サンプルサイト

HTML、CSS、画像ファイルによって構成されています。

GitHubのアカウント作成

GitHubのアカウントを持っていない方は、以下のサイトから作成しましょう。

GitHub公式ページ

GitHubのトップページから「GitHubに登録する」をクリックして進めていけばOKですが、その後のページが英語まみれでよくわからない!という方はこちらの記事を参考にしてみてください!

【最新版】GitHubアカウントの作成方法を画像付きで解説!

リモートリポジトリを作成

続いて、サイト公開用のリモートリポジトリを作成します。

リポジトリ作成

リポジトリ名は”penguin”にしました。

リポジトリにファイルを更新

続いて、サイトを構成するHTML、CSS、画像ファイルをGitHub上にアップロードしていきます。

ローカルからプッシュする方法と、GitHub上で直接ファイル更新する方法の2パターンあります。

1個ずつ見ていきましょう。

(パターン1)ローカルからプッシュ

こちらのファイルをリモートリポジトリにプッシュします。

プッシュするファイル
プッシュ後の画面

GitHubを使ったことのある方にとってはお馴染みの方法ですね。

リモートリポジトリの作成からプッシュの流れを詳しく知りたい方は、こちらもチェックしてみてください。

【徹底解説】GitHubリポジトリとは?作成や削除・運用方法まとめ!

(パターン2)GitHub上で直接ファイル更新

GitHub上で新規ファイルを直接作成・更新することも可能です。

リポジトリを作成したら、”creating a new file”をクリックします。

新規ファイル作成

するとファイル作成画面に移るので、まずはindex.htmlを作成してみましょう。

index.htmlの作成

続いて、”Edit new file”にコードを書き込んでいきます。

パスの指定方法は、通常ローカルでテキストエディタなどで書く方法と変わりません。今回は画像ファイルを同じ階層に保存するので、./ + <ファイル名> となります。

index.htmlの編集

コードを打ち込んだら”Commit new file”をクリックして作成完了です。

commit new file

同じ手順でstyle.cssも作成していきます。

新しいファイルを追加する際は、リポジトリトップページの”Add files”→”Create new file”をクリックしてください。

create new file
cssの編集

続いて、画像のアップロードしましょう。

“Add files”→”Upload files”をクリックします。

upload files

するとこんな画面に移動するので、画面上に画像ファイルをドラッグ&ドロップします。

画像のドラッグドロップ

これで必要なファイルが揃いました!

サイトの公開

リポジトリのSettingsを開き、スクロールしていくと”GitHub Pages”の項目が現れます。

settings画面
GitHubPages 設定

“Check it out here!”をクリックして、Pagesの設定画面に移動します。

GitHubPages 設定画面

サイトとして表示させたいブランチを選択します。デフォルトではこの部分が”None”になっているので、”master”を選択して”Save”をクリックしてください。

すると先に述べたようなgithub.ioを含むURLが表示されます。

PagesのURL

クリックしてみて、上手く表示されれば成功です!

検索結果に表示されない?

「公開してもGoogle検索で表示されません!」と聞かれることがあります。こちらはGitHub Pagesの問題ではなく、Googleインデックスの仕様みたいなものです。GitHub Pagesに限らず、新しくWebに公開したサイトは、しばらく検索結果に表示されないものなので気長に待ちましょう!

(URL検索窓にURLを入力しても表示されない場合は、URLや設定が間違ってないか確認しましょう)

ファイル内容を更新して反映されるかを確認

続いて、ファイル内容を編集してページに反映されるか確認してみましょう。

先にお伝えしておくと、すぐ反映されることもあれば、反映まで1〜2時間かかることもあるようです

編集後すぐにサイトを確認しても変わってない場合もありますが、焦らず待ってみてください。

パターン1のように、ローカルでファイルを変更してプッシュしても良いですし、パターン2のようにGitHub上で変更することも可能です。

パターン1の方法は通常のプッシュ方法と変わらないので、パターン2を解説します。

まず、リポジトリページから変更したいファイルをクリックします。今回はindex.htmlを編集してみます。

index.htmlの変更

移動先のページでは、ファイルの中身を確認することができます。

index.htmlの変更2

編集モードにするには、鉛筆みたいなマークをクリックしてください。

ちなみに、鉛筆マークの右隣にあるゴミ箱マークをクリックすると、ファイルを削除することができます。

画像の下にテキストを追加してみました。

index.htmlの変更

しばらく待って、反映されてるのが確認できればOKです。

変更後のサイト

独自ドメインに変更

GitHub PagesのURLには独自ドメインを設定することができます。

サポートされているドメインは以下のとおり。

  • wwwサブドメイン
  • カスタムサブドメイン
  • サブドメインの無いApexドメイン

GitHub Pagesの設定画面にCustom domainの項目があるので、取得したドメインを入力して”Save”をクリックしたら完了です。

ここではドメインの取得方法など、GitHub外の操作方法は割愛させていただきます。

まとめ

GitHub Pagesを使ったWebサイト公開方法をご紹介しました。

これならレンタルサーバーの契約やドメインの取得が不要なので、練習用・ポートフォリオ掲載用問わず、いくつでも気軽にサイトが作れて便利ですよね。

もちろん、いずれはレンタルサーバーを契約してWebサイトを作る手順を知る必要があると思います。

こちらの記事が参考になるので、ぜひ参考にしてみてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA