HTML
GitHub
Jekyll
dns

GitHub Pagesにカスタムドメインを設定する

More than 3 years have passed since last update.

はじめに

ただでさえ便利なGitHub Pagesですが、カスタムドメインを設定すると便利さが極まって最高になります。

前提

  • レジストラはバリュードメイン
  • GitHubのユーザー名: foo
  • ドメイン名: foo-is.me

として説明を進めます。

GitHub Pagesのカスタムドメインの設定方法

まずはDNSレコードを追加します。今回、ユーザー名fooさんはfoo-is.meというイカしたアドレスを購入したので、ついでにblogというサブドメインを設定することにしました。バリュードメインの場合、DNSレコード追加メニューから次のように設定します。

a @ 192.30.252.153
a @ 192.30.252.154
cname blog foo.github.io.

ブログ用のリポジトリを作成し、リポジトリにCNAMEファイルを置いて完了です。

% git clone https://github.com/foo/blog.git
% cd ./blog
% echo blog.foo-is.me > CNAME
% echo "Yo! Mr. Foo is me!!!" > index.html
% git add -A
% git commit -m 'Add'
% git push origin gh-pages

これでGitHub Pagesにhttp://blog.foo-is-me.comからアクセスできます。

% curl -I http://blog.foo-is.me/
HTTP/1.1 200 OK
Server: GitHub.com
Content-Type: text/html; charset=utf-8
...

CNAMEファイルを設置した後も、通常のURLからアクセスできます。

% curl http://foo.github.io/
Yo! Mr. Foo is me!!!

もうお手軽&便利すぎて、最高という感想しか抱けません。最高です、最高。

リポジトリユーザー名.github.ioにCNAMEを設定した場合

ただし、GitHub Pagesには罠が仕込まれています。例えばfooさんの場合、foo.github.ioというリポジトリを作成し、そこにCNAMEファイルを置いたとします。

% git clone https://github.com/foo/foo.github.io
% cd ./foo.github.io
% echo foo-is.me > CNAME
% echo It works. > index.html
% git add -A
% git commit -m 'Add'
% git push origin master

curlしてみると

% curl -I http://foo-is.me/
HTTP/1.1 200 OK
Server: GitHub.com
Content-Type: text/html; charset=utf-8
...

通常のURLにもcurlしてみます。

% curl -I http://foo.github.io/
HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: http://foo-is.me/
...
% curl http://foo.github.io/
It works.

問題なさそうです。ところが、先ほど設定したblog.foo-is.meにcurlすると...

% curl -I http://foo.github.io/blog
HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: http://fo--is.me/blog
...

このようにfoo.github.ioリポジトリに中身がfoo-is.meというCNAMEファイルを置くと副作用として、他のリポジトリのCNAMEの内容が無視されます。
加えて、HTTP 301 Moved PermanentlyでリダイレクトされるURLは、Locationがfoo.github.io`に置かれたCNAMEの内容を起点とするアドレスに変更されてしまいます。

ユーザー名.github.ioリポジトリの振る舞いに対処する

この現象を回避したい場合、ユーザー名.github.ioにCNAMEファイルを置かなければOKです。
例えばJekyllのリポジトリがそうなっていて、http://jekyllrb.com/http://jekyll.github.io/jekyll/の両方にアクセスできます。

この状態がSEO的にどうなのかは知りませんが、HTMLのheadにcanonicalを設定することで検索結果の重複は回避できます。先ほどのblog.foo-is.meの場合、次のタグを追加します。

  <link rel="canonical" href="http://blog.foo-is.me/" />

これで、http://foo.github.io/blog/http://blog.foo-is.me/が同一のWebサイトと見なされます。ただし、検索エンジンに一度インデックスされてしまった場合、しばらく検索結果の重複が続くかと思います。

Enjoy

ありがたや〜、GitHub Pagesありがたや〜。

参考

  1. About custom domains for GitHub Pages sites
  2. Setting up a custom domain with GitHub Pages
  3. Adding a CNAME file to your repository
  4. Tips for configuring a CNAME record with your DNS provider
  5. Tips for configuring an A record with your DNS provider
  6. My custom domain isn't working
  7. User, Organization, and Project Pages