Gatsby Starter Contentful Console UI

Gatsby Starter Contentful - Console UI is a Gatsby starter template that builds a blog-style static site whose interface is styled after modern video game console UIs, using Contentful as the headless CMS and Chakra UI for theming.

What is Gatsby Starter Contentful - Console UI?

Gatsby Starter Contentful - Console UI combines the GatsbyJS static site generator with Contentful CMS to produce a blog-ready site with a console-inspired design language. As input, the setup process asks for a Contentful Space ID, a Content Management API Access Token, and a Content Delivery API Access Token; as output, it generates a fully static Gatsby site with blog pages, collection pages, and rich text rendering. The starter is authored by Arturo Alviar (GitHub: arturoalviar) and is available as a public GitHub repository.

What makes this starter stand out?

• Console-inspired design — The UI is explicitly inspired by modern consoles' user interfaces, with a console icon and interface styling.
• Contentful CMS integration — Uses the gatsby-source-contentful plugin and expects a predefined Contentful space containing content types such as Page, Post, and Author.
• Chakra UI theming — Theme overrides live in src/@chakra-ui/gatsby-plugin, and light and dark theme support is built in.
• Framer Motion — The Framer Motion animation library is included for interface motion effects.
• Sora Typeface — The Sora font from Google Fonts is used as the site's typeface.
• Contentful rich text rendering — A dedicated ContentfulContent component renders all rich text fields from Contentful, with post images displayed inside a Chakra UI modal through the BlogPostImage component.
• Built-in pagination — Collection pages support pagination; the default postsPerPage value is 6 and can be adjusted per query or disabled by passing -1.
• Vue-style alias paths — Path aliases like @components are configured in gatsby-node.js under exports.onCreateWebpackConfig.

Who should use this starter?

• Gatsby developers who want a preconfigured blog starter with a CMS backend and a distinctive, console-like visual theme rather than a generic layout.
• Content teams that manage posts through Contentful's rich text editor and need a Gatsby front end that renders that rich text faithfully, including embedded images.
• Designers and front-end developers who want a Chakra UI project with dark mode and Framer Motion already wired up, using the alias path setup to keep imports clean.

What can you do with this starter?

• Publish a blog — Create posts in Contentful, and the starter queries them via GraphQL fragments in src/gatsby/fragments and renders paginated blog and collection pages.
• Customize the console look — Override the Chakra UI theme in src/@chakra-ui/gatsby-plugin to change colors, typography, and dark/light mode behavior.
• Change pagination behavior — Edit postsPerPage in generatePaginatedPages or generateCollectionPages helpers, or set it to -1 to render all items on one page.
• Swap rich text rendering — Modify the ContentfulContent component to change how each Contentful rich text type is displayed, for example replacing the modal-wrapped image with a standard Gatsby Img component.

How does this starter work?

Setup is a four-step process: clone the GitHub repository, install dependencies with yarn or npm, run yarn setup to enter your Contentful credentials (this generates .env files), then run yarn start to develop at http://localhost:8000. The starter's GraphQL queries live in src/gatsby, with fragments in src/gatsby/fragments and page-generation helpers in src/gatsby/gatsbyNodeUtils.js.

FAQ

Do I need a Contentful account to use this starter?

Yes. During setup you must provide a Contentful Space ID plus both the Content Management API and Content Delivery API access tokens. The starter relies on a predefined Contentful space with specific content types, so an empty space will not work without adding those content types.

How do I change the number of posts per page?

In gatsby-node.js, the generatePaginatedPages and generateCollectionPages helpers accept a postsPerPage option. The default is 6; you can raise or lower it per query, or pass -1 to disable pagination entirely for that collection.

What happens if I delete a Contentful content type that the starter queries?

Because the gatsby-source-contentful plugin only creates GraphQL schema fields for content types that have at least one populated entry, deleting all entries of a content type (such as author) will cause queries that reference it to fail. The README advises removing references to any content type you plan to remove.

Does the starter support dark mode?

Yes. Chakra UI theming with light and dark theme support is built in; the theme overrides are located in the src/@chakra-ui/gatsby-plugin folder.