Gatsby WP Themes Documentation

Setting up your Gatsby Site

Setting up your Gatsby Site

Configure your Gatsby Site

To set up your Gatsby website, you might need to edit the configuration files located at the root of your project.

  • ✏️✏️✏️ .env - basic mandatory configuration
  • ✏️✏️ config.js - further configuration, general features
  • ✏️ configColors.js - if you want to change the theme colors
  • ✏️ configSizes.js - if you want to change some layout values (responsive breakpoints, container width, etc.)
  • ✏️ configTypography.js - if you want to modify the typography settings (font family, heading sizes etc.)

✏️✏️✏️ - you have to edit this file
✏️✏️ - you will probably need to edit this file
✏️ - you might want to edit this file

Setting up the .env File

Some crucial settings of your Gatsby website are set as environment variables. That means Gatsby will look for them in the .env file. The most important ones are:

  • GATSBY_WP_URL - mandatory setting, the URL of the WordPress source website
  • GATSBY_SITE_URL - mandatory for a published production website, the URL of your published Gatsby website

The easiest way to set up your .env file is to rename the existing .env-sample to .env. You will find the sample .env-sample file in the root of each starter.

.env-sample
# rename this file to .env (or .env.development and .env.production)
# supply the values listed below
# make sure to uncomment the lines that you edit
# GATSBY_WP_URL=the_url_of_your_wordpress_website
# GATSBY_SITE_URL=the_url_to_your_published_gatsby_site
# GATSBY_MAILCHIMP_ENDPOINT=https://gmail.us20.list-manage.com/subscribe/post?u={your_value}&id={your_id}

Alternatively, you can create two separate .env files .env.development and .env.production. Gatsby will use choose one of these depending on the environment you are in:

  • if you run gatsby develop, you will be in the development environment.
  • if you run gatsby build or gatsby serve, then you will be in the production environment.

GATSBY_WP_URL

Uncomment the GATSBY_WP_URL line and replace the the_url_of_your_wordpress_website with the URL of your WP website, for example:

.env
GATSBY_WP_URL=https://wp.example.com

GATSBY_SITE_URL

Uncomment the GATSBY_SITE_URL line and replace the the_url_to_your_published_gatsby_site with the URL of your WP website, for example:

.env
GATSBY_WP_URL=https://gatsby.example.com

GATSBY_MAILCHIMP_ENDPOINT

You can subscribe new email addresses to a Mailchimp email list with our Newsletter widget.
To activate Mailchimp, assign your Mailchimp list endpoint URL to the environmental variable GATSBY_MAILCHIMP_ENDPOINT

Under the hood, our themes use gatsby-mailchimp-plugin for the MailChimp subscriptions. Check the plugin documentation for more information on how to locate your Mailchimp endpoint.

example:

.env
GATSBY_MAILCHIMP_ENDPOINT=https://gmail.us20.list-manage.com/subscribe/post?u=xxxyyyzzz&id=xxyyzz

Things you should be aware of:

  • .env, .env.development or .env.production are not checked into version control. If you need to check your .env file, you can remove it from the .gitignore file.
  • All variables prefixed with GATSBY_ will be made available to client-side code.
  • You will have to make sure that your environment variables are available to the build tool (see the Deployment section).
  • After modifying the .env file, you will need to restart the server.