Help us understand the problem. What is going on with this article?

GatsbyとNetlifyを用いて爆速でブログの公開

概要

今回は、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
アクセスするとこちらの画面が表示されます。

image.png

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

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

その後ダッシュボードが表示され、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
image.png

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

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

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

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

生成後は以下のようにDNSレコードが増えていると思います。
image.png

これで設定は終わりです。

3. Secure your site with HTTPS

ボタン押せばLet's EncriptでHTTPSの設定をしてくれます。めちゃ簡単ですね。
image.png

デプロイしたアプリを確認

設定したドメインにアクセスすると、無事デプロイされていると思います。
image.png

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away