🌊

ZennのGatsbyJS入門本をやる/やった

2020/12/17に公開

静的サイトジェネレーターのGatsbyJSに入門中です。
まずはGatsby公式のチュートリアルを一通りやりました。
基本的な構成は分かりましたが、もう少し実践的な内容で練習したいと思いました。

Gatsbyの基本的な解説^[1]から始まり、
最終的にコンテンツ管理のHeadlessCMS（Contentful)と
Hostingサイト(Netlify)での自動ビルド＋Publishまでやります。
かなり実践的な構成だと感じました。

成果物

最後までやりきり、Netlifyで公開できました^[2]

Contentfulで記事を追加すると、Netlifyで自動ビルドされ、サイト上にPublishされるのを確認できました。
すばらしい🎉

執筆時からいくつか変化点があるようなので記載しておきます

11章ヒーローコンポーネントの作成
- アバターアイコンを表示するapiadorable.ioは終了しているようです
16章 Contentfulの利用方法
- 2020/12/17現在、Contentfulサインアップ直後にはテスト環境用のスペースとコンテンツが自動で作成されます
- そのまま続行するとGraphQLで思わぬデータが取れるので、まずは自動生成されたスペースを削除します
  - ナビバーのSpace home>画面中央の赤いボタンDelete Spaceを押す
  - こちらの記事に詳しい削除方法が載っています
21章 404ページ
- gatsby buildで環境変数が参照できないためエラー
- .env.developmentをコピーして.env.productionを作成する

完全に理解した気持ちになりましたので、
（HeadlessCMS無し）firebaseHosting + github actionsで自動ビルド/deployという構成で本番行きたいと思います。

脚注