Gatsby Starter Google Sheets

Gatsby Starter Google Sheets is a Gatsby boilerplate that wires a React-based static site to a Google Sheets spreadsheet as its data source using the gatsby-source-google-spreadsheet plugin.

What is Gatsby Starter Google Sheets?

It's a starter template for Gatsby, the React-based static site generator. It takes a Google Spreadsheet as input, configured through environment variables, and produces a static website that queries spreadsheet rows through GraphQL. The starter ships with main Gatsby configuration files and the gatsby-source-google-spreadsheet plugin so you can get up and running with minimal setup.

Key Features

• Gatsby configuration files — includes the main Gatsby config files so you can start developing immediately without creating them from scratch.
• gatsby-source-google-spreadsheet plugin — ships with the plugin needed to pull data from Google Sheets into Gatsby's GraphQL layer.
• Environment variable setup — uses SPREADSHEET_ID, CLIENT_EMAIL, and PRIVATE_KEY stored in a .env file to authenticate and locate your sheet.
• GraphiQL explorer — at http://localhost:8000/___graphql you can experiment with querying your spreadsheet data.
• Hot reloading — editing src/pages/index.js updates the browser in real time during gatsby develop.
• Google service account auth — requires a service account with edit access to the target sheet, whose email and private key provide the credentials.

Who is it for?

• Developers building content-driven sites who want to manage data in Google Sheets instead of a CMS.
• Small teams that need a simple way to publish structured data (lists, events, products) as a static site.
• Gatsby learners who want to see the official plugin integrated in a minimal project.

What can you do with it?

• Content editors: update a Google Sheet and rebuild the Gatsby site to publish changes to a static site.
• Prototypers: spin up a new Gatsby project with spreadsheet-backed data in a few commands.
• Data-driven marketers: display a sheet's contents as a public webpage without writing backend code.

How does it work?

The quick start instructs you to run gatsby new with the starter's GitHub URL, add credentials to a .env file (spreadsheet ID from the sheet URL, plus service account email and private key), then run gatsby develop. The plugin syncs sheets into GraphQL, and you edit src/pages/index.js to pull rows.

FAQ

What environment variables does this starter need?

It needs SPREADSHEET_ID, CLIENT_EMAIL, and PRIVATE_KEY placed in a .env file. The SPREADSHEET_ID is taken from the sheet's URL, while CLIENT_EMAIL and PRIVATE_KEY come from a Google service account you create.

How do I get the spreadsheet ID?

Copy it from the URL of the Google Sheet, which follows the format https://docs.google.com/spreadsheets/d/.../edit. The segment after /d/ is the spreadsheet ID.

Does the starter work with any Google Sheet?

The sheet must be shared with edit permission to the service account email address. The source plugin reads from the spreadsheet using those credentials, so the service account needs access.

What can I edit to change the site?

The main page file is src/pages/index.js. During development, changes to this file appear in the browser in real time because of Gatsby's hot reloading.

Where can I preview the data?

While gatsby develop is running, you can visit http://localhost:8000/___graphql to use GraphiQL and test queries against your spreadsheet data.