Gatsby×Contentfulなサイトの立ち上げに使用した28のプラグイン
先日、Gatsby×Contentfulという構成でブログメディアサイトを立ち上げました。
このサイトの初期スタートに使用した28のプラグインを紹介します。
SEO/PWA関連
基本的な設定はGatsby Head APIでなんとかしていて、めんどくさい設定はプラグインでなんとかしてもらっています。まあどのサイトでも入れるよねってやつです。
gatsby-plugin-manifest
マニフェストの設定のほか、アイコン自動生成やfavicon設定などいろいろやってくれます。
gatsby-plugin-offline
gatsby-plugin-manifestと併用することでPWA対応ができます。
gatsby-plugin-canonical-urls
サイトURLのwwwの有無だとか重複コンテンツがある場合のdominantなページなどを指し示す場合に使います。
gatsby-plugin-robots-txt
ビルド時にrobots.txtを生成してくれます。
gatsby-plugin-advanced-sitemap
サイトマップを生成してくれます。ベーシックなgatsby-plugin-sitemapよりも強力です。
source/transformer系
外部データを引っ張ってきたり、それらをGraphQLで扱えるように整形したりしてくれるプラグインです。
gatsby-source-contentful
Contentful連携のためのプラグインです。JamstackをやりたいときにHeadless CMSの選定は色々迷うと思うのですが、このプラグインの使いやすさとContentful自体の無料範囲の広さが決め手になりました。ほしいノードは大体作られているし、不可解さも特に無いので、GraphQLが不慣れな私にとってありがたい存在です。
microCMSとも迷ったのですが、microCMSのプラグインはGatsby Imageに対応していないようでした。一方Contentfulは、後述のgatsby-remark-images-contentfulと合わせることで画像最適化が簡単にできます。
gatsby-source-filesystem
ローカルファイルからデータを取り込むときに使います。
gatsby-transformer-remark
Markdownファイルのパースに使います。このプラグインのOptionに後述のremark系プラグインが並びます。
gatsby-transformer-sharp
動的に取得した画像ファイルからGatsby Imageに対応したImageSharpノードを作ってくれます。
画像系
gatsby-plugin-image
画像最適化をよしなにやってくれるコンポーネントを提供してくれます。画像プラグインはわりと最近新しくなって、Syntaxが変わりました。
https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide
gatsby-plugin-sharp
上のプラグインのヘルパーです。低レベルのヘルパープラグインなので直接使うのは推奨されないらしい（”You generally shouldn’t be using this directly …”）のですが、サイズ・クオリティ・フォーマットなどもろもろ変換できるようになります。
Remark系
Contentfulからブログの本文をMarkdownで取得したあと、HTMLにパースする際に色々してくれるプラグインです。
gatsby-remark-autolink-headers
見出しにリンクを付与してくれます。
gatsby-remark-external-links
本文中のリンクを「別タブで開く」にしてくれます。
gatsby-remark-check-links
リンク切れを検知してくれます。
gatsby-remark-images-contentful
Contentful側のImage APIを使って本文中の画像を最適化してくれます。
gatsby-remark-images-medium-zoom
本文中の画像をクリックしたときにうにょーんとズームしてくれるやつです。ブログサイトのMedium風らしいです。medium-zoomというライブラリを使っているそうです。
gatsby-remark-responsive-iframe
YouTubeやTwitterなどのコンテンツ埋め込みのためのiframeの幅をいっぱいに広げてくれます。
gatsby-remark-embed-video
YouTubeなどの動画埋め込みに使います。
gatsby-plugin-twitter
Twitterの埋め込みに使います。
UIのリッチ化・スタイリング
サイトUIに関係するプラグインです。ちなみにスタイリングにはTailwind CSSを採用しました。
gatsby-plugin-nprogress
ページの読み込みが遅れた場合にインジケーターを自動で出してくれるらしいです（実はまだ自分の目で確認できたことがありません）。
gatsby-plugin-smoothscroll
スムーズスクロールを勝手にやってくれます。
gatsby-plugin-postcss
Tailwindの導入のために必要だったので入れました。
ビルドサイズ圧縮
サイトの規模が小さいうちはそこまで関係ないのですが、Jamstackの悩みの種であるビルドサイズの膨張を対策するためのプラグインです。
gatsby-plugin-preact
ReactをPreactに置き換えることで軽くしてくれるプラグインです。
自分の環境ではReact v18を使っているとエラーがでたので、v17に下げて使っています。
gatsby-plugin-purgecss
不要なCSSクラスを取り除いてくれるプラグインです。Taiwlindにも対応しています。
今回のサイトでは削減率1%未満だったので、必要性はそこまで感じていません。
For developer
開発時に便利なプラグインです。
gatsby-plugin-alias-imports
import文のエイリアスを貼れるようにするためのプラグインです。 import ... from '@/components/...'みたいなことができるようになります。
RSS
gatsby-plugin-feed
RSS機能の実装に使ったプラグインです。複数フィードの作成もできるみたいです。
Analytics・Monitoring
gatsby-plugin-google-gtag
gtagを使うためのプラグインです。
gatsby-plugin-sentry
Sentryを使うためのプラグインです。
検討中…
初期スタートには使わなかったのですが、のちのち欲しくなるかもなと思っているプラグインです。
gatsby-remark-custom-blocks
Markdownで簡単にカスタムブロックを作れるプラグインです。表現の幅を広げるのに良いなと思っています。
remarkプラグインの最新版に対応していなかったので、またカスタムブロックの表現を本当に使いたいかどうかわからなかったので採用を見送りました。
gatsby-plugin-guess-js
Google Analyticsのデータを利用して、遷移確率が高いリンクをprefetchにしておいてくれるGuess.jsを使用するためのプラグインです。
サイトはもともとサクサク目に動いているので、アクセス数が増えてきたら導入しようと思っています。
宣伝
「素朴な教訓のある文章を届ける」というコンセプトで発信しています。ぜひ立ち寄ってください。
Twitterもよろしくおねがいします。なかなかフォロワーが増えず困っています😭
参考資料
Discussion