対応シンタックスハイライトを適用する目的ブログをすべて自前で実装するのは、とても楽しい。ありとあらゆる部分を、自分でカスタマイズできる。一方で、その茨の道は本当にやりたくないことで溢れている。これらをプラグインと多少のコードで済ませることができる。本記事では、これらを一つずつ解消していく。利用する静的サイトジェネレータである。関する日本語の詳しい記事としては、以下を参照されたい。使ってみた事と、縦書きテンプレートを作った話また、ちゃんとしたチュートリアルを望むのであれば、以下を参照されたい。よって、プロジェクトを作成する。プロジェクト作成時は、「Starter」と呼ばれるテンプレートを利用出来る。よる記事執筆が可能なgatsby-starter-blogを利用する。startで起動し、http://localhost:8000から表示できる。buildでビルドが行われ、publicディレクトリに出力される。templatessrc/pages/ページを定義する。することで、http://localhost:8000/helloからそのページを表示することが出来る。経由して作成することも出来る。gatsby-config.jsサイトのメタデータや、利用するプラグインなどを定義する。gatsby-browser.jsブラウザでの表示時に実行される部分を書く。今はあまり気にしなくていい。APIsとやり取りをする。今はあまり気にしなくていい。src/templates/gatsby-node.jsからページを作成する際に使用するテンプレートを記述する(場合が多い)。コンポーネントを定義する(場合が多い)。すべてのリソースは「データ」と呼ばれる。経由して行うことができる。ページからデータへアクセスする例を示す。このページでは、私の飼っている可愛いチンパンジーを紹介しています。追加することができる。して扱うためには、gatsby-source-filesystemプラグインを利用する。プラグインによって提供されたデータを新しいノードやノードフィールドに変換することができる。記事を書くことで、http://localhost:8000/${記事パス}に記事が表示される。形式で記事の冒頭に書く。