2019/02 まで WordPress で管理していた chitoku.jp ですがこの度 Gatsby に移行しました!
TL;DR
- Gatsby で TypeScript なら gatsby-plugin-ts-loader + tsconfig-paths-webpack-plugin
- Algolia で日本語の検索をするときは Keep diacritics on characters に注意
- babel-plugin-react-intl-auto に出した PR がマージされた1
- gatsby-transformer-remark に出した PR がマージされた2
- remark-grid-tables に出した PR がマージされた3
- Gatsby の IE サポートは半分嘘なので残り半分は自分でやる
Gatsby とは
Gatsby は React 製の静的サイトジェネレーターです。Markdown や画像、YAML、テキス トファイルなどを透過的に扱うサーバーをローカルに建てて、それらを React のコンポーネントから GraphQL クエリーを通じて組み込めるという特徴があります。豊富なプラグインによって動作を拡張できるほか、細かいカスタマイズは自分でローカルにプラグインとして切り出して管理することができます。
コアの基本的に見える機能もプラグインとして切り出されており、ビルド時のフックに比較的柔軟に介入できます。たとえば Markdown をソースとすると、gatsby-source-filesystem がファイルを読み込んで gatsby-transformer-remark に処理を委譲し、さらに下位のプラグインが Markdown パーサーの処理をカスタマイズできます。今回は以下のようなプラグインを入れてみました。