はじめに
一度整理も兼ねて、このブログで使用しているプラグインをまとめました。
増減するかもしれないので、随時更新していくかもしれません。
gatsby-plugin-google-gtag
- Google Analytics4 に対応したプラグイン
gatsby-plugin-google-analytics
は GA4 に対応していない
gatsby-plugin-robots-txt
- Gatsby 製のサイトで robots.txt を作成するためのプラグイン
- robots.txt は検索サイトのクローラを制御する
- 具体的には検索サイトにインデックスさせたいページや、そうでないページなど
gatsby-plugin-sitemap
- サイトマップを生成するためのプラグイン
gatsby-remark-images
- 投稿記事(Markdown)内の画像を表示させるためのプラグイン
gatsby-plugin-react-helmet
- head 要素(メタタグ)をカスタマイズするためのプラグイン
- 初期状態ではメ タタグやタイトルも表示されない
gatsby-plugin-disqus
- Gatsby サイトに Disqus のコメント機能を導入するプラグイン
gatsby-plugin-feed
- RSS フィードを生成するプラグイン
gatsby-plugin-image
-
StaticImage と GatsbyImage の 2 つのコンポーネントを使う
-
Web サイトのパフォーマンスを考慮しながらレスポンシブな画像をサイトに追加することが出来る
-
読み込み時にボヤッと表示させたりすることが出来る
-
他に必要なプラグイン
gatsby-plugin-image
gatsby-plugin-sharp
gatsby-transformer-sharp
gatsby-transformer-sharp
- 画像読み込みで ImageSharp ノードを生成する
gatsby-plugin-sharp
と併用する
- トリミング、リサイズ、レスポンシブ画像など色々加工できる
@fortawesome/fontawesome-svg-core
- FontAwesome でアイコンを表示させるためのプラグイン
- 他にも以下のプラグインが必要
- @fortawesome/free-brands-svg-icons
- @fortawesome/free-regular-svg-icons
- @fortawesome/free-solid-svg-icons
@fortawesome/react-fontawesome
- @fortawesome/fontawesome-svg-core との違いは不明
gatsby-plugin-manifest
- スマホでホーム画面に追加した際にアイコンを表示させる
- PWA(プログレッシブウェブアプリ)を実装
gatsby-plugin-offline
- Workbox Build を使用してサイトの ServiceWorker を作成し、サイトアクセス時にクライアント側に Service worker をロードさせ、ServiceWorker を用いた機能を使えるようにするためのプラグイン