GitHub Pagesを使って無料でWebサイトを作る方法

今回はGitHub Pagesというサービスを使用して、サーバ代などのかからないWEBサイトの作る方法について紹介します。

Github Pagesとは?

「GitHubって何?」という方は、こちらの記事を参照してください。

ギットハブ!?ソースコード共有サービスGithubとは?

2018.09.22

GitHub pagesは、GitHubリポジトリを使用して個人または団体のホームページを無料で公開することができるサービスです。

通常Webサイトは、ホスティングサービスやWebサーバを借りて使用料を支払うか、何かしらのプラットホームの一部として公開する方法があります。

サーバを借りるメリット・デメリット

Webサーバを借りてホームページを公開する際のメリットは、自分でページを管理編集できることです。そのため凝ったデザインや機能を自分で導入することが出来ます。

逆にデメリットは、サービスを使うためにお金がかかるということです。サーバサイドの機能を実装する場合は、Webサーバをレンタルするために最低でも月額600円くらいはかかります。フロントエンドの機能だけでいいという場合にもページをホスティングするサービスの利用料がかかります。

プラットホームを使うメリット・デメリット

はてなブログやFC2ブログなど、無料でページを公開することのできるサービスはネット上に溢れています。

このようなプラットホームを使用してページを公開するメリットは、管理を行う必要がないうえに無料で使えるという点です。要は手軽に始められるということです。

デメリットは、自分でカスタマイズできる点が少ないということです。

特に凝ったサイトを作るわけじゃないという人はこのようなサービスを使うことをお勧めします。

GitHub pagesは?

レンタルサーバとプラットホームについて説明しましたが、GitHub pagesはこれらのいいところを両方くっつけたようなサービスてす。

GitHub pagesはWebサイトを

  • 無料で
  • 自分で作れる

サービスです。

使い方

リポジトリ作成

まずはページを公開するためのリポジトリを作成します。

GitHub pagesは、特定のリポジトリにあるソースコードを読み込んで、Webサイトとして公開します。

リポジトリ作成画面から <ユーザーネーム>github.io というリポジトリを作成してください。GitHub pagesは、このリポジトリに置かれたindex.htmlファイルを読み込んでページとして公開します。(ユーザーネームには自分のユーザーネームを入れます。)

index.htmlファイルをリポジトリ以下に設置して、https:<ユーザーネーム>.github.io/ にアクセスしてみると、ブラウザ上で表示されると思います。

https・ドメイン設定

これまでの操作でGitHub pages上でWebサイトを公開することは出来ました。しかし、実際のサイトとして運用するためには、httpsに対応させて、独自ドメインを指定したいという場合が多いと思います。次はこの方法について説明します。

Https設定

<ユーザーネーム>github.ioのリポジトリに移動したら、settingタブを開いてください。下の方にスクロールしていくと、GitHub pagesの設定が現れると思います。(この項目は通常のリポジトリでは表示されません。)

この中の一番下の項目で、enforce Httpsというチェックボックスがあると思うので、これにチェックを入れてください。

再度httpのURLにアクセスしてみると、前回はhttpのアクセスも処理されていましたが、先程項目にチェックを入れたことによって、強制的に全てのhttpリクエストがhttpsにリダイレクトされるようになりました。

独自ドメインの設定

再度リポジトリのsettingタブを開いてGitHub pagesの項目までスクロールします。

独自ドメインを設定するためには、enforce HTTPSの上にあるcustom domainという項目に独自ドメインを入力する必要があります。

ネームサーバの設定

独自ドメインを設定するためには、お名前.com等でドメインとアドレスの関連付けを行う必要があります。

サーバのIPアドレスを調べる

https://www.cman.jp/network/support/nslookup.html

こちらのサイトに<ユーザーネーム>github.ioを入力するか、digコマンド等を使ってIPアドレスを調べます。

お名前ドットコムで取得した独自ドメインをawsのec2サーバに割り当てる方法

2018.09.15

まとめ

GitHub pagesは無料でホームページを公開することができるサービスです。無料でとりあえずホームページを作りたいと言う人は是非使ってみてください!

お仕事決まれば全額キャッシュバック!転職特化型Ruby実践研修【ポテパンキャンプ】
集中的な8週間のマンツーマン訓練で、最先端のAIエンジニアを目指す
受講者満足度も90%以上!【WebCamp】
【WEBCAMP ONLINE】
未経験のITエンジニア転職なら【TECH::EXPERT】

 

ABOUTこの記事をかいた人

「お金をかけないサバイバル術」に関する記事を書きます。証券アナリスト資格(CCMA)を持っています。Ethereum信者です。温泉と餃子とv系バンドが好きです。プログラミングが得意です。趣味はメルカリです。好きな言葉は「最小構成」