Skip to content

Instantly share code, notes, and snippets.

@nobuh
Last active March 9, 2020 04:57
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nobuh/d720d2ba66a30cf914a8 to your computer and use it in GitHub Desktop.
Save nobuh/d720d2ba66a30cf914a8 to your computer and use it in GitHub Desktop.
github pages を活用した独自ドメインのWebサイトホスティング

GitHub Pages を使って無料でWebサイトを運営する

自分コンテンツ

最近書いてないけど Wordpress.com にブログは持っていたり、一応GutHubに自分以外のユーザーもいた事があるソフトを公開している。Twitterのツイートもある。限られた自分の時間で発信していることだし、そろそろ自分ドメインで自分のコンテンツをちゃんと集約化したいなと思いました。

でも運用が面倒

普段サーバー関係の仕事をしているので、Wordpress や他の CMS をいれたりするのは出来ると思いますが、今のところ静的なコンテンツのみの想定だし、CMS だと機能が豪華すぎます。またバックアップやセキュリティ対策などレンタルサーバーであってもちゃんと運用するにはそれなりの手間(コスト)がかかります。ここはコストをかけずにもっとコンテンツだけに集中したいとおもうようになりました。

また私の所有マシンの構成ですが、昔のネットブックをシンクライアントとして使い、趣味の開発などは VPS をつかっています。VPS は OS 変更などもちょくちょくしてる自分のメイン開発マシンなのでサイトの定常運用は避けたいという事情があります。

プロジェクトゴール

ということで無料サービスを使ったサイト運営に挑戦することにしましたが、遊びにもルールがあるように自分のプロジェクトもゴールをちゃんと決めておいた方がやる気が出るような気がしたので改めて宣言します。

  1. Webサイトは無料サービスをつかう。
  2. 自分のサーバーの使用は最小限にする。

無料でWebサイトを持てるサービスはいくつもありますが、無料のまま自分独自のドメインでそれを運用出来るサービスとなると限られてきます。著名な所では Google Site と GitHub Pages があります。クラウドのサービスを選ぶ際の自分なりのポリシーとしてサービスが急に打ち切られてもこまらないように

  • 代替サービスやソフトの存在度
  • いざとなれば自分で立てられるようなシンプル度

を重視するようにしています。そこで今回の無料ホスティングとしては GitHub Pages 使うことにしました。

GitHub Pages でサイトを作る

のはとても簡単です。まずは

  1. アカウント名.github.io というリポジトリを作ります。それから git で clone してごにょごにょするのが正しい使いかただと思いますが、さらにお手軽さを追求します。
  2. アカウント.github.io リポジトリにアクセスして、右側のメニューにある "Setting" をクリックします。
  3. 次に、"Settings" "Features" の下 "GitHub Pages" のブロックにある "Automatic Page Generator" をクリックします。
  4. 出てきたオンラインエディタで、トップページをそのままマークダウンで記述します。
  5. "Continue to Layout" ボタンを押して
  6. 好きなテーマを選びます
  7. "Publish"

これで完成。アカウント.github.io の静的なページとしてこれで完成しました。

独自ドメインを取得しドメインのDNS情報を設定する

そして次に本題ともいえる自分専用の独自ドメインを取得するわけですが、無料で構築する、ミニマム指向な場合に注意しなくてはならないのが DNS情報を設定出来るサービスを選ぶこと です。とは言っても心配することはなく、大抵のドメイン取得サービスではDNS設定機能、つまりネームサーバーへの登録機能は提供していますので、そんなに心配することもありません。そして、どのサービスでドメインを取得してもいいのですが、当プロジェクトではあくまでも無料であることにこだわってみたかったので

  1. 技術的に稼働が安定している
  2. サービスの持続性で実績がある。(簡単に言ってしまうとなくなることなさそう)

という点を考慮してダイナミックDNSサービスの老舗、MyDNS.jp を使うことにしました。

MyDNS 設定あれこれ

