Gatsby WP Themes Documentation

Installing Your Gatsby Starter

Installing Your Gatsby Starter

Set up Your Development Environment

To build your Gatsby website locally on your computer, you will need to set up your local machine. The official Gatsby documentation provides a step by step tutorial on how to set up your development environment.

The official Gatsby tutorial covers intalling Node.js, Git, Gatsby command line interface gatsby-cli, and Visual Studio Code editor.

You also have to install Yarn package manager. Yarn is an alternative the npm standard Node's package manager.
Our starters require Yarn. You can find here how to install Yarn on your operating system.

Before going any further make sure to have gatsby-cli and yarn installed on your local machine.

Installing your Gatsby starter

The starters with the -dev suffix do not use the theme from the npm package. Instead, the theme structure is replicated directly in the src folder. You can modify any of these files directly. This approach is recommended for developers who need to deeply modify the starter.

Unzip the starter of your choice.

StarterΒ structure
β”œβ”€β”€ .babelrc
β”œβ”€β”€ ✏️✏️✏️ .env-sample # rename to .env
β”œβ”€β”€ .gitignore
β”œβ”€β”€ .npmrc
β”œβ”€β”€ README.md
β”œβ”€β”€ ✏️✏️ config.js
β”œβ”€β”€ ✏️ configColors.js
β”œβ”€β”€ ✏️ configSizes.js
β”œβ”€β”€ ✏️ configTypography.js
β”œβ”€β”€ gatsby-config.js
β”œβ”€β”€ package.json
β”œβ”€β”€ src
β”‚ β”œβ”€β”€ πŸ—‚ @gatsbywpthemes
β”‚ └── πŸ—‚ styles
└── πŸ—‚ static
# ✏️✏️✏️ - you have to edit this file
# ✏️✏️ - you will probably need to edit this file
# ✏️ - you might want to edit this file

Your starter cannot be installed without providing the secret auth token that you received in your email. The token is used in the .npmrc file in the root of your starter. The .npmrc is checked to the version control. That means, you should not replace the ${GWPT_AUTH_TOKEN} variable with the token value.

".npmrc"
@gatsbywpthemes:registry=https://npm.cloudsmith.io/gatsbywpthemes/gatsby-themes/
//npm.cloudsmith.io/gatsbywpthemes/gatsby-themes/:_authToken=${GWPT_AUTH_TOKEN}
always-auth

Adding your token to your startup shell file

Instead, you can add the environment variable to your startup shell file. You just have to do it once and it will be available for all starters. You startup shell file will be either:

  • ~/.zshrc if your shell is zsh
  • ~/.bashrc if your shell is bash

If you are not sure what shell you are using, type echo $0 in your terminal.

Open you terminal and paste this code, with YOUR_TOKEN replaced by your secret token:

echo "export GWPT_AUTH_TOKEN=YOUR_TOKEN" >> ~/.zshrc && source ~/.zshrc

or (if you are using bash):

echo "export GWPT_AUTH_TOKEN=YOUR_TOKEN" >> ~/.bashrc && source ~/.bashrc

Once you've done this, make sure to be in the root of your starter. Run yarn command to install all dependencies

Alternative solution

If you can't or don't want to add your token to the shell file, you can add it as an environmental variable for every command that you run. Make surt to be in the root of your starter and run:

  • to install dependencies:
    GWPT_AUTH_TOKEN=YOUR_TOKEN yarn
  • to run your development server:
    GWPT_AUTH_TOKEN=YOUR_TOKEN gatsby develop

Running your development server

  1. Rename the .env.sample file as .env. In your .env file provide the url of your WordPress source website. You can read more about your .env file here.
  2. Run gatsby develop to start the development server.