Cape is a Gatsby starter created by Juhi Trivedi that pairs the Gatsby static site generator with Contentful as a headless CMS, producing a content-driven website that can be deployed to Netlify. This open-source demo, available on GitHub, shows how to scaffold a new Gatsby project with npx gatsby new your-project-name https://github.com/juhitrivedi/cape.git and then connect it to your own Contentful space.
What is Cape?
Cape is a Gatsby Content starter, meaning it is a pre-configured Gatsby site intended to be customized rather than used as-is. It takes a Contentful space ID and access token as input, reads content from Contentful at build time, and outputs a static site that runs at http://localhost:8000 during development. The starter was created by Juhi Trivedi and has an associated live demo at https://cape.netlify.com/.
Key Features
The starter's features center on the Gatsby and Contentful integration, with tooling to speed up development and deployment.
- Gatsby framework — Built on Gatsby, a React-based static site generator, so the output is a fast, pre-rendered site that can be hosted anywhere.
- Contentful integration — Connects to Contentful as the content source; you supply your own
spaceIdandaccessTokenin a.contentful.jsonfile in the project root. - GraphiQL for data exploration — During development, a built-in GraphQL explorer is available at
http://localhost:8000/___graphqlso you can inspect and test queries against your data. - One-command project creation — You can scaffold a new site with
npx gatsby new your-project-name https://github.com/juhitrivedi/cape.git, no manual setup beyond adding credentials. - Netlify deployment — Includes a one-click Deploy to Netlify button that points to the starter's GitHub repository, simplifying publishing.
- Demo site included — A live example is hosted at https://cape.netlify.com/ so you can see the starter's behavior before committing to it.
Who is it for?
The starter suits developers and site owners who want a CMS-driven Gatsby site without building the integration from scratch.
- Gatsby beginners — Developers learning Gatsby will find a working example that combines the framework with a real CMS, showing how content flows from Contentful into the site.
- Content-driven project owners — People who need a site where editors manage content through Contentful's dashboard will use this starter to quickly bootstrap a new site and wire up the credentials.
- Netlify users — Those already using Netlify can take advantage of the deploy button and the fact that the demo is hosted there.
What can you do with Cape?
Once set up, the starter supports several practical outcomes.
- Build a blog or portfolio: Use Contentful to author posts or project entries, then have Gatsby render them as a static site, all starting from this template.
- Prototype a content architecture: With the GraphiQL explorer, you can experiment with queries against your Contentful models before committing to a design.
- Learn Gatsby + Contentful integration: Follow the quick start steps to see how
.contentful.jsoncredentials and Gatsby's data layer work together in practice.
How does Cape work?
The quick start guides you through three steps: create a new Gatsby site using the starter's GitHub URL, install and start the development server with gatsby develop, and then add your Contentful credentials by creating a .contentful.json file with your spaceId and accessToken. The site runs locally at port 8000, and you can deploy to Netlify using the provided button.
FAQ
Is Cape free?
Cape is an open-source starter on GitHub, so the template itself is free to use. The live demo at https://cape.netlify.com/ also runs without charge, though you will need your own Contentful account and Netlify account for your own deployment.
What credentials do I need to run Cape?
You need a Contentful space with a space ID and an access token. The starter expects these in a .contentful.json file in the root directory. Without that file, the build will not have content to pull.
Where is the development server started?
After running gatsby develop, the site is served at http://localhost:8000. A separate GraphQL playground is available at http://localhost:8000/___graphql.
