The Gatsby + Netlify CMS Starter is a JAMstack boilerplate for building a business or blog website using Gatsby v2 and Netlify CMS, pre-configured for one-click deployment to Netlify.
What is the Gatsby + Netlify CMS Starter?
This starter is a GitHub template that wires together Gatsby, a React-based static site generator, with Netlify CMS, a Git-backed headless CMS, following the JAMstack architecture. It takes markdown content and configuration files as input and produces a pre-rendered static website with editable pages for Landing, About, Product, Blog-Collection, and Contact, plus Netlify Form support. The project is maintained by the Netlify Templates organization and includes a live demo at https://gatsby-netlify-cms.netlify.com/.
Key Features
- Editable pages — Landing, About, Product, Blog-Collection, and Contact pages, with the Contact page wired to Netlify Forms.
- Netlify CMS integration — Create and edit blog posts through the Netlify CMS admin interface, with Git as the content source of truth.
- Tag support — Every blog post can have tags, and the starter generates a separate archive page for each tag.
- Bulma styling with PurgeCSS — Uses the Bulma CSS framework, then shrinks the final bundle with
gatsby-plugin-purgecss, reducing the typical 170K Bulma build by about 90%. gatsby-imagewith CMS previews — Responsive images viagatsby-image, with preview templates registered insrc/cms/cms.jsfor Blog, About, Product, and Index pages.- Netlify Functions — Includes a
lambdafolder and configuration so you can add serverless functions. - Pre-rendered HTML — Gatsby generates static HTML and automatically code-splits JavaScript for fast loading.
- Lighthouse perfect score — The starter reports a perfect score for SEO, Accessibility, and Performance (Progressive Web App still in progress).
- Optional media libraries — Uploadcare and Cloudinary media libraries are installed and registered by default, but can be commented out and removed to reduce build time.
Who is it for?
- Developers starting a JAMstack project — use it as a ready-made base with Gatsby v2, Netlify CMS, and Bulma already configured, avoiding setup work.
- Small business owners — manage site content (text, images, blog posts) through the Netlify CMS dashboard without writing code.
- Bloggers — publish posts with a clean static front end, tags, and a CMS editor.
- Agencies — quickly spin up client websites using the one-click Netlify deploy, then customize pages and styling.
What can you do with the Gatsby + Netlify CMS Starter?
- Launch a business site — Clone the starter, edit the landing/about/product pages, and deploy to Netlify with continuous deployment from Git.
- Run a blog — Write posts in the Netlify CMS, assign tags, and Netlify deploys the updated Gatsby site automatically.
- Add serverless functions — Use the included
lambdafolder and Netlify Dev to test functions locally. - Customize the design — Modify the Bulma styles and
gatsby-imageusage to match your brand, with separate React components for each page.
How does it work?
The recommended path is to click the "Deploy to Netlify" button, authenticate with GitHub, and Netlify creates a copy of the repository in your account, builds it, and hosts the site. After that you configure Netlify Identity to authorize CMS logins, then edit content through the CMS at /admin. For local development, you clone the repo, run yarn, and use netlify dev (or ntl dev) to serve the site and any lambda functions.
FAQ
Which Gatsby version does this starter use?
This starter uses Gatsby v2, as noted in the README. The blog post link confirms the version (Gatsby v2 introduced in September 2018). For new projects you might consider a newer Gatsby version, but this starter pins its dependencies to v2.
Does this starter work without Netlify?
Yes, you can run it locally or on any static host. Clone the repository, run npm run build and npm run serve to get a production build. However, the Netlify CMS still requires Netlify Identity (or another OAuth provider) for authentication, and Netlify Form support is Netlify-specific.
How do I use the Netlify CMS admin?
After deploying, go to your site's /admin path. You'll need to set up Netlify Identity and invite users, following the Netlify CMS Quick Start Guide. Once logged in, you can create and edit blog posts and pages, with changes committed back to your Git repository.
Can I remove the optional media libraries?
Yes. Uploadcare and Cloudinary are installed and registered by default in src/cms/cms.js. To remove them, comment out their imports and registration calls, then run yarn remove netlify-cms-media-library-uploadcare and/or yarn remove netlify-cms-media-library-cloudinary to drop them from dependencies.
Pros and cons
- Pros — Perfect Lighthouse score for SEO, Accessibility, and Performance; pre-configured Netlify deploy and functions; CMS preview templates for pages and blog posts; tag archive pages built in; PurgeCSS reduces Bulma's CSS size by about 90%.
- Cons — Windows users may encounter
node-gyperrors when installing dependencies, requiring Python 2.7 and Visual C++ build environment; the optional Uploadcare and Cloudinary media libraries are included by default, which increases build time unless you remove them.
