たった５ステップ！Githubの機能「GitHub Pages」でホームページを制作しよう

酒井涼

2017年1月19日

4,590

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
　　
>> 執筆記事一覧はこちら

Web担当者の方であればご存知だとは思いますが、ホームページやランディングページを制作する際、必ず必要になるものの一つに「サーバ」があります。

ただ実際にサーバを準備するといっても、自前で用意するとなると大きな出費が発生しますし、どの企業でも簡単に用意できるものではありません。そこで重宝するのがレンタルサーバです。

レンタルサーバは全く費用がかからないわけではないですが、コストを大幅に抑えられ、管理する手間も省けることから、多くの企業・制作会社ではレンタルサーバを活用しています。
　　

でも実は、もっとオススメしたい手段があります。
それがレンタルサーバなしで無料で簡単にホームページを作る方法です。
AppleやMicrosoftも活用するソースコード共有サービス「GitHub」の機能の一つ「GitHub Pages」を利用し、HTMLファイル等の必要なファイルをGitHubに入れるだけで簡単にホームページが作れてしまいます。

そこで今回は、GitHubの機能「GitHub Pages」を活用したホームページ制作方法をご紹介します。
今後、ホームページ・ランディングページの制作を考えている方、ぜひ一読ください。

参考：
サーバ【Server】｜ferretマーケティング用語辞典
　　

GitHub Pagesとは？

「GitHub Pages」は、「GitHub」を使ってホームページを公開することができる機能です。

ちなみに、GitHubを使っているので、下記のようなメリット・デメリットがあります。

メリット

- Webサーバーが一切不要
- JavaScriptやjQueryも作動する
- GitHubアカウントを持っていれば3～5分程度で公開できる
- 「xxx.github.io」のドメインがもらえる (xxxはあなたのユーザー名)
- ドメイン設定をすれば独自ドメインの使用も可能

デメリット

- GitHubを使っているのでソースコードが公開される
- サーバーに接続する大規模サイトには向いていない
- GitHubを使っているため日本語ローカライズがされていない

つまり、ソースコードを公開しても別に気にしないので、無料でとりあえずホームページを持ちたい、という人に向いています。

GitHubは全て英語で書かれていますが、日本語のリファレンスや解説ブログもたくさん公開されているため、ハードルはそこまで高くはないでしょう。
　　

「GitHub Pages」作成の5ステップ

それでは実際に、GitHub Pagesの機能を使って、ホームページを公開してみましょう。
　　

事前準備

GitHubのアカウントを持っていない場合はGitHub公式サイトから作成します。
ホームページのトップに「ユーザー名」「メールアドレス」「パスワード」を入力することで、簡単にアカウントを作成することが可能です。

ユーザー名がGitHub PagesのURL「xxx.github.io」の「xxx」の部分になり、メールアドレスの認証まで済むと、実際にリポジトリの作成から行うことができます。
　　

1. リポジトリを作成

リポジトリとは、関連するファイルやフォルダをまとめておく、GitHubにおける貯蔵庫のようなものです。
リポジトリ名(Repogitory Name)の欄には、「xxx.github.io」の形で入力し、ログイン後、https://github.com/new にアクセスしてリポジトリを新規作成します。
　　

2. リポジトリをクローン

クローンとは、WebのGitHub上に作成したリポジトリ(リモートリポジトリ)やリポジトリ中のフォルダ・ファイルを、デスクトップにコピーすることです。クローンするには、ターミナルを使ってコマンドを打ち込む方法とGitHubのデスクトップ版ソフトをインストールして行う方法があります。

初心者の方は、リモートリポジトリのフォルダやファイルが可視化されるデスクトップ版がオススメです。
　　

2-1. ターミナルを使う場合

ターミナルを使う場合は、下記のコマンドを参考にクローンします。

$ git clone https://github.com/xxx/xxx.github.io

※ xxxはユーザー名
　　

2-2. GitHubのデスクトップ版ソフトを使う場合

リポジトリを作成した後に現れた画面で、「Set up in Desktop」ボタンを押します。
インストールされていない場合、ダウンロード画面に飛ぶのでデスクトップ版ソフトをダウンロードします。

ソフトを立ち上げた後、左上の「＋」から「clone」を選び、先ほど作成したリポジトリをクローンします。
クローンの際にフォルダを指定しますが、新規でフォルダを作成して指定することも可能です。
　　

3. indexファイルを作成

ここでは、試しにHello Worldを表示させてみましょう。
　　

3-1. ターミナルを使う場合

ターミナルでは、任意のフォルダに移動して「Hello World」を出力させます。

cd xxx.github.io
~$echo "Hello World" > index.html

3-2. GitHubのデスクトップ版ソフトを使う場合

「Hello World」を出力させるHTMLファイルをクローンしたフォルダに入れます。

<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
</body>
</html>

4. コミットして同期

デスクトップで「index.html」を作成した場合、コミットを行います。
コミットとは、ファイルやフォルダの追加・変更をリポジトリに記録することです。

左下のコミット欄に任意でコミット名を入力し、「Commit to master」をクリック。
右上の「Publish」ボタンが「Sync」に変わるので、クリックしてリポジトリと内容を同期します。
　　

5. ブラウザで確認

先ほど作成したURLで確認すると、無事に「Hello World」と表示されたことがわかります。
　　

まとめ

GitHubはソースコードのバージョン管理を行うのに非常に便利なツールです。

それだけではなく、ソースコードをGitHub上に上げることで簡単にホームページを公開できるGitHub Pagesを使うことで、これまでかけていた時間やコストを大幅に削減することができます。

Github Pages examplesのページでは、GitHub Pagesを使ってホームページを作成したサイトが掲載されています。

ぜひこれらも参考にしながら、ユニークなホームページを公開してみてください。
　　