【日記】Gatsbyの勉強⑮

引き続きGatsbyのチュートリアルの続きをやっていきます。
ここまでくるとだいぶ基本的なことが分かってきました。

Gatsby.js Tutorials

Gatsby fundamentals（基礎）
0. Set up your development environment
1. Get to know Gatsby building blocks
2. Introduction to using CSS in Gatsby
3. Building nested layouts in Gatsby
Intermediate tutorials（中級編）
4. Querying for data in a blog
5. Source plugins and rendering queried data
6. Transformer plugins
7. Programmatically create pages from data　←　今ここ
8. Preparing a site to go live
Plugin & Theme tutorials（プラグインとテーマについて）
9. Creating a Source Plugin
10. Creating a Remark Transformer Plugin
11. Using a Theme
12. Using Multiple Themes Together
13. Building a Theme
Additional tutorials（付録的な感じ）
14. Using Gatsby Image with Your Site
15. Making a Site with User Authentication
16. Making an E-commerce Gatsby Site with Stripe
17. Building an E-commerce Site with Gatsby, DatoCMS, and Snipcart
18. Using the WordPress Source Plugin
19. Adding Images to a WordPress Site
20. Using Prismic with the GraphQL Source Plugin
21. Writing Documentation with Docz
22. Making a Blog with Netlify CMS
23. Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby

チュートリアル7をやっていきます。

まず最初に出てくるslugについて。

Gatsbyノート3(slug/pageの生成) - Qiita

gatsby-node.jsを作成して、onCreateNodeのフックを書いていきます。
console.logでnode.internal.typeを出力するようにして、gatsby developを実行。コンソールに表示される内容を確認していきます。

Gatsbyのbuild処理の概要を忘れているので以前の記事を確認しました。

Bootstrapの処理概要はここに詳細がありました。

Gatsby Lifecycle APIs

横道にそれましたが続きやっていきます。
onCreateNodeでマークダウンのslugを取得して、Nodeに追加。
/src/templatesに記事のテンプレートを作成。
createPageでgraphqlにてその値を取得して、テンプレートを元にページを生成。という流れ。

マークダウンの情報はcreatePageでcontextにslugを渡して、テンプレート内でgraphqlでslugを指定して詳細を取得。

最後にindex.jsの記事一覧からリンクを貼って終わり。