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

// 🙎‍♂️ Yuji Tsuburaya📆 May 24, 2020🔖 Notion BlogNotionnow

(タイトルがとても長くなってしまった)

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

Vercel デフォルトのドメインが当たっている
Vercel デフォルトのドメインが当たっている

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

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

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

お名前ドットコム トップページ
お名前ドットコム トップページ

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

お名前ドットコム 検索結果
お名前ドットコム 検索結果

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

お名前ドットコムの設定をする(DNS 設定)

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

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

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

ドメインのDNS関連機能設定

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

ネームサーバーの変更
ネームサーバーの変更

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

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 のネームサーバー情報

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

お名前ドットコム DNS 確認画面
お名前ドットコム DNS 確認画面

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

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

Vercel カスタムドメイン設定画面
Vercel カスタムドメイン設定画面

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

Vercel カスタムドメイン追加後
Vercel カスタムドメイン追加後

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

Vercel リダイレクト設定
Vercel リダイレクト設定

🚀 完成

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

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

✍️ Notion Blog のカスタマイズ方法まとめ

広告

書いた人

___35d

Yuji Tsuburaya (@___35d

👩‍💻 Frontend Engineer

🏢 J-CAT CTO Co-Founder / ex. BizReach

🎨 by @ch1ch1ch1_123

💚 Minimalism / Notion / Figma

📱 Author of @FastNotion

広告