Noob Front End Engineer Blog

blog

contact

Gatsby セットアップ

Gatsby

2022-11-12

概要

今回のハンズオンでは、公式が用意しているブログ用のテンプレートなどは使用せずに実装を行い

Gatsby Cloud
でホスティングを行い公開できるような形にしていこうと思います。

このセクションでは開発に入る前の下準備や、環境構築を行っていきます。

開発環境

記事作成時の開発環境はこんな感じ。

  • Node version : 16.13.1
  • Gatsby CLI version: 4.24.0
  • Gatsby version: 4.24.4
  • macOS version: 12.5.1

下準備

Gatsby Cloud

Gatsby Cloud : https://www.gatsbyjs.com/dashboard/login

Gatsby Cloud
は、
Netlify
や
Vercel
の様な静的サイトホスティングサービスの一種で
その中でも名前の通り
Gatsby
に特化したサービスです。今回はこちらにデプロイしていくのでアカウント登録しましょう。

Google Analytics

Gatsbyでは初期設定の段階で簡単に

Google Analytics
との連携ができるようになっています。
せっかくブログを公開するのであれば、どれくらいのユーザーが見にきてくれたか分かる方が
モチベーションに繋がるので、登録しておくと良いと思います。

今回はハンズオンなのでこちらはスキップしても良いですが、
Google Analyticsのページからアカウントを登録しておくことをお勧めします。
ブログサイト用のアカウントを作成すると、

トラッキングID
が付与されるので、
こちらをセットアップの際に使用するような形になります。

Git

Gitで空のリポジトリを作成しておきましょう。
今回のハンズオンでは

gatsby-blog-demo
で作成して進めていきますが、
こちらは任意で書き換えていただいてもOKです。

セットアップ

公式のTutorialを参考に進めていきます。セットアップセクションは基本的にコマンドライン操作になります。

Tutorial-0 : https://www.gatsbyjs.com/docs/tutorial/part-0/
Tutorial-1 : https://www.gatsbyjs.com/docs/tutorial/part-1/

Gatsby-CLI
の導入から順に行っていきましょう。

# Gatsby-CLI導入
npm install -g gatsby-cli

# Projectの作成
gatsby new

# Project名の記入
What would you like to call your site?
✔ · gatsby blog demo

# Projectのディレクトリ作成
What would you like to name the folder where your site will be created?
✔ ~/ gatsby-blog-demo

# 今回はTypeScriptを使用
Will you be using JavaScript or TypeScript?
  JavaScript
❯ TypeScript

# 今回はCMSを使用せず、MDXで管理するので 「No」
✔ Will you be using a CMS?
❯ No (or I'll add it later)

# 今回は 「Sass」 を使用
✔ Would you like to install a styling system?
❯ Sass

# 導入するPlaginの選択
(Multiple choice) Use arrow keys to move, spacebar to select, and confirm with an enter on "Done"
◉ Add the Google Analytics tracking script
◉ Add responsive images
◉ Add an automatic sitemap
◯ Generate a manifest file
◉ Add Markdown and MDX support
◯ Add Markdown support (without MDX)

初期導入で選択できるプラグインの詳細はこちら

pluginusedetail
gatsby-plugin-google-analytics◯Google Analyticsとの連携を簡単に行えるプラグイン
gatsby-plugin-image◯細かいその他のプラグインも導入されますが、画像の最適化をおこなってくれるプラグインになります
gatsby-plugin-sitemap◯buildの際にサイトマップを自動で作成してくれるプラグイン
gatsby-plugin-manifest×PWAに自動で対応してくれるプラグイン
gatsby-plugin-mdx◯細かいその他のプラグインも導入されますが、MDXファイルをGraphQLで取得できるようにするプラグイン
gatsby-source-filesystem×細かいその他のプラグインも導入されますが、MDファイルをGraphQLで取得できるようになるプラグイン

これでプロジェクトのセットアップは完了です！
試しにローカルで立ち上げてみましょう。

# 作成したプロジェクト階層へ移動
cd gatsby-blog-demo

# 立ち上げ
npm run develop

Web： http://localhost:8000/
GraphiQL： http://localhost:8000/___graphql

Git紐付け

作成したリポジトリへ紐付け行います。

# リモートリポジトリに紐付け
git remote add origin （作成したリポジトリ）

# gatsby-cliで作成されたプロジェクトはmasterブランチになっているので、mainへ変更
git branch -m main

# リモートリポジトリにプッシュ
git push -u origin main

Gatsby Cloudへデプロイ

Gatsby Cloudへのデプロイ方法は、公式サイトにわかりやすい記載があるので、下記を参考にしてみてください。

Part 1: Create and Deploy Your First Gatsby Site | Gatsby

デプロイができたらセットアップ完了です 💫

次のセクションではMDXで記事を作成してみましょう！

Step3：記事を投稿してみる

参考資料

Gatsby : https://www.gatsbyjs.com/
Tutorial : https://www.gatsbyjs.com/docs/tutorial/

目次