GitHub Pages でWebサイトをホスティングする(独自ドメイン使用)
最近、iOS.zipというWebサイトのホスティングをGitHub Pages運用に変更しました。
簡単に設定できてしかも無料ということで今後も使う機会は多くなりそうです。
後で見返すときのために、設定の手順を記録しておきます。
(2014/10/16 現在の手順です)
GitHub Pagesって?
GitHubのリポジトリから直接ホスティングできるサービスです。
裏でPHPとかが動かない、静的なページを簡単に構築することができます。
公式のチュートリアルは以下です。とても詳細に作られています。
こちらを参考に設定をすすめたメモを書いていきます。
やったこと
- ioszip というOrganizationを作成
- ioszip/ioszip.github.io というリポジトリを作成(ここでGitHub Pagesを使う)
- GitHub Pagesの設定
- 独自ドメインを設定
1.ioszip というOrganizationを作成
↑の画像の一番下の「Create organization」から作成します。
名前はなんでも良いですが、iOS.zipの場合はioszip
にしています。
2. ioszip/ioszip.github.io というリポジトリを作成
リポジトリ名を {organization_name}.github.io
としてリポジトリを作成します。
iOS.zipの場合は ioszip.github.io という名前で作ることになります。
リポジトリが作成できたら、ホスティングさせたいファイル群をpushします。ルートはindex.html
になります。
3. GitHub Pagesの設定
リポジトリの設定の下側に「GitHub Pages」という項目があります。ここで表示用URLを確認します。
ドメインを設定しているためカスタムドメイン( http://ioszip.mashroom.in )となっていますが、ここにはおそらく http://{organization_name}.github.io のようなURLが表示されているはずです。
表示されているURLに早速アクセスしてみると、
上記のような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 を使って設定したのですが、そのときの画面がこちらです。
Dozens(ダズンズ)は読みにくいですがとても使いやすいサービスだと思います。
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で用意
関連リンク
- GitHub公式のカスタムドメイン設定方法
- GitHub Pagesで独自ドメインを使う方法 - AwAlog