Gatsby Starter Hygraph Blog

The Gatsby Starter Hygraph Blog is a Gatsby starter template that creates a static blog site connected to the Hygraph headless CMS, using GraphQL queries through gatsby-source-graphcms to fetch content and Tailwind CSS for styling.

What is the Gatsby Starter Hygraph Blog?

This starter is a reference implementation from Hygraph that pairs Gatsby's static site generation with the Hygraph content platform. As input it takes a Hygraph API endpoint and an API token stored as environment variables; it outputs a fully static blog with posts, images, and RichText content rendered as pages. It runs on Gatsby, a React-based static site generator, and uses gatsby-source-graphcms to pull content at build time.

Key Features

• gatsby-image integration — Optimized, responsive images from Hygraph asset fields using the gatsby-image component.
• MDX support — Hygraph RichText fields are rendered as MDX through gatsby-plugin-mdx, allowing embedded components and JSX in blog posts.
• Tailwind CSS — Utility-first styling built in with Tailwind CSS, so you can customize the design without writing custom CSS.
• One-click clone — Clone the matching Hygraph Blog Template directly from the starter README to get the required content schema.
• One-click deploy — Deploy to Vercel with environment variables for HYGRAPH_ENDPOINT and HYGRAPH_TOKEN preconfigured via the Deploy with Vercel button.
• Live demo — The starter powers the demo at blog.withheadlesscms.com, showing the output style and structure.
• Gatsby CLI setup — Create a project with a single command using gatsby new with the GitHub repository URL.

Who is it for?

• Developers building a personal or company blog on the Gatsby stack who want a prebuilt content architecture in Hygraph.
• Hygraph users looking for a reference implementation that demonstrates the official gatsby-source-graphcms source plugin in a complete project.
• Freelancers and agencies shipping client blogs that need a fast static front end with a hosted CMS backend for non-technical editors.

What can you do with the Gatsby Starter Hygraph Blog?

• Launch a blog quickly: Start from this starter, connect your Hygraph project, and have a working blog with image handling and MDX support.
• Experiment with MDX in a CMS context: Use Hygraph RichText fields to author posts and have gatsby-plugin-mdx transform them into MDX with interactive components.
• Learn Gatsby + Hygraph architecture: Study a single-repo example of environment configuration, GraphQL queries, and static page generation that mirrors Hygraph's own recommendations.

How does the starter work?

The quick start flow is straightforward: create a new Gatsby project with the CLI pointing at this repository, copy the .env.sample file to .env, fill in your HYGRAPH_ENDPOINT and HYGRAPH_TOKEN from the Hygraph project settings, install dependencies with yarn, and run yarn dev to start the development server. At build time, gatsby-source-graphcms fetches all published content, and Gatsby generates static pages for each blog post.

FAQ

Does this starter work without a Hygraph project?

No. You need a Hygraph project created from the Blog Template, because the starter expects a specific content schema (posts with RichText and asset fields). The README links the matching Hygraph Blog Template for cloning.

What environment variables are required?

The starter requires HYGRAPH_ENDPOINT and HYGRAPH_TOKEN. These are provided in the .env.sample file and must be populated with values from the Hygraph project settings UI, as described in the Hygraph API docs.

Can I deploy this starter to Vercel?

Yes. The README includes a Deploy with Vercel button that clones the repository, prompts for the two environment variables, and deploys the site to Vercel. The demo at blog.withheadlesscms.com runs on Vercel.

What styling approach does the starter use?

It uses Tailwind CSS for utility-first styling. This is one of the inline features listed in the README, along with gatsby-image and MDX support. The design output is visible in the live demo blog.

Is this starter still supported?

The repository is maintained by Hygraph and carries the reference-implementation topic on GitHub. It also depends on the gatsby-source-graphcms package, which is the official source plugin for connecting Gatsby to Hygraph.