Gatsby チュートリアル (ステップ 6, 7)

チュートリアルを試す

ステップ６、７

ステップ６と７は連続している。

ステップ６で Markdown で書かれた記事を一覧表示するページを作成し、ステップ７で Markdown で書かれた記事をいかに HTML としてレンダリングするか、またステップ６で作成した記事一覧からその記事ページにどうやってつなげるのかについて述べられている。

それらを行うために gatsby-transformer-remark というプラグインが紹介されている。これを導入すると GraphQL を用いてアクセスできるリソースの種類が増える。具体的には allMarkdownRemark や markdownRemark といった項目が追加され、この項目をたどることで Markdown で記載された記事ファイルの中の情報 (記事のメタ情報部分に YAML 記法で記載された内容等) にアクセスできる。

またステップ７では gatsby-node.js に触れ、Gatsby が静的サイトを作成する際に発火するイベントにハンドラを結びつける方法や、 GraphQL で辿れる情報を拡張する方法ついて説明されている。

まず Markdown 記事のメタ情報から slug 情報を抜き出し、それを URL パスに加工したものを markdownRemark 項目から辿れるようにする。次に Gatsby が記事を生成する際に、その URL パスに紐づくページも合わせて作成されるようにする。こうすることで pages ディレクトリにページコンポーネントを置いていなくても Markdown ファイルから記事ページを作成する事が可能となる。

所管

かねてより自分のブログを持つとして、記事は Markdown で書きたいと思っていたのでこれらのステップで学んだ内容はとても有益だった。こんなに簡単にサイトを構築し Markdown でブログを書けるなんて素晴らしい。 記事作成日順で記事一覧を作るのだが、こちらも同様にとても有益だった。非常に良いチュートリアルだなと感心した。