Gatsby WP Themes Documentation

Gatsby config.js

Gatsby config.js

The default options are listed below. We discuss each one in detail in the Options section.

config.js
const config = {
pathPrefix: "",
webfontsOptions: {},
gaTrackingId: 0,
gaOptions: {},
googleTagManagerId: 0,
googleTagManagerOptions: {},
addSiteMap: false,
siteMapOptions: {},
developLimit: null,
}
module.exports = config

pathPrefix

optional, default: ""

Typically, your Gatsby website will be hosted at the root of its domain. In that case, the pathPrefix is an empty string, and you can skip this setting.
You will only need to set the pathPrefix if your gatsby website is hosted at something other than the root (/), e.g., https://example.com/demo.

Adding the path prefix requires two steps:

  1. setting the pathPrefix (make sure to precede it with a slash), for example:

    config.js
    const config = {
    pathPrefix: "/demo",
    // ...
    }
    module.exports = config
  2. adding --prefix-paths flag when building your website:

    gatsby build --prefix-paths

Sometimes, you might want to access your production site locally. In that case, you will have to serve it with the --prefix-paths flag, i.e., gatsby serve --prefix-paths
Your production build will be available at http://localhost:9000/demo.


webfontsOptions

Our themes support Google web fonts, under the hood we use the Gatsby plugin gatsby-plugin-webfonts. The webfontsOptions setting is passed to the gatsby-plugin-webfonts options.

Let's imagine that you want to use Abril Fatface for headings and Lora for the body.

config.js
const config = {
// ...
webfontsOptions: {
fonts: {
google: [
{ family: "Abril Fatface" },
{
family: "Lora",
variants: ["400", "400i", "700", "700i"],
},
],
},
},
// ...
}
module.exports = config

Now Abril Fatface and Lora (in the specified variants) are loaded and available in your project. You still have to specify how you want to use them in the configTypography.js file :

configTypography.js
const typographySettings = {
fonts: {
body: "Lora, serif", // I will use Lora for the body
heading: "Abril Fatface, serif", // and Abril Fatface for the headings
// mono: 'SFMono-Regular, Menlo,Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
},
fontWeights: {
// body: 400,
heading: 400, // Abril Fatface comes as one-variant 400 font face
// bold: 700,
},
// ..
}

If other options are not specified, the plugin defaults are as follows :

formats: ["woff2", "woff"],
useMinify: true,
usePreload: true,
usePreconnect: false,
formatAgents: {
eot: `Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)`,
ttf: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.8 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.8`,
woff: `Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko`,
woff2: `Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393`,
},

gaTrackingId

optional, type: string

You can add Google Analytics to your Gatsby site by providing your Google Analytics tracking ID. Also, please note that the Google Analytics functionality is disabled in the development mode.

config.js
const config = {
// ...
gaTrackingId: "G-XXXXXXXXXX",
// ...
}
module.exports = config

gaOptions

optional, default: {}

Under the hook we use the official Gatsby plugin gatsby-plugin-google-gtag, and you can pass here any of its options.

config.js
const config = {
// ...
gaTrackingId: "G-XXXXXXXXXX",
gaOptions: {
pluginConfig: {
head: true,
},
},
// ...
}
module.exports = config

googleTagManagerId

optional, default: 0

Your Google Tag Manager Id. This option is passed to the gatsby plugin 'gatsby-plugin-google-tagmanager'. You can pass any additional available settings with googleTagManagerOptions.

config.js
const config = {
googleTagManagerId: "GTM-XXXXXX",
// ...
}
module.exports = config

googleTagManagerOptions

optional, default: {}

As mentioned above, we use gatsby-plugin-google-tagmanager under the hood. Any options that you add here will be passed to the plugin options - please refer to the plugin documentation for further details and available options.

config.js
const config = {
googleTagManagerId: "GTM-XXXXXX",
googleTagManagerOptions: {
includeInDevelopment: false,
defaultDataLayer: function () {
return {
pageType: window.pageType,
}
},
},
// ...
}
module.exports = config

addSiteMap

optional, type: boolean, default: false

Setting addSiteMap to true will generate a site map for your website.

The site map will be generated only when run in production mode.

config.js
const config = {
// ...
addSiteMap: true,
// ...
}
module.exports = config

Please note that your site map will list absolute URLs to your pages. That means you have to provide your production gatsby website URL as the value for GATSBY_SITE_URL in your .env file (see Setting up the .env File).

siteMapOptions

optional, default: {}

The siteMapOptions setting is only used if addSiteMap is set true. The siteMapOptions are passed to the gatsby-plugin-sitemap options so please refer to gatsby-plugin-sitemap options for the details. Pass any options that you would pass to the gatsby-plugin-sitemap options to siteMapOptions.

You don't have to worry about passing siteUrl to siteMetadata (as stated in the plugin documentation) - we take care of that, just make sure to provide GATSBY_SITE_URL in your .env file (see Setting up the .env File).

config.js
const config = {
// ...
addSiteMap: true,
siteMapOptions: {
excludes: ["/contact/"],
},
// ...
}
module.exports = config

developLimit

optional, default: null

If you work on a big website, you might not need to fetch all the data during the development. The developLimit lets you limit the maximum amount of objects of each type that are fetched from WordPress.

config.js
const config = {
// ...
developLimit: 3,
// ...
}
module.exports = config