メールを使ってアカウントを登録すると、次はドメインの取得です。MyDNS で取得出来るドメインは XXXX.YY のようなよくある形式のドメインではなく、そのサブドメインのような WWW.XXX.YYY の形式のものになります。また当然のことながら MyDNS さんが所有しているドメイン形式のものの中から選ぶことになります。ということで実際に設定&取得していきます。MyDNS の "DOMAIN INFO" メニューで、取得したいドメインを含め、設定したいサブドメインなども一括して入力します。私の場合は live-on.net のフォーマットで nobuh.live-on.net というのを使ってみることにしました。ダイナミックDNSである MyDNS の場合はドメイン自体に対しては IP アドレスを直接紐付ける A レコードを自分から通知することで設定しなくてはなりません。それについては後述します。

Zone Apex または裸のドメイン

www. で始まるサブドメインではなく、例えば google.com など Zone Apex あるいは Naked Domain といわれているドメインそのものに対しては、ホストネームで差し示すDNSの CNAME レコードはプロトコル上使えません。今回 Web サイトとして使いたいのは GitHub Pages の ACOUNT.github.io という形式のホスト名です。これは ip アドレスは固定されていませんので、このままではドメインに対して直接 GitHub Pages を指し示すことは出来ません。Zone Apex に対してAmazon Web Service の Route53 のように Alias という形で実態としては IP アドレスを差し示す A レコードなのにホスト名で設定出来る機能が提供されていればその限りではありませんが、無料サービスでそこまで要求するのは酷だろうと思い、今回は www.nobuh.live-on.net というサブドメインを GitHub Pages に割り当てることにしました。具体的に  DOMAIN INFO のページで取得、指定した項目は以下になります。

Domain (FQDN) 
nobuh.live-on.net
MX 
空白
Hostname*, Type*, Content, Delegateid or your id. (Hostname is not FQDN)
www    CNAME       nobuh.github.io

独自ドメインの取得と GitHub Pages への指定は完了したことになりますが、MyDNS の場合はそもそもどこかの IP を常に通知して登録を活かしてあげなくてはなりません。基本的にはどこの IP を通知してもよいのですが、www なしの nobuh.live-on.net でのアクセスも必要なら www に誘導したいので、開発用 VPS の IP を通知することにしました。方法は簡単で、IP 通知したいサーバー上で curl でベーシック認証の上でログインアクセスさせる以下の cron を適切な間隔(1日1回とか?)で実行するだけです。(大文字の実行日時やユーザーのところはご自分の環境に合わせてください)

MM HH * * * curl --user mydnsXXXXXX:YOUR_PASSWORD http://ipv4.mydns.jp/login.html

これで取得したドメインのサブドメイン www.nobuh.live-on.net で GitHub Pages nobuh.github.io に飛び込むようになりました。あともう一息。そして

GitHub Pages でも独自ドメインのことが設定されていないと

いけません。これは GitHub側の Web サーバーでも、アクセスしてきた HTTP のヘッダーに応じてさまざまな処理をしていますので、なんでもいいから来たリクエストを受け付けられるわけでありません。ACCOUNT.github.io のサイトに到着したリクエストに書かれている別のホスト名、私の場合は www.nobuh.live-on.net あてのもの、を正しく処理できるようにするにはそれが事前に設定されていなければなりません。これを可能にするのが CNAME ファイルの作成です。

CNAME ファイル作成

正しいやり方は git clone したリモート先で追加してオリジンにpushとかになると思いますが、もっとカジュアルな方法でやります。自分の github.io ページにいくと、リポジトリのブランチ選択など出来る名前表示のところに + 記号があります。ここにマウスポインタをもっていくと "Create a new file here" と説明されます。実はこの + ボタンをクリックするとそのまま Web 上で新規にファイルを作成することが出来ます。これを使って大文字で CNAME というファイルを作成し、割り当てたいサブドメインを記述します。私の場合はこれだけです

www.nobuh.live-on.net

以上ですべて完了。無事独自サブドメインで GitHub Pageに飛び込むようになりました。そしてドメイン自体をサブドメインにリダイレクトさせる方法については、また別の機会ということで。。。。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment