Note: This project uses Gatsby v2.
- css-in-js with Emotion: website - plugin doc
- API Prismic: website - plugin doc
- React-Helmet: plugin doc
- Offline: plugin doc
- Sharp image processing library: plugin doc
- Sitemap: plugin doc
- Polyfill.io: plugin doc
- Storybook: website
-
Install the Gatsby CLI
The Gatsby CLI helps you create new sites using Gatsby starters (like this one!)
# install the Gatsby CLI globally npm install -g gatsby-cli
-
Node version manager
Install NVM to manage its version of Node:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
In the project, install and use the current version of Node:
# Installs the node version specified in the .nvmrc nvm install # Switches to the node version specified in the .nvmrc nvm use
(Optional but highly recommended) Install AVN to avoid having to run nvm use every time you open the project.
-
Install Yarn
Go to https://yarnpkg.com/docs/install
brew install yarn --ignore-dependencies
-
Configuration and API Keys
Create a
.env.development
at the root of the project.# Prismic API_KEY API_KEY=XXXXX_YOUR_TOKEN_XXXXX # GraphQL GRAPHQL_URI=http://127.0.0.1:4001/graphql # Firebase FIREBASE_API_KEY=xxx FIREBASE_AUTH_DOMAIN=xxx
-
Download dependencies
yarn
-
Start developing
Navigate into your new site’s directory and start it up.
npm run develop
Your site is now running at
http://localhost:8000
_Note: You'll also see a second link:
http://localhost:8000/___graphql
. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial._ -
Build
npm run build
-
Serve Build
gatsby serve
-
Launch Storybook
npm run storybook