Gatsbyでブログをリニューアルしてみました

このブログをリニューアルしてみました。 ちなみにこのブログのソースはここ ↓ で公開しています。https://github.com/nishidemasami/nishidemasami.github.io/tree/gatsby

作ってみた感じ、すごくいいと思います！

• React が動いている・生で React が書ける
• ページ間の遷移の速度が速い(React の仮想 DOM 操作に由来している)
• ちょっとがんばれば Typescript でも書ける(使用する Gatsby のテンプレートによっては最初から Typescript を使っているらしい)
• Gatsby が静的にページを作ってくれているので Javascript をオフにしてても見れる

こんな感じで普通にReact が
Typescript で書けて動きます！✨

Gatsby は、HEXO や Hugo、Jekyll みたいに静的ジェネレータなので、こうやって Github Pages にも乗せられるので便利！ AWS S3 とかに乗せればスケールしますし！✨

あと、ページを高速化するための細かなテクニックを最初から使ってくれています。

• 静的プレレンダリング・静的プリフェッチ(速い)
• いわゆる PRPL パターンに準拠する PWA サポート
  Push critical resources for the initial URL route using<link preload> and HTTP/2.
  Render initial route.
  Pre-cache remaining routes.
  Lazy-load and create remaining routes on demand.
  https://www.gatsbyjs.com/docs/prpl-pattern/
• GraphQL(ビルド時には json になっている)によるデータアクセスや画面遷移(これまた速い)

Gatsby で Markdown ファイルとかいい感じにしてくれますし、普通に React の仮想 DOM による高速化の恩恵も受けることできてます！ かなりいい感じになってると思います！✨