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

1 min read読了の目安(約1200字

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

よさそうな記事が無いか調査したところ、
ちょうどZennでGatsby無料本が公開されていました…これはありがたい🙏

https://zenn.dev/tomokiya/books/4b13342f6d878b93e06c/viewer/aad1360798a7673ffe02

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という構成で本番行きたいと思います。

脚注
  1. 公式チュートリアルとほぼ同じです ↩︎

  2. コンテンツはダミーしかないのでURL記載しません😥 ↩︎