Gatsby DatoCMS Starter

Gatsby DatoCMS Starter is a boilerplate GitHub template that combines the Gatsby static site generator with the DatoCMS content management system and Netlify hosting, preconfigured to produce a homepage, blog listing, and blog post pages.

What is Gatsby DatoCMS Starter?

Gatsby DatoCMS Starter is a starter repository created by brohlson for quickly bootstrapping Gatsby projects connected to DatoCMS. It takes a fresh Gatsby install and adds DatoCMS content models for HomePage, BlogPage, and BlogPost, plus Netlify build configuration and a serverless contact form function. The template uses styled-components for styling, React hooks for component logic, and includes SEO utilities via a site-config file with siteUrl and sitemapPath fields.

Key Features

• Preconfigured DatoCMS models — The starter includes setup for HomePage, BlogPage, and BlogPost content models, so content editors have a defined schema from day one.
• Netlify integration — Includes build scripts and a simple contact form function/endpoint, so the site can deploy and handle form submissions without extra server setup.
• styled-components styling — The repository uses the styled-components CSS-in-JS library, with a badge showing its compatibility, and the codebase leverages React hooks and lodash utilities.
• SEO utilities — A site-config file holds siteUrl and sitemapPath values used for sitemap generation and metadata; you add your own values after cloning.
• Environment variable handling — Installation requires creating .env, .env.production, and .env.development files based on .env.example, keeping API keys and settings separate.
• Inter font preconfigured — Credits include the Inter font by Rasmus Andersson and the typeface-inter package by Ajmal Afif, giving the typography a modern sans-serif look.
• One-command install — You can scaffold a new site with gatsby new my-site https://github.com/brohlson/gatsby-datocms-starter.

Who is it for?

• Gatsby developers who want a working DatoCMS integration without wiring the CMS, models, and Netlify deploy config from scratch.
• Content teams using DatoCMS as their headless CMS can rely on the prebuilt HomePage, BlogPage, and BlogPost models to start publishing structured content immediately.
• Freelancers and agencies building marketing or blog sites for clients on a JAMstack stack can use the starter as a repeatable base and add client-specific styling.
• Developers new to serverless forms can see a working Netlify function example for a contact form endpoint inside a Gatsby site.

Use cases

• Personal blogging: Set up a blog with DatoCMS as the editor, using the BlogPage and BlogPost models to manage posts and the built-in Netlify contact form for reader inquiries.
• Marketing sites: Use the HomePage model for a company landing page and the BlogPage for news or resources, all deployed with one-click Netlify builds.
• Portfolio sites: Adapt the homepage model to display work samples and use the blog to publish process updates, with sitemap support via the site-config SEO settings.

How does the template work?

After running gatsby new my-site against this repository, you copy .env.example to .env, .env.production, and .env.development and fill in your DatoCMS API tokens. Then you create the HomePage, BlogPage, and BlogPost models in DatoCMS, add your siteUrl and sitemapPath in the site-config file, and push to Netlify, which runs the included build scripts and makes the contact form function available.

FAQ

Is Gatsby DatoCMS Starter free to use?

Yes, it is an open-source starter repository on GitHub with no license fees or subscription required. You will need your own accounts for DatoCMS and Netlify, both of which offer free tiers, but the template itself costs nothing.

What content models does it create?

The starter includes setup for three DatoCMS models: HomePage, BlogPage, and BlogPost. These correspond to the page templates and blog structure embedded in the Gatsby site, so content editors have a predefined schema to fill in.

How do I deploy this to Netlify?

The repository includes build scripts designed for Netlify. Connect the GitHub repo to a Netlify site, add the environment variables from your .env files, and Netlify will run the build and deploy the static Gatsby output, plus the contact form serverless function.

Does this work with other CMS platforms?

No, this starter is specifically configured for DatoCMS. The content models, queries, and API calls are tied to DatoCMS's schema and endpoints, so swapping to another CMS would require rewriting the data layer.