Git/Github

【初心者向け】無料でWEBサイトを作れる！”Github Pages”とは？

自身のホームページやポートフォリオページを持つことは、初心者にとって1つの目標ですよね。実際、就職・転職活動においても、WEB上にサイトが公開されていると先方に内容を伝えやすくなります。そこでおすすめなのが、「Github Pages」というサービスです。
今回は、Github Pagesとは何か、概要から始め方までわかりやすく解説します。

Github Pagesとは？

Github Pagesは、名前の通りGithub上のリポジトリをWEB領域で公開できるホスティングサービスです。

ホスティングサービスとは外部に設置されているサーバの領域を利用できるサービスのことで、基本的には有料で提供されていることがほとんどですが、Github Pagesの場合はなんと完全無料で利用できます。

基本はGithubのリモートリポジトリ1つにつき、1つのWEB領域が割り当てられています。
「専用のドメインを使ってオリジナルのWEBサイトを・・・」というのは無理ですが、ポートフォリオなどを公開する分には必要十分です。

Github Pagesの始め方

Github Pagesは、当然のことながらGithubのリモートリポジトリを作成することが必須となります。まだGithub上にリポジトリを持てていない方は、まず先にリポジトリを作成しておきましょう。

アカウントやリポジトリの作成については、以下の公式ガイドを参照してください。

Github Docs

基本的には、通常のWEBサービスと同じようにメールアドレスなどを用いて進められます。
最終的に、下のような画面までたどり着けていればOKです。

それでは、順を追ってGithub Pagesの始め方を簡単に説明していきます。

1．Github Pagesの設定をする

Github Pagesの利用を開始するには、リポジトリの設定を変更する必要があります。

上記のタブから[ Settings ]を選び、左部のメニューから[ Pages ]を選択すると、Github Pagesの設定画面に移ります。

その中にある[ Branch ]という項目を、以下のように設定した後[ Save ]を押してください。
（mainではなくmasterとなっていることがあります。）

しばらく時間を置くと、Github PagesのWEB領域にアクセスできるようになっています。

基本的には、
https://（アカウント名）.github.io/（リポジトリ名）/
という書式になります。

この例の場合、sampleリポジトリがルートディレクトリの役割をしているため、この下にHTMLファイルなどを置けば、そのまま閲覧できるようになるわけですね。

ただし、リポジトリがプライベート（非公開）になっている場合は、リンクにアクセスしても何も表示されません。必ず、[ General ]の項目の最下部から、リポジトリがpublicになっているかどうかを確認しておきましょう。

2．HTMLファイルをリポジトリに追加

では次に、実際にHTMLファイルを作って、リポジトリに追加しましょう。
適当なファイルを用意しても良いですが、とりあえず試してみたいという方は、以下のHTMLファイル（index.html）をダウンロードして使用してください。

index.html

Gitを使ってファイルを追加することもできますが、とりあえずはGithubリポジトリに直接HTMLファイルをアップロードしましょう。

[ Add file ]から[ Upload files ]を選択すると、画像のようなアップロード画面に遷移します。

この画面に対してファイルをドラッグ&ドロップなどすれば、ファイルが読み込まれます。最後に画面下部からファイルをコミットすることを忘れないよう注意してください。

3．HTMLファイルを表示してみる

最後に、設定しておいたGithub Pagesのリンクにアクセスし、追加したindex.htmlが表示されるかどうか確認しましょう。今回の場合は、Pagesの設定画面にあるリンクをクリックすれば、そのまま表示されているかどうかを確認できます。

以下のようなテキストが画面上に表示されていれば、Github PagesでのWEBサイト公開は完了です。

あとは通常のWEBサイトと同じくディレクトリを追加したり、JSやCSSを追加したりして、ポートフォリオページ等を作っていけばOK。それほど難しい手順ではないですね。

いくつかの注意点

Github Pagesは完全無料でWEBサイトを公開できる点は素晴らしいのですが、一方で通常のサービスと違い、一部において制限もかけられています。

最後に、それらの注意点についていくつかご紹介していきます。

PHPなどは原則利用不可

自身への連絡手段として自身のWEBサイトにお問い合わせフォームを設置したり、WordPressなどを用いてメディアを開設したり、様々な場面でPHPなどのサーバサイド言語が利用されていますよね。

しかし、Github Pagesでは、PHPなどの一部サーバサイド言語が機能しない仕様になっています。すなわち、GithubではPHPなどが原則利用できないということです。

これについては、Githubの公式ドキュメントでも言及されています。

WordPressもPHPが無ければ動かないため、メディア運営などにGithub Pagesを用いるのは現実的ではありません。

あくまでも、Github PagesはHTML/CSS/JSで構成されたWEBサイトの運用のみにとどめておくべきでしょう。

商用利用は非推奨

Github Pagesを用いてECサイトを開設しようか悩んでいる方もいるかもしれませんが、GithubではGithub Pages上で決済システムを運用するような、商用的な利用を推奨していません。

商用利用に該当する例としては、以下のようなものが挙げられます。

• ECサイト運営
• アフィリエイト広告の表示
• 寄付などの直接的な受付

ただの注意喚起をしているだけではなく、そういった行為に対して一部ペナルティを課す可能性も利用規約などで示しています。ポートフォリオの運用目的で利用する場合はもちろん問題にはなりません。

その他の禁止事項については、以下の公式ドキュメントで詳しくまとめられているので、一度目を通しておくのがおすすめです。

Github Pagesの使用制限

まとめ

Github Pagesは、「有料のサーバとかを契約するのは嫌だけど、自分のサイトをWEB上に公開してみたい！」という方に適した使い勝手の良いホスティングサービスです。Gitがよくわかっていない方でもマウスで簡単にファイルをアップロードして公開できるので、初心者の方も積極的に利用してみてください。