Example Company Website Gatsby Sanity Combo

This is an example company website using Gatsby and Sanity in combination.
Alternatives To Example Company Website Gatsby Sanity Combo
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Builder5,1664382 days ago634September 23, 202299mitTypeScript
Drag and drop headless CMS for React, Vue, Svelte, Qwik, and more
2 days ago36mitTypeScript
Visual page builder and web design tool for any website or web app tech stack
Gatsby Starter Decap Cms2,046
11 days ago36mitJavaScript
Example Gatsby + Decap CMS project
Gatsby Starter Lumen1,938118 hours ago1November 07, 201920mitTypeScript
A constantly evolving and thoughtful architecture for creating static blogs with Gatsby.
Awesome Jamstack1,262
8 days ago2
Carefully curated list of awesome Jamstack resources
Gatsby Mdx736
4 years ago4June 24, 2019JavaScript
Gatsby+MDX • Transformers, CMS UI Extensions, and Ecosystem Components for ambitious projects
Jamstack Cms712
2 years ago17mitJavaScript
Modern full stack CMS. Built with Gatsby, GraphQL, AWS Amplify, and Serverless technologies.
Gatsby Starter Mate537
9 days ago7mitTypeScript
An accessible and fast portfolio starter for Gatsby integrated with Contentful CMS
Gatsby Starter Calpa Blog334
6 months ago30mitJavaScript
Calpa's Blog (GatsbyJS Starter X Netlify CMS)
4 months ago37mitJavaScript
A starter project for creating lightning-fast websites with Gatsby v2 and Netlify-CMS v2 + Uploadcare intergration.
Alternatives To Example Company Website Gatsby Sanity Combo
Select To Compare

Alternative Project Comparisons

A sample company website built with Gatsby & Sanity.io

This examples combines Gatsby site generation with Sanity content management in a neat little company website. Read the blog post and see the getting started video.

Watch a video about the company website built with Gatsby using Sanity.io as a headless CMS

See the example up and running


A company website built with Gatsby

  • 📡 Real-time content preview in development
  • ⏱ Fast & frugal builds
  • 🗃 No accidental missing fields/types
  • 🧰 Full Render Control with Portable Text
  • 📸 gatsby-image support
  • 🔧 Minimal configuration

Sanity Studio with a schema for

  • 🏢 Company info
  • 📃 Pages
  • 👨🏼‍🎨 Projects
  • 👩🏾‍💻 People
  • 📰 Blog posts


Read the step-by-step blog post.

git clone [email protected]:sanity-io/example-company-website-gatsby-sanity-combo.git
cd example-company-website-gatsby-sanity-combo
npm install

# Install or upgrade the Sanity CLI to
# make sure you are on v0.140.0 or higher
npm install -g @sanity/cli
# Set up Sanity.io account and project (≈ 45s)
npm run init

See the getting started video for a walkthrough of the installation.

Enable Gatsby watch mode for drafts

We have enabled the watch mode in the gatsby-source-sanity plugin, which means that your frontend will automatically update with content changes whenever you publish them. If you want the frontend to show content changes in real time, you must do the following:

  • Go to manage.sanity.io and find your project (or run the command sanity manage in the studio folder)
  • Navigate to Settings->API and scroll down to the Tokens section
  • Add a new token and give it read privileges.
  • Copy the .env-example file to a file called .env in the /web folder
  • Add your new token to the key: SANITY_TOKEN="<token here>"

If you restart the local development server, it will now show unpublished changes from the Studio. Note that the .env file is ignored by Git, because the token gives access to unpublished content in the API.

Usage example

This project demos Sanity.io with Gatsby using our source plugin. It's a good starter for a simple company site, a portfolio site for an agency or a personal blog with an attached portfolio.

We tried to strike a balance between a useful example and a minimal footprint to make it easier to iterate on design and content model. Let us know should you have questions!

Development setup

Run it

npm start
# Studio at http://localhost:3333
# Web frontend at http://localhost:8000
# GraphiQL explorer at http://localhost:8000/___graphql

Development workflow

We wrote a blog post about how to use this example, but if you would like to just start tinkering:

  • The Sanity Studio keeps its schemas in ./studio/schemas. We will hot reload the editor when you edit them so just start experimenting. Read more about our schemas here.
  • We followed Gatsby conventions and you can read all about them here.
  • If you want Gatsby to not throw errors on missing fields for unpopulated data you need to redeploy the GraphQL API so we can generate schemas – npm run graphql-deploy


# Deploy a GraphQL API and schema to Sanity
npm run graphql-deploy

# Deploy the Sanity Studio to *.sanity.studio
npm run sanity-deploy

# Build & deploy to Zeit's Now. Remember to set `basePath` to "/studio" in sanity.json
npm run now-deploy

Deploy on Netlify: If you want to deploy the Gatsby site to Netlify we added a netlify.toml config for you.

Fork or clone the example to your GitHub account. After adding your repo to Netlify you’ll get automatic builds & deploys when pushing to master. You can also add a webhook to get deploys on content changes.

Deploy on Cloudflare: If you want to deploy the Gatsby site to Cloudflare we added a wrangler.toml and workers-site/ to both studio and web.


  1. Fork it
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request



Popular Gatsby Projects
Popular Content Management System Projects
Popular Content Management Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Headless Cms