Netlifyへ新規Gatsbyサイトをデプロイする

6924 ワード
gatsby React Netlify React テキストリンク

最近Gatsbyをさわることがあって他にもいろいろ試したいので、"新規サイトをローカルで生成してNetlifyへのデプロイ"までを忘れないようにメモしました。

NetlifyとGatsby

Netlify

Netlifyは静的サイトのホスティングサービスです。

  • 無料で使い始めることができる
  • 結びついているgitリポジトリにpushすると自動で最新バージョンのサイトをビルドできる

という特徴があり、プロトタイピングに便利です。

Gatsby.js

静的サイトジェネレータの1つ。こちらがとても詳しいです。

環境など

  • macOS Catalina
  • Node.js v12.18.3
  • GitHubでリポジトリを作成してローカルからpushできる状態にある

ローカル開発用にセットアップ

バージョン2.27.0で搭載されたインストール方法を使ってみます。

npm init gatsby

いくつかの質問が続くので答えていきます。


#名前を聞かれる デフォルト名"My Gatsby Site"でよければそのままEnter
What would you like to call your site?
✔ · My Gatsby Site
#以下の3つの質問はそのままEnterで進む
What would you like to name the folder where your site will be created?
✔ node/ my-gatsby-site
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· No (or I'll add it later)


#この質問は複数選択 なにも選択しないので↓キーでDoneまで進めてEnter
? Would you like to install additional features with other plugins?
(Multiple choice) Use arrow keys to move, enter to select, and choose "Done" to confirm your choices
 ◯ Add the Google Analytics tracking script
 ◯ Add responsive images
 ◯ Add page meta tags with React Helmet
 ◯ Add an automatic sitemap
 ◯ Enable offline functionality
 ◯ Generate a manifest file
 ◯ Add Markdown support (without MDX)
 ◯ Add Markdown and MDX support
  ─────
❯ Done


Thanks! Here's what we'll now do:

    🛠  Create a new Gatsby site in the folder my-gatsby-site

? Shall we do this? (Y/n) › Yes
#最後にこのプロンプトで止まるのでそのままEnter

うまくいくと以下のメッセージがでます。

🎉  Your new Gatsby site My Gatsby Site has been successfully created

サイト確認(ローカル)

npmも使えますが今回はyarnを使ってます。

開発モードで確認

#上記設定で作成されたディレクトリへ入る (上記デフォルトのままだとmy-gatsby-site)
cd my-gatsby-site
#開発モードでサイトのサーバ起動
yarn develop

メッセージが多く出ると思いますが、通常

You can now view my-gatsby-site in the browser.
⠀
  http://localhost:8000/

が含まれていると思います。http://localhost:8000/へアクセスすると現状のサイトを確認できます。

サーバの終了はcontrol+Cです。

本番用サイトを生成して確認

#本番用サイトを生成
yarn build
#生成された本番サイトをローカルサーバで起動
yarn serve

開発内容によってはビルド段階でエラーがでることがあるので、デプロイ前に上記コマンドで一度ローカル確認したほうがいいです。
問題なければ以下の出力がでてアクセスできるようになります。

You can now view my-gatsby-site in the browser.
⠀
  http://localhost:9000/

これもサーバの終了はcontrol+Cです。

デプロイ

Githubにプッシュ

githubに新規リポジトリを作ったあと、ローカルからプッシュします。

Netlify

アカウントがない場合は sign up からアカウント作成できます。自分はGitHubアカウント認証で作りました。

ログイン直後のホーム画面にある New site from Git をクリック

Create a new site の画面になるのでGitHubのボタンをクリック

GitHubリポジトリの詳細設定に移ります。先程作成したリポジトリが所属するGitHubアカウントをクリック。

GitHubへのnetlifyプラグインのインストール設定になります。Only select repositoriesを選択 -> select repositories で先程作成したリポジトリを選択。netlifyがGitHubへ接続する際のアクセス設定について説明されているので、これで問題なければInstallをクリック。

もう一度Create a new site の画面になるのでGitHubのボタンをクリック。
先程追加したリポジトリが追加されているはずなのでそれをクリック。

デプロイ設定に移るが、Netlify側で自動設定しているようで通常は下記のようになる。そのまま Deploy Site をクリック。

Site deploy in progressはデプロイ進行中。デプロイが終わると表示がURLに変わってアクセス可能になります。

参考文献