【日記】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

チュートリアル6をやっていきます。
この章では、マークダウンファイルからページを生成するプラグインの解説になっています。

まずは、マークダウンファイルを作成。
チュートリアルのサイトを元に作成します。

次にプラグインをインストール

npm install gatsby-transformer-remark

設定は、gatsby-config.jsにプラグイン名を追記するだけ。
gatsby developを実行して、GraphiQLを見ると、allMarkdownRemarkとmarkdownRemarkが追加されています。

次は、index.jsを修正。マークダウンの一覧を表示するように直します。
最後にソート項目とソート条件を設定してチュートリアル終了。