Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@ferretdayo

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

More than 1 year has passed since last update.

概要

今回は、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

9
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
ferretdayo
初心者です///
idom
自動車流通業界の常識を覆すビジネスに挑戦し、ITを活用して移動という手段に新たな価値を創出することをミッションとしています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
9
Help us understand the problem. What is going on with this article?