Think Big Act Local

iPhone開発を軸にブレブレの記事を書いていきます。

GitHub Pages でWebサイトをホスティングする(独自ドメイン使用)

f:id:himaratsu:20141008181608p:plain

最近、iOS.zipというWebサイトホスティングGitHub Pages運用に変更しました。
簡単に設定できてしかも無料ということで今後も使う機会は多くなりそうです。

後で見返すときのために、設定の手順を記録しておきます。
(2014/10/16 現在の手順です)

GitHub Pagesって?

GitHubリポジトリから直接ホスティングできるサービスです。
裏でPHPとかが動かない、静的なページを簡単に構築することができます。

公式のチュートリアルは以下です。とても詳細に作られています。

こちらを参考に設定をすすめたメモを書いていきます。

やったこと

  1. ioszip というOrganizationを作成
  2. ioszip/ioszip.github.io というリポジトリを作成(ここでGitHub Pagesを使う)
  3. GitHub Pagesの設定
  4. 独自ドメインを設定

1.ioszip というOrganizationを作成

f:id:himaratsu:20141013034411p:plain

↑の画像の一番下の「Create organization」から作成します。
名前はなんでも良いですが、iOS.zipの場合はioszipにしています。

2. ioszip/ioszip.github.io というリポジトリを作成

f:id:himaratsu:20141013041444p:plain

リポジトリ名を {organization_name}.github.io としてリポジトリを作成します。
iOS.zipの場合は ioszip.github.io という名前で作ることになります。

リポジトリが作成できたら、ホスティングさせたいファイル群をpushします。ルートはindex.htmlになります。

3. GitHub Pagesの設定

リポジトリの設定の下側に「GitHub Pages」という項目があります。ここで表示用URLを確認します。

f:id:himaratsu:20141013034915p:plain

ドメインを設定しているためカスタムドメインhttp://ioszip.mashroom.in )となっていますが、ここにはおそらく http://{organization_name}.github.io のようなURLが表示されているはずです。

表示されているURLに早速アクセスしてみると、

f:id:himaratsu:20141013035107p:plain

上記のような404ページが表示されてしまうと思います。
pushしてから反映まで5-10分ほどかかるようですので、少し待ちましょう。

4.独自ドメインを設定

さて、表示の確認ができたらカスタムドメインを設定します。
今回は、http://ioszip.github.ioにアクセスしたらhttp://ioszip.mashroom.inを表示するように設定します。

4-1.DNS側の設定

お名前.comやムームードメインなど、独自ドメインを取得した側での設定です。
CNAMEを選択し、値を記述する箇所に手順3で確認した表示用URLを入力します。

iOS.zip の場合は ioszip.github.io を入力しました。

自分の場合は Dozens.jp を使って設定したのですが、そのときの画面がこちらです。

f:id:himaratsu:20141013040508p:plain

Dozens(ダズンズ)は読みにくいですがとても使いやすいサービスだと思います。

https://dozens.jp/

https://dozens.jp/

4-2.GitHub Pages側

GitHub Pages 側の設定です。 こちらは簡単で、CNAMEというファイルを作成し、元のURLを記述してpushします。

iOS.zip の場合は ioszip.mashroom.inとだけ書かれたCNAMEという名前のファイルを作りました。実物はこちらになります: https://github.com/ioszip/ioszip.github.io/blob/master/CNAME

4-3.少し待つ

DNSの設定が反映されるまでには少し時間がかかります。
少し時間をおいてから反映されたことを確認しましょう。

まとめ

GitHub Pages でWebサイトをホスティングする方法についてのまとめでした。
アプリのランディングページ等の用途にはこの方法で十分対応できそうです。

バックエンドを伴った動的なサービスもHerokuで作れてしまいますし、とりあえずサーバーを持たずに出来ることがとても増えていて助かりますね。

おまけ

今回題材となったiOS.zipはこちらからご利用頂けます。

iOS.zip | iOSアプリ申請に必要な素材を1clickで用意

関連リンク

関連書籍