Gatsby Starter Sanity Homepage is a JavaScript-based Gatsby starter for building a content-driven homepage backed by the Sanity headless CMS. It pairs Gatsby's static site rendering with Sanity's structured content editing, giving you a pre-built set of homepage sections, a Sanity Studio schema, and a deployment path to Gatsby Cloud.
What is Gatsby Starter Sanity Homepage?
Gatsby Starter Sanity Homepage is an open-source starter template maintained by Gatsby that creates a homepage where all content is managed through Sanity. You input a Sanity project with the starter's schema (deployed via the GraphQL API) and the starter outputs a static Gatsby site with typed, queryable homepage blocks. It runs on Gatsby's Node.js build system and uses React components for rendering. A live demo is available at gatsbysanityhomepage.gatsbyjs.io, and a TypeScript version of the same starter is maintained on GitHub.
Key Features
- Pre-built Sanity Studio schema — Includes nine section types (homepageHero, homepageFeature, homepageFeatureList, homepageCta, homepageLogoList, homepageTestimonialList, homepageBenefitList, homepageStatList, homepageProductList) that editors can compose and reorder.
- Vanilla Extract styling — Colors and themes are defined in TypeScript files (colors.css.ts, theme.css.ts, ui.css.ts) that generate CSS custom properties, making rebranding a matter of editing token values.
- Abstract GraphQL data model — gatsby-node.js creates interfaces such as HomepageBlock so the homepage query can pull any section type with fragments.
- Demo content import — Run
yarn sanity-importin the studio directory to load sample content into your Sanity project. - Gatsby Cloud provisioning — The repository uses the gatsby-provision convention, so connecting via Deploy Now can automatically create the Sanity project and populate it with the content model.
- Easy logo replacement — Swap the brand-logo.js component with an inline SVG (camel-cased attributes) or use the StaticImage component from gatsby-plugin-image for a raster image.
- Custom section tutorial — The README walks through adding a new homepage banner section end-to-end: schema, GraphQL interface, component, fragment, and export.
Who should use Gatsby Starter Sanity Homepage?
- Developers who want a Gatsby homepage that is fully CMS-driven can clone this starter to avoid wiring up Sanity and GraphQL from scratch.
- Sanity users who want a ready-made content model can use the pre-built schema with block references directly in Sanity Studio.
- Agencies and freelancers delivering marketing sites can use the starter as a base, then customize the color tokens and logo to match a client's brand.
- Technical content editors who need to update homepage sections without touching code benefit from the Sanity Studio interface that mirrors the starter's section components.
What can you do with Gatsby Starter Sanity Homepage?
- Content editors: Reorder, edit, or hide the nine built-in homepage sections directly in Sanity Studio without writing code.
- Developers: Extend the homepage with custom sections by following the tutorial in the README, which covers schema definition, GraphQL type creation, and component export.
- Site owners: Deploy to Gatsby Cloud from GitHub, GitLab, or Bitbucket, and optionally use gatsby-provision to auto-provision Sanity content during the Deploy Now flow.
- Designers: Rebrand the entire site by editing the color values in src/colors.css.ts and swapping the logo in src/components/brand-logo.js.
How does it work?
The quick start walks through four phases: create the Gatsby site with npx gatsby new, install and initialize Sanity Studio in the studio directory (including deploying the GraphQL API and importing demo content), generate .env files with yarn and yarn setup, then run the development server. The content model lives in Sanity, the build queries it via GraphQL, and Gatsby renders the static homepage.
FAQ
Do I need a Sanity account to use this starter?
Yes, you need a Sanity account to create a Sanity project for the content. The quick start prompts you to log in via the Sanity CLI and create a new project.
Is this starter written in JavaScript or TypeScript?
This version is written in JavaScript. There is a separate TypeScript version maintained on GitHub.
Can I customize the colors of the homepage?
Yes, edit color hex values in src/colors.css.ts, which exports a colors object imported into theme.css.ts to create CSS custom properties.
What homepage sections are included?
The starter includes nine section types: hero, feature, feature list, CTA, logo list, testimonial list, benefit list, stat list, and product list, each represented as a React component and a Sanity schema.
How do I deploy this starter?
Push your repository to GitHub, GitLab, or Bitbucket, import it into Gatsby Cloud, add the environment variables from .env.production, and build. Or use the Deploy to Gatsby flow with gatsby-provision to auto-create the Sanity project.
