Gatsby Starter Interviews

Gatsby Starter Interviews is a responsive GatsbyJS starter for building structured Q&A interview sites from JSON data files.

What is Gatsby Starter Interviews?

Gatsby Starter Interviews is an open-source starter template for the Gatsby static site generator that turns JSON question and interview files into a complete interview website. It takes input from a data folder containing questions.json and individual interview JSON files, and outputs a static site with separate interview pages and question pages. The template runs on the Gatsby framework (built on React and GraphQL) and is developed by Rachit Magon under the MIT License. It is designed for structured Q&A content where each answer is associated with a question ID, and every interview pulls from a shared question bank. You can see a live example at https://interviews.smooper.com or a demo deployment at https://vigorous-mirzakhani-98ba6c.netlify.com.

Key Features

• Bulma CSS styling — The starter uses the Bulma CSS framework for a minimalist, responsive layout out of the box.
• Complete data/code separation — All content lives in JSON files under data/, while the React components and Gatsby templates handle presentation, so editors never touch code.
• Google Analytics support — Built-in integration lets you add Google Analytics tracking to your interview site.
• Facebook Pixel support — Built-in integration adds Facebook Pixel for conversion and audience tracking.
• Gatsby GraphQL + GraphiQL — Every Gatsby site ships with a GraphQL data layer, and the starter includes the GraphiQL explorer at http://localhost:8000/___graphql during development.
• Two-page architecture — The src/templates folder contains separate interview and question templates that render the interview list and individual Q&A content.
• Netlify one-click deploy — The repository includes a Deploy to Netlify button that clones the repo to your GitHub and builds the site automatically.
• Performance testing — A WebPageTest result is provided in the README, showing the starter’s performance analysis.

Who is it for?

• Journalists and editors — Publish a structured Q&A interview series without building a custom CMS; just add JSON files.
• Content teams — Manage interviews in plain JSON files that can be version-controlled and reviewed like code.
• Gatsby developers — Use this starter as a learning reference for GraphQL queries, Gatsby templates, and data-driven pages.

What can you do with it?

• Publish an interview series — Create one JSON file per interviewee in data/interviews, each referencing question IDs from data/questions.json, and the homepage automatically lists every interview.
• Extend the question bank — Add new questions to questions.json; they only appear on an interview page when that interview file uses the matching questionId.
• Deploy a static site — Push the repo to Netlify (or any static host) and get a fully static, fast-loading interview site with analytics.

How does it work?

1. Create a new Gatsby site with gatsby new interviews https://github.com/rmagon/gatsby-starter-interviews.
2. Run gatsby develop to start a local dev server at http://localhost:8000.
3. Edit data/questions.json to add questions and data/interviews/*.json to add interview files.
4. Run gatsby build to generate a production-ready static site.

FAQ

Is Gatsby Starter Interviews free?

Yes. The template is released under the MIT License and is free to use, modify, and distribute, including for commercial projects.

How do I add a new interview?

Add a new JSON file inside data/interviews (for example jean-jollet.json), structure it like the existing interview files, and it will appear on your homepage automatically.

What styling does the template use?

It uses Bulma, a modern CSS framework, with a minimalist design and responsive layout. The styling can be customized through Gatsby components and Bulma overrides.

Does it support analytics?

Yes, it includes built-in support for both Google Analytics and Facebook Pixel.

How do I deploy the site?

You can deploy directly to Netlify using the one-click button in the README, which creates a GitHub repo, builds the site, and hosts it for you.