概要

今回は、Reactベースの静的サイトジェネレータのGatsbyと、サイトを公開するためのNetlifyを利用して、爆速でWebアプリケーションをデプロイする方法について書きます。
※ブログはテンプレートのままでデプロイしています。

プロジェクトの作成

Gatsbyはテンプレートを選んでプロジェクトを作成することができます。
今回はNetlifyのテンプレートがあるため、そちらを利用していきます。
それ以外のテンプレートはこちらから探すことができます。

# GatsbyのCLIのインストール
npm install -g gatsby-cli

# プロジェクトの作成
# gatsby new [プロジェクト名] [GatsbyのテンプレートのGitHubのurl]
gatsby new ferretdayo.blog.io https://github.com/netlify-templates/gatsby-starter-netlify-cms

Netlifyへのデプロイ

以下のURLにアクセスしてNetlifyにデプロイするための準備をしましょう。
https://app.netlify.com/start/deploy?repository=https://github.com/AustinGreen/gatsby-starter-netlify-cms&stack=cms
アクセスするとこちらの画面が表示されます。

ここのページでやってくれることは、以下の２つです。
1. GitHubとNetlifyの連携
2. GitHub上にNetlifyにデプロイしてくれるレポジトリも作成

ここにレポジトリ名を記入すると、GitHubにレポジトリが作成されます。

その後ダッシュボードが表示され、Getting startedの通り進めていきましょう。

1. Your site is deployed

作成したレポジトリに対してpushしましょう。

cd [作成したGatsbyのプロジェクト名]
git init
git remote add origin [対象のレポジトリのURL]
git push origin master

2. Custom domain is set

ドメインを持っていない場合は、やらなくてもいいです。
わたしは、お名前.comでドメインを取得している場合で書いているため、お名前.comではない方はご注意ください。

1.まずはじめに、こちらから所有しているドメインを打ち込みましょう！
https://app.netlify.com/account/dns/setup

2.次のDNSレコードの設定は放置します。

3.お名前.com側のネームサーバを設定します。
Netlifyから以下の４つをネームサーバ変更してくださいと言われるため、お名前.comのネームサーバを変更します。

このように、お名前.comのネームサーバの変更から設定します。

4.Netlify側でDNSレコードを作成します。
Settings > Domain ManagementからDNSの設定ページを開きます。
Check DNS configurationをクリックするとモーダルが出るので、Create DNS Recordsを押してDNSレコードを生成しましょう。