John Prismic Gatsby Starter

JPGS (John Prismic Gatsby Starter) is a minimal Gatsby starter that pairs a Gatsby front end with Prismic as a headless CMS, providing a bare-bones, content-driven website to fork and customize.

What is John Prismic Gatsby Starter?

JPGS is a super simple starter built on Gatsby using Prismic as the CMS, as stated in the repository description. It takes a Prismic repository with published documents—specifically a homepage and at least one page—and produces a static Gatsby site. The starter is distributed as a GitHub repository and is meant to be forked before use. There is no named individual or company attributed as the author in the available content.

Key Features

• Gatsby framework — Built on Gatsby, the site generates as a static site with the performance benefits of React-based rendering.
• Prismic CMS integration — Connects to a Prismic repository for all content, requiring the repository name and API key.
• Environment variable configuration — Uses a .env file with PRISMIC_API_KEY and PRISMIC_REPO to keep secrets out of source control.
• Custom type schemas — Includes JSON files in src/schemas that you paste into Prismic to define custom types.
• Content model — A homepage and at least one page document must be published in Prismic for the starter to work.
• Centralized styling — Global styles and theme variables live in src/style/base-styles.js and src/style/theme.js for easy customization.
• Quick start command — After configuration, running yarn start launches the Gatsby development server.

Who is it for?

• Developers exploring Gatsby and Prismic — the small codebase makes it easy to see how the two integrate.
• Freelancers building client websites — fork the starter, wire it to a Prismic repo, and give the client a simple CMS to edit pages.
• Open-source learners — with only 2 stars, it's a quiet project you can study, break, and rebuild without affecting a large community.

What can you do with it?

• Launch a content-managed site — publish Prismic documents, map them to the provided custom types, and serve them through Gatsby.
• Customize the design system — edit base-styles.js and theme.js to alter fonts, colors, and global styles.
• Learn a minimal Gatsby + Prismic setup — trace how env variables, custom type schemas, and page queries come together.

How does it work?

1. Fork the repository on GitHub.
2. Create a Prismic repository and get an API key.
3. Add PRISMIC_API_KEY and PRISMIC_REPO to a .env file.
4. Copy JSON content from src/schemas into Prismic as custom types.
5. Publish a homepage and at least one page document.
6. Update gatsby-config.js with your project details, then run yarn start.

FAQ

Do I need a Prismic account?

Yes. The starter requires a Prismic repository because it fetches all content from Prismic. You must create one and provide the repository name and API key via a .env file.

What documents must be published?

The README says you need to publish both a homepage and at least one page document in Prismic before the starter will render content.

Where do I customize styles?

Global styles are in src/style/base-styles.js and src/style/theme.js. These two files are the designated places for theme variables and base CSS rules.

How do I get the development server running?

After forking and completing the Prismic setup, run yarn start from the project directory. The starter uses yarn as its package manager.