Create a homepage with Gatsby and Sanity
0BSD License
Create a homepage using Gatsby and Sanity. This starter demonstrates how to use Sanity to build a homepage and can be customized to match your own visual branding.
Note: This version of the Sanity homepage starter is written in TypeScript. If you want to use Sanity but JavaScript is more your style, there is also a JavaScript version maintained on GitHub.
You will need a Sanity account to use this starter. You can create a new account or use an existing one.
Create a Gatsby site
Use the Gatsby CLI to get started locally:
npx gatsby new my-homepage https://github.com/gatsbyjs/gatsby-starter-sanity-homepage-ts
Set up Sanity Studio
In the studio
directory, install dependencies for Sanity Studio:
yarn
Create a new Sanity project by running:
yarn sanity-init
This will prompt you to log in if this is your first time using Sanity CLI.
Deploy the Sanity GraphQL API for your new project:
yarn deploy
Optionally, to import the demo content for this starter run:
yarn sanity-import
Start the Sanity Studio development server to start editing content:
yarn start
In your Gatsby site's directory, to create .env.development
and .env.production
files with configuration for your Sanity project, run:
yarn & yarn setup
Start developing
In your site directory, start the development server:
yarn start
Your site should now be running at http://localhost:8000
Open the source code and start editing
Once your content is available in Sanity, deploy your site to Gatsby Cloud:
.env.production
file to Gatsby Cloud during setupFor a more detailed walkthrough, see the tutorial on how to build your site with Gatsby Cloud.
Alternatively, you can deploy this starter directly to Gatsby Cloud.
This repository uses the gatsby-provision
convention to allow for automatic CMS content provisioning during the Deploy Now flow in Gatsby Cloud. After you Quick Connect Sanity to your site, you will be given the option to run the gatsby-provision
script to populate the selected project and dataset with the site's associated content model and content.
Otherwise, you can always set up your content in Sanity manually before deploying to Gatsby Cloud.
To use Gatsby Cloud Preview with this site, see the documentation for Connecting to Sanity via Quick Connect.
README.md
gatsby-config.js
gatsby-node.js
src
components
pages
colors.css.ts
styles.css.ts
theme.css.ts
.env.EXAMPLE
gatsby-config.js
: Gatsby config file that includes plugins required for this starter.gatsby-node.js
: Gatsby Node config file that creates an abstract data model for the homepage content.src/
: The source directory for the starter, including pages, components, and Vanilla Extract files for styling.To update the colors used in this starter, edit the src/colors.css.ts
file.
// src/colors.css.ts
export const colors = {
background: "#f03e2f",
text: "#000000",
primary: "#000000",
muted: "#f14e41",
active: "#e6e6e6",
black: "#000",
}
If you'd like to add additional colors, add additional keys to this object.
This file is imported into src/theme.css.ts
and creates CSS custom properties, that can be imported and used in other .css.ts
files.
The UI components file src/components/ui.tsx
imports styles from src/components/ui.css.ts
. You can see how the theme and color values are being used in this file.
Replace the src/components/brand-logo.tsx
component with your own brand logo.
If you have an SVG version, it can be rendered inline as a React component, following the example in this file. Note that SVG attributes will need to be camel cased for JSX.
Using an inline SVG for the logo allows it to pick up the colors used in CSS, which is how the logo colors are inverted for the mobile menu.
If you prefer to use an image, use the StaticImage
component from gatsby-plugin-image
in place of the SVG in this file.
To further customize the look and feel of the homepage, edit the UI components in src/components/ui.tsx
and styles in src/components/ui.css.ts
.
To customize any of the sections of the homepage, edit the relevant component in src/components
.
Most of the styles for these components are handled with shared UI components in src/components/ui.tsx
.
To create a new type of section in your homepage, you'll want to create a new section component, using the existing components as an example. For this example, we'll create a new "Banner" component.
First, update your schema in the Sanity Studio.
In the studio
directory, create a new file in the schema
directory for your new section. For this example, name it homepageBanner.js
// studio/schema/homepageBanner.js
export default {
name: "homepageBanner",
title: "Homepage Banner",
type: "document",
fields: [
{ title: "Heading", name: "heading", type: "string" },
{ title: "Text", name: "text", type: "string" },
],
}
Add this module to the schema.
// studio/schema/schema.js
// ...
import homepageBanner from "./homepageBanner"
export default createSchema({
name: "default",
types: schemaTypes.concat([
// ...
homepageBanner,
]),
})
Add this new section type to the schema in studio/schema/homepage.js
// studio/schema/homepage.js
export default {
name: "homepage",
title: "Homepage",
type: "document",
fields: [
{ title: "Title", name: "title", type: "string" },
{ title: "Description", name: "description", type: "string" },
{ title: "Image", name: "image", type: "image" },
{
title: "Content",
name: "content",
type: "array",
of: [
{
type: "reference",
to: [
{ type: "homepageHero" },
{ type: "homepageFeature" },
{ type: "homepageFeatureList" },
{ type: "homepageCta" },
{ type: "homepageLogoList" },
{ type: "homepageTestimonialList" },
{ type: "homepageBenefitList" },
{ type: "homepageStatList" },
{ type: "homepageProductList" },
// Add the new section
{ type: "homepageBanner" },
],
},
],
},
],
}
In the studio
directory, start Sanity Studio by running:
yarn start
Navigate to the Homepage and add a new section with this new Homepage Banner section.
Deploy the updated GraphQL API by running:
yarn deploy
Update gatsby-node.js
Edit your site's gatsby-node.js
file, adding an interface for HomepageBanner
that matches the schema in Sanity Studio.
This allows the homepage to query the abstract HomepageBanner
type.
// in gatsby-node.js
exports.createSchemaCustomization = async ({ actions }) => {
// ...
actions.createTypes(`
interface HomepageBanner implements Node & HomepageBlock {
id: ID!
blocktype: String
heading: String
text: String
}
`)
// ...
actions.createTypes(`
type SanityHomepageBanner implements Node & HomepageBanner & HomepageBlock @dontInfer {
id: ID!
blocktype: String @blocktype
heading: String
text: String
}
`)
// ...
}
Next, create the Banner component:
// src/components/banner.tsx
import * as React from "react"
import { graphql } from "gatsby"
import { Section, Container, Heading, Text } from "./ui"
export default function Banner(props) {
return (
<Section>
<Container>
<Heading>{props.heading}</Heading>
<Text>{props.text}</Text>
</Container>
</Section>
)
}
export const query = graphql`
fragment HomepageBannerContent on HomepageBanner {
id
heading
text
}
`
Export the component from src/components/sections.tsx
// src/components/sections.tsx
export { default as HomepageHero } from "./hero"
export { default as HomepageFeature } from "./feature"
export { default as HomepageFeatureList } from "./feature-list"
export { default as HomepageLogoList } from "./logo-list"
export { default as HomepageBenefitList } from "./benefit-list"
export { default as HomepageTestimonialList } from "./testimonial-list"
export { default as HomepageStatList } from "./stat-list"
export { default as HomepageCta } from "./cta"
export { default as HomepageProductList } from "./product-list"
// add export for new component
export { default as HomepageBanner } from "./banner"
Add the GraphQL query fragment to the query in src/pages/index.tsx
// in src/pages/index.tsx
export const query = graphql`
{
homepage {
id
title
description
image {
id
url
}
blocks: content {
id
blocktype
...HomepageHeroContent
...HomepageFeatureContent
...HomepageFeatureListContent
...HomepageCtaContent
...HomepageLogoListContent
...HomepageTestimonialListContent
...HomepageBenefitListContent
...HomepageStatListContent
...HomepageProductListContent
# New component fragment
...HomepageBannerContent
}
}
}
`
If you've made changes to the gatsby-node.js
file or changes to the Sanity data model, clear the Gatsby cache before running the develop server:
yarn clean && yarn start
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
Build, Deploy, and Host On The Only Cloud Built For Gatsby
Gatsby Cloud is an end-to-end cloud platform specifically built for the Gatsby framework that combines a modern developer experience with an optimized, global edge network.