Prist

Prist is a light-themed Gatsby v2 starter that pairs the Gatsby static site generator with the Prismic headless CMS to build portfolio and blog websites.

What is Prist?

Prist is a light-themed open-source starter template that combines Gatsby v2 with Prismic as a headless CMS, built to produce portfolio and blog websites. It takes Prismic content — three custom types named Homepage, Post, and Project — and outputs a static Gatsby site with landing, blog, and portfolio pages. The template is maintained by Marguerite Roth and is distributed as a GitHub repository under the gatsby-prismic-starter-prist name. A live demo is available at prist.marguerite.io.

Key Features

Prist bundles a focused set of features for portfolio and blog sites.

• Landing page — Includes a customizable Hero, a Portfolio preview, and an About component, editable through the Prismic Homepage custom type.
• Emotion styled components — Styling is handled with Emotion's styled API, so component styles live alongside the React components.
• Blog layout and pages — A repeatable Post custom type in Prismic drives blog posts with title, category, preview description, author, hero image, body, and date fields.
• Portfolio layout and pages — A repeatable Project custom type supports project title, category, preview thumbnail, hero image, description, and post date fields.
• Google Analytics — Built-in support for tracking site traffic.
• Mobile ready — The layout is responsive for mobile viewing.
• Automated deployment — One-click deploy to Netlify is available through a Deploy to Netlify button that points to the starter's repository.

Who is it for?

Prist suits individual creators and small teams who want a CMS-driven Gatsby site.

• Designers and creative professionals — Showcase a portfolio of projects and write blog posts about work, using Prismic as a user-friendly editing interface.
• Front-end developers — Use it as a jumping-off point for Gatsby + Prismic projects, with pre-configured custom types and GraphQL data querying via the gatsby-source-prismic-graphql plugin.
• Small content teams — Manage homepage, posts, and projects from a single CMS without touching code once the site is set up.

What can you do with Prist?

With the starter's three Prismic custom types, you can build and publish typical content-site sections.

• Personal portfolio sites: Publish project entries with thumbnails, hero images, categories, and descriptions, and feature them on the landing page portfolio preview.
• Blog publishing: Write posts in Prismic with rich text, images, embeds, and author selection, and have them appear on the blog listing and post pages.
• Custom content modeling: Define your own fields in Prismic's JSON editor for the three custom types to extend what the site displays.

How does Prist work?

The setup follows four steps, starting from a Gatsby CLI command.

1. Create a new Gatsby site with the CLI: gatsby new YOUR-PROJECT-NAME https://github.com/margueriteroth/gatsby-prismic-starter-prist
2. Install dependencies and run gatsby develop to start a local server at localhost:8000, with GraphiQL at localhost:8000/___graphql for query testing.
3. In gatsby-config.js, set your Prismic repository name in the gatsby-source-prismic-graphql options.
4. In Prismic, create three custom types — Homepage (single), Post (repeatable), and Project (repeatable) — using the JSON schemas provided, then add and publish content for all fields so the site can fetch data.

FAQ

Is Prist free to use?

Yes, the starter is open source under the repository margueriteroth/gatsby-prismic-starter-prist and can be cloned, customized, and deployed without licensing fees.

What do I need to configure in Prismic?

You need a Prismic account and repository. In gatsby-config.js, add your repository name. Then create the three custom types using the JSON editor and fill in every custom type field with at least one piece of content and publish it, otherwise Gatsby returns NULL value errors.

Why does my site show NULL value errors?

Prismic requires every field in the custom types to be populated with content and the content to be published. Also, the About section requires a link entry. Filling in all fields is necessary for the starter to fetch complete data.

How do I refresh data after updating Prismic?

Running gatsby clean clears Gatsby's cache, which resolves issues fetching updated data from Prismic. For a deeper reset, delete node_modules, .cache, and package-lock.json, then run npm install again.

Does Prist include a demo?

Yes, a live demo website is available at prist.marguerite.io, built from this starter.