Notion Blog に独自ドメインを当てる（Vercel (旧 Zeit Now) + お名前.com）【Notion Blog 徹底解説 #2】

（タイトルがとても長くなってしまった）

前回の記事（Notion Blog でブログを開設する【Notion Blog 徹底解説 #1】）では、Notion Blog の開設方法について解説しました。このままでも十分ブログとしての機能は使えるのですが、デフォルトの状態だとドメインが Vercel から自動で割り振られるものになってしまい、少し不格好な状態です。どうせならカッコいい独自ドメインに変更したいですよね。

ということで今回の記事では、お名前.com で独自ドメインを取得して、Notion Blog に独自ドメインを当てる方法の解説をしたいと思います。ちなみに費用感を先に書いておくと、かかる費用はドメイン代のみ（取得するドメインにもよりますが、年間数千円程度？）で、ドメイン割り当てなどにかかる費用は無料です。

お名前ドットコムでドメインを購入する

今回はお名前ドットコムでドメインを購入することにします。サイトのトップに、ドメインの検索ボックスが表示されているので、ここに自分の取得したいドメインを入力して、検索します。

検索すると、以下のような画面になり、該当ドメインが取得可能かどうかが表示されます。通常のチェックボックスになっているもの（メールアイコンや、Pマークが付いているもの、バツマークになっているもの以外）がすぐに取得可能なドメインです。

取得したいドメインにチェックを入れ、「料金確認へ進む」をクリックしましょう。（ここから先は、支払情報を入力して、購入処理をするだけなので、割愛します。）これで、ドメインの購入が完了です。独自ドメインを手に入れることができました。

お名前ドットコムの設定をする（DNS 設定）

次に、お名前ドットコムで DNS 設定をしていきます。お名前ドットコムでドメインを取得すると、デフォルトでお名前ドットコムの DNS を使用する設定になっているので、これを Vercel の方に移し替える設定をします。（もう一つ ANAME を使用した方法もあるのですが、今回は、Vercel が推奨している DNS を移し替える方法を採用します。こちらの方がより高いパフォーマンスが期待できます。）

⚠ 2020/05/24 時点での画面スクリーンショットなので、今後のデザイン変更があるかもしれません。（というかけっこうあるイメージ）変更があった場合は、適宜読み替えてください。

お名前ドットコムにログインし、DNS タブから「ドメインのDNS関連機能設定」を選択します。

サイドバーの「ネームサーバーの変更」をクリックします。

今回取得したドメインを選択し、ネームサーバーの選択から「その他のネームサーバーを使う」を選択してください。ここのネームサーバー1, 2, 3, 4 にそれぞれ以下を入力してください。

JavaScript
1. a.zeit-world.co.uk
2. b.zeit-world.org
3. d.zeit-world.net
4. f.zeit-world.com

Vercel のネームサーバー情報は、以下のページに掲載されています。

https://vercel.com/docs/v2/custom-domains

ネームサーバー情報を確認し、以下のようになっていれば設定が完了です。これでお名前ドットコム側の作業は完了です。

Vercel 側でドメインを追加する

Vercel にログインし、作成したプロジェクト内の Settings タブに移動します。サイドバーの Domain をクリックすると以下のような画面になります。ここに、先程お名前ドットコムで取得したドメインを入力し、Add をクリックするとドメインが追加されます。

追加が完了すると、以下のような画面になり、ドメインが追加されたことが分かります。（スクリーンショットはサブドメインが割り当てられていますが、通常のドメインの場合も操作は同じです）

その後、自動で割り振られたドメインの方にはリダイレクト設定をしておくのをオススメします。自動で割り振られたドメインの Edit をクリックし、Redirect to のところに、割り当てたドメインを入力しておくと、自動で割り振られたドメインにアクセスした際も、独自ドメインの方にリダイレクト処理が行われるようになります。

🚀 完成

これで無事、Notion Blog で開設したブログに独自ドメインを当てることができるようになりました！みなさんも Notion Blog でブログを開設したら、独自ドメインを当ててみてください！（Notion Blog というより、お名前ドットコムと Vercel の使い方の解説になってしまった……）

分からないところとかあったら、お気軽に @___35d までリプライください〜。もしよければ下のボタンから、記事のシェア等してもらえると喜びます！