このサイトを生成している静的サイトジェネレータを、middleman から react-static へ移行しました :tada:
ただ、react-staticは静的サイトジェネレータであってもブログジェネレータではないので、欲しい機能やコマンドは自分で追加していくことになりました :sweat_smile: 。

移行に際してやったこと

テンプレートの生成

react-staticにいくつかテンプレートが用意されています。今回は、 Styled-Components を利用しました。

$ yarn run react-static create
yarn run v1.3.2

? What should we name this project? my-static-site
? Select a template below...
  preact
  redux
  sass
❯ styled-components
  tailwindcss
  typescript
  basic

ルーティングやブログの設定は static.config.js に、 React Components は src/ に生成されるのでよしなに編集します。
記事の一覧や個別記事はComponentにpropsとして渡せるよう、以下で json として出力するようにします。

記事の管理

記事は front-matter + markdown で書いていました。
今まではmiddlemanが読み込んでくれていたのですが、今回は自分で管理することになります。

front-matter は gray-matter 、 markdown は markdown-it でparseするようにしました。
記事の一覧と個別記事をそれぞれ別のjsonファイルとして出力しておきます。
あとは static.config.js で個々の Component に props として渡すようにすれば完了です。

Before / After

ロードしているサイズが大幅に減ったのが大きいですが、表示速度が速くなりました。
元々が Foundation5 + jQuery なのに対して、今回はCSSフレームワークを使ってないというのもあります。

記事一覧

Before

After

個別記事

Before

After

ページ遷移する際に必要なpropsはjsonとして出力してくれているので、react-staticが提供している Link を使えば差分だけ更新されます。

感想

preact や Prefetch など、まだいじれるところはありそうなので時間を見つけて試そうと思います。