Gatsby Starter Landing Page is a Gatsby starter for building content-driven landing pages with Contentful as the CMS, maintained by the Gatsby team and available as a public GitHub repository.
What is this template?
This starter pairs the Gatsby framework with the gatsby-theme-landing-page theme to create block-based landing pages whose content is managed in Contentful. It takes a Contentful Space ID plus Delivery and Preview API Keys as input and outputs a static Gatsby site with landing pages assembled from reusable section components, with a live demo at https://landingpagestarter.gatsbyjs.com/. It is built on React and uses Yarn Workspaces to include the theme locally.
Key features
- Contentful source integration — The theme uses the Contentful source plugin to pull content; the content model defines a
LandingPageSectiontype with fields for component name, heading, secondary heading, and content blocks containing markdown text, images, and links. - Six built-in section components — Hero, Features, Copy, CallToAction, Benefits, and Testimonial are included; each component maps to one Contentful
LandingPageSectionnode and pages control the order of sections through Contentful. - Theme Shadowing API — To customize any component, create a file in
src/gatsby-theme-landing-page/with the same name; the README demonstrates overriding the layout and the call-to-action section. - Style customization via CSS custom properties — Typography, colors, spacing, and shadows are defined in
variables.module.css; changing a font stack or brand color is a matter of editing variables, not component code. - gatsby-provision automation — A script in the starter imports the Landing Page content model and demo content into a new or existing Contentful space during installation, so the site works immediately after setup.
- Schema Customization API — GraphQL type definitions in
gatsby-node.jsprevent query errors when Contentful fields are missing or renamed, and the README advises updating these definitions after content model changes. - Gatsby Cloud deployment — A Deploy Now button provisions a site on Gatsby Cloud and Quick Connects Contentful, with the option to run
gatsby-provisionautomatically.
Who should use this starter?
- Gatsby developers who need a working landing page architecture without building the Contentful content model and GraphQL queries from scratch.
- Marketing teams and content editors who will manage landing page content in Contentful — adding or reordering sections through the CMS interface without touching code.
- Agencies building client sites can use the Shadowing API to add custom section components that match a client's brand, using the included
SuperHeroexample as a reference.
What can you do with it?
- Launch a marketing landing page: assemble Hero, Features, and CallToAction sections in Contentful, then publish a fast, static Gatsby page.
- Create a product or campaign page: layer Benefits and Testimonial sections to showcase value propositions and customer quotes, all edited in Contentful.
- Prototype custom sections: follow the starter's example to add a new section component (like the provided SuperHero) and update Contentful's component field validation to make it selectable.
How does it work?
Setup is documented for both Gatsby Cloud and local development. First, gather a Contentful Space ID, Management API Token, and Delivery (and optionally Preview) API Key. Then either click Deploy Now on Gatsby Cloud or run npx gatsby new my-landing-page-site https://github.com/gatsbyjs/gatsby-starter-landing-page. In the project root, run yarn && yarn gatsby-provision to populate your Contentful space with the starter's content model and demo data, then yarn start to launch the development server at localhost:8000.
FAQ
What are the prerequisites for using this starter?
You need a new or existing Contentful space, plus three credentials: the Space ID, a Management API Token for the gatsby-provision script, and a Delivery API Key. A Preview API Key is optional and enables previewing unpublished content.
How do I customize fonts and colors?
Edit src/gatsby-theme-landing-page/styles/variables.module.css. This file defines CSS custom properties for the font family, heading font, font sizes, text and background colors, link colors, button colors, spacing scale, max-widths, border radius, and box shadows used by all built-in components.
Can I add new section types beyond the six built-in ones?
Yes. Add a named export to src/gatsby-theme-landing-page/sections/index.js, create the component in src/components/, and update the Contentful content model so the LandingPageSection's component field validation includes the new component name.
Does the starter include a layout with header and footer?
No, by default the theme's landing pages have no wrapping layout. The starter shadows the theme's layout file with a custom layout via src/gatsby-theme-landing-page/components/layout.js, so you can add your own header, footer, and surrounding content.
