Gatsby.js + Contentful + Netlifyで作った爆速ブログ
OVERVIEW
知人のブログを作ることになったので、今アツいGatsby.js + Contentful + Netlifyの組み合わせでハイパフォーマンスを実現しました。
「Gatsby.js + Contentful + Netlify」でブログを作ると爆速を実現できるだけでなく（ほとんどのケースで）無料で使うことができるのが大きな魅力です。使用したツールについて軽く解説しておきます。
Gatsby.js
Gatsby.jsは、今アツいReact製の静的サイトジェネレーターです。ページの表示速度がとっても早くなります。有名どころだとFigmaのランディングページはGatsby.jsで作られているようです。
Contentful
記事のデータやタグなどのコンテンツを管理するWebアプリです。マークダウンエディターを備えており、ここで記事を書きます。この記事データをGatsby.jsが読み込み、静的なファイルを作ってくれるわけです。
（記事を保存したときに、Netlifyに通知が飛ぶようにしておくと、Netlifyがページデータを再生成してくれます）
Netlify
静的なサイトをビルド、デプロイ、ホスティングしてくれるサービスです。GitHub上のGatsby.jsのソースコードと、Contentfulの記事データを読み込み、静的なサイトデータを生成（ビルド）してくれます。そのため、ブログのカスタマイズがとっても楽になります。SSL化も無料。
高速な理由
- （Gatsby.js）WordPressと異なり、あらかじめ静的なページデータを生成しておく
- （Gatsby.js）ファーストビューに関わるCSSを自動でインラインで埋め込んでくれる
- （Gatsby.js）遅延ロードを自動でしてくれる
- （Gatsby.js）リンクをプリフェッチしてくれる
- （Netlify）CDN配信してくれる
- （Netlify）HTTP/2配信してくれる
Gatsby.jsとNetlifyはとくに今後も活用していきたいところです。