公式ページ
Gatsby Doc -> Recipes
https://www.gatsbyjs.org/docs/recipes/
項目一覧
- ページとレイアウト
- CSSによるスタイリング
- スターターの使用
- テーマの使用
- データの調達
- データのクエリ
- 画像の使用
- データの変換
- サイトの展開
各項目と内容
- ページとレイアウト
— プロジェクト構造
— ページを自動的に作成する
— ページ間のリンク
— createPageを使用してページを作成する — GraphQLを使用せずにデータからページを作成する — レイアウトコンポーネントの作成 - CSSによるスタイリング
— スタイル付きコンポーネントの使用 — ローカルフォントの追加 — Googleフォントの使用 - スターターの使用
— スターターを使用する - テーマの使用
— テーマスターターを使用して新しいサイトを作成する — 新しいテーマの構築 - データの調達
— ソースノードの作成 - データのクエリ
— ページクエリの使用 — Netlifyへのデプロイ — データのクエリ — StaticQueryコンポーネント — useStaticQueryフックを使用したデータのクエリ — GraphQLによる制限 — GraphQLでの並べ替え — GraphQLを使用したフィルタリング — GraphQLクエリエイリアス — GraphQLクエリフラグメント - 画像の使用
— webpackを使用して画像をコンポーネントにインポートする — 静的フォルダーから画像を参照する — gatsby-imageを使用したローカル画像の最適化とクエリ — gatsby-imageを使用したポストフロントマターの画像の最適化とクエリ - データの変換
- サイトの展開
— 展開の準備
一覧にしてみて
Tutorialが終わったあとぐらいに取り組むとちょうど良さそうだと感じた。 Gatsbyが実際にどのように動いているかの仕組みと、Deployしたサイトを変更したい場合の具体例が多くあるように思う。