本サイトはプロモーションが含まれています

Gatsby.jsで作ったブログを公開する(ドメイン取得・Netlifyへのデプロイ)

導入

今回は、Gatsby.js で作ったサイトを独自ドメインで公開する手法を紹介します。
そのために、独自ドメインを取得するサイトを比較します。
そして、その取得したドメインで Netlify 上に公開する手法を紹介します。



独自ドメインの取得

サイトの URL に用いる独自ドメインを取得します。
ドメインを取得するサイトは以下のようなサービスがあります。

  • Google Domains (Google)
  • お名前.com (GMO インターネット)
  • ムームードメイン (GMO ペバボ)
  • Xserver Domain (エックスサーバー株式会社)
  • スタードメイン (Netowl)
  • さくらのドメイン (さくらインターネット)
  • Value Domain (GMO Digilock)

また、今回は以下のことを重視します。

  1. 値段
  2. Whois 公開代行の有無

値段

まず、値段です。ここが一番重要といっても過言ではありません(笑)
初年度と 2 年目以降の値段は異なるので、注意が必要です。
取得したい bel-itigo.com で調べてみました。(2022 年 2 月 15 日現在の価格)

サービス初年度費用2 年目以降の費用移管手数料
Google Domains1400 円1400 円1400 円
お名前.com1 円1408 円1 円
ムームードメイン500 円1728 円1728 円
Xserver Domain1 円1298 円1 円
スタードメイン980 円1500 円1200 円
さくらのドメイン1952 円1948 円(2 年目)
1900 円(3 年目以降)
1952 円
Value Domain1130 円1510 円1310 円

キャンペーンもあるのですが、お名前.com と Xserver Domain の安さが際立ちますね。
特に、1 年目の費用が 1 円で収まるのはうれしいです。
(最初のほうはアクセスが少ないと思われるため)
この 2 つの中から選ぶことにします。

Whois 公開代行の有無

Whois 情報とは、ドメインを取得した方の個人情報を誰でも閲覧できるサービスです。
この公開は義務付けられています。
しかし、プライバシー保護の観点から個人情報を隠すため、ドメインの管理会社の情報を代わりに公開してもらうことができます。
これが Whois 公開代行サービスです。
個人でサイトを運営する場合、ほぼ必須です。

サービスWhois 公開代行料金
お名前.com0 円(ドメイン登録と同時で)
Xserver Domain無料

どちらもこのオプションがあるため、問題ありません。
このため、今回は料金が安い Xserver Domain を使うことにしました。
(もっと安い Cloudflare Registrar というものがあるらしいが、英語なので今回はパスします。)

Netlify へのデプロイ

ドメインが取得出来たら、Netlify にデプロイします。
Netlify( https://www.netlify.com/ )に GitHub でアカウント登録し、権限を許可するだけで簡単に連携できます。


あとは、画面に出てくる 3 つのステップを手順に従って行うだけです。

  1. Netlify へのデプロイ
  2. 独自ドメインの設定(ネームサーバーの変更)
  3. https 化(「Verify DNS configuration」をクリックするだけ)

あまりの手軽さに驚きます。


手順がすべて完了し、Lighthouse でスコアを測ってみた結果がこちらです。
lighthouseのスコア
Gatsby+Netlify の組み合わせはすごいですね。
手軽で高速なので、人気が出る理由がわかります。


※2022 年 2 月 20 日修正
このままだと 404 ページが表示されないため、このページの手順に従ってプラグインを追加でインストールしてください。



終わりに

今回は、Gatsby 製ブログを Netlify にデプロイしました。
Gatsby と Netlify を使うことで、手軽に高速なサイトをデプロイできることがわかりました。
デプロイしてうまく動かなかった機能(お問い合わせフォームなど)があるので、次回以降はこの修正方法を紹介していきます。