Netlifyに独自ドメインを設定する

やること

ドメインを購入して、Netlifyに設定。
DNSの設定と、プロジェクトにリダイレクトの処理ファイルを追加とconfigに指定した自サイトのurlを変更。
あと自分の場合は、GoogleAnalyticsと、GoogleSearchConsoleの登録URLの変更も対応。

google domainでドメイン購入

https://domains.google

にアクセスして、ドメインを購入する。

取得したいドメインで検索する。

候補が出てくるので、カートに入れて決済画面に進んで購入手続き。

サクッと購入手続きできて良い。

ちなみに、すでに誰かに取得されているものは、購入できない状態になっています。

例）tenkinoko.com

Netlifyの管理画面で購入したドメインを設定

Custom Domains を設定する。

Verifyする。

DNS設定しろと、警告出るので、ドメイン取得したサイト（GoogleDomain）の管理画面で設定して対応する。

Google Domainの管理画面でDNS（URLとIPアドレスの関連）を設定

以下のように設定

参考サイト

https://aakira.app/blog/2018/07/googledomains/

新URLで、アクセスして表示されることを確認する。 　　　

また、再度Netlifyの管理画面を再度ロードして、以下のように警告がなくなっていることを確認

リダイレクトの設定ファイルをプロジェクトに追加する

旧URLにアクセスされた場合、旧URLから新URLへ飛ばすリダイレクト対応をする。

旧URL：https://kioteratech.netlify.com/

新URL：https://kiotera-tech.com/

Netlifyの管理画面にリダイレクトする場合、ファイルを追加とあるのでそれにそって対応する。

static/配下に、 _redirects ファイルを作成し、以下をコピペ

# These rules will change if you change your site’s custom domains or HTTPS settings

# Redirect default Netlify subdomain to primary domain
https://kioteratech.netlify.com/* https://kiotera-tech.com/:splat 301!

pushしてDeploy完了後に、旧URLのツイートから遷移して、新URLにリダイレクトされていることを確認する。

GatsbyTutorialやってみて、をまとめました。

個人的にお得感ある内容だった。
Gatsbyやりはじめの人にはおすすめ！
（Chromeの日本語翻訳使いつつやりました）

一点ハマりどころがあり、npm でなく、yarn add 使って対応しました。https://t.co/W0ePqwawIk#gatsbyjs

— きおてら GatsbyJSいじいじ (@kiotera_tech) August 23, 2019

プロジェクトのconfigファイルに定義している自サイトのURLを変更

config.js の　url の値を新URLに変更

GoogleAnalyticsのURL変更対応

以下の２箇所のURLを変更する

• プロパティの設定 -> URL

変更して「保存」

• ビューの設定 -> URL

変更して「保存」

googleSeachConsoleの新URLのドメイン登録対応

やってみて

GoogleDomainsで独自ドメイン購入の手続きが思ったより簡単だった。 ネット通販で商品買うのと同じフローで、住所等登録して、クレカで購入なのでサクッと購入できた。 DNSの設定などは、調べながら実施。
Google関連のツールの登録URL変更もサクッとできるので、特にハマるようなことはなかった。
これでサイト全体がGoogleにindexされたので、検索流入が増えるはず（たぶん）。