Common Gatsby Plugins Configuration Cheatsheet

Follow the checklist, run the commands and update the gatsby-config.js file with the corresponding plugin data.

Gatsby Docs

Plugins Checklist

• gatsby-background-image

yarn add gatsby-background-image

plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]

• gbimage-bridge

yarn add gbimage-bridge

relies on dependencies from gatsby-background-image, no plugins

• https://www.gatsbyjs.com/docs/how-to/styling/bulma/

yarn add bulma sass gatsby-plugin-sass

plugins: [`gatsby-plugin-sass`],

• gatsby-plugin-react-helmet

npm install gatsby-plugin-react-helmet react-helmet

plugins: [`gatsby-plugin-react-helmet`]

• gatsby-source-filesystem

npm install gatsby-source-filesystem

plugins: [
    // You can have multiple instances of this plugin
    // to read source nodes from different locations on your
    // filesystem.
    //
    // The following sets up the Jekyll pattern of having a
    // "pages" directory for Markdown files and a "data" directory
    // for `.json`, `.yaml`, `.csv`.
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
        ignore: [`**/\.*`], // ignore files starting with a dot
      },
    },
  ],

• gatsby-transformer-sharp

npm install gatsby-transformer-sharp gatsby-plugin-sharp

plugins: [`gatsby-plugin-sharp`, `gatsby-transformer-sharp`],

• gatsby-plugin-sass

npm install sass gatsby-plugin-sass

plugins: [`gatsby-plugin-sass`]

• [ ] gatsby-plugin-web-font-loader

yarn add gatsby-plugin-web-font-loader

plugins: [
    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Droid Sans', 'Droid Serif']
        }
      }
    }
  ]

• gatsby-plugin-gdpr-cookies

yarn add gatsby-plugin-gdpr-cookies or npm install --save gatsby-plugin-gdpr-cookies

plugins: [
    {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-google-analytics', // default
          anonymize: true, // default
          allowAdFeatures: false // default
        },
        googleTagManager: {
          trackingId: 'YOUR_GOOGLE_TAG_MANAGER_TRACKING_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-google-tagmanager', // default
          dataLayerName: 'dataLayer', // default
        },
        facebookPixel: {
          pixelId: 'YOUR_FACEBOOK_PIXEL_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-facebook-pixel', // default
        },
        tikTokPixel: {
          pixelId: 'YOUR_TIKTOK_PIXEL_ID', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-tiktok-pixel', // default
        },
        hotjar: {
          hjid: 'YOUR_HOTJAR_ID',
          hjsv: 'YOUR_HOTJAR_SNIPPET_VERSION',
          cookieName: 'gatsby-gdpr-hotjar', // default
        },
        // defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development']
      },
    },
  ],

• gatsby-plugin-manifest

npm install gatsby-plugin-manifest

plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
      },
    },
  ],

• gatsby-plugin-alias-imports

yarn add gatsby-plugin-alias-imports


plugins: [
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {},
        extensions: []
      }
    }
  ]