Gatsby Starter Blog

Gatsby Starter Blog is a boilerplate for creating a blog with the Gatsby static site generator, shipping with the standard configuration files and directory structure needed to start a React-based blog project.

What is Gatsby Starter Blog?

Gatsby Starter Blog is an official starter template created by the Gatsby team that produces a static blog site. It takes a project name and repository URL as input via the Gatsby CLI and outputs a configured Gatsby site with a source directory for React components and pages. The starter runs on Gatsby, a React-based static site generator, and is published on GitHub under the gatsbyjs organization.

Key Features

• Gatsby CLI setup — Create a new site with the command gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog, which copies the starter and installs dependencies.
• Local development server — Running gatsby develop starts the site at http://localhost:8000 with live reload when you edit source files.
• GraphiQL data explorer — The starter automatically exposes a GraphQL playground at http://localhost:8000/___graphql for experimenting with queries against the site's data layer.
• Standard Gatsby configuration files — Includes gatsby-config.js for site metadata and plugins, gatsby-node.js for Node APIs, gatsby-browser.js for browser APIs, and gatsby-ssr.js for server-side rendering APIs.
• Predefined project structure — The repository contains src for front-end code, package.json for npm dependencies, .gitignore, and a README, so you can start editing src/pages/index.js immediately.
• One-click Netlify deployment — A deploy button links to Netlify to build and host the site from the GitHub repository without manual setup.
• 0BSD license — The starter is released under the 0BSD license (permissive, no attribution required), and the included LICENSE file can be replaced with your own.

Who is it for?

• Developers new to Gatsby — Use this starter to follow the official Gatsby tutorial and learn how a Gatsby project is structured without starting from scratch.
• Bloggers who want a static site — Set up a blog with a React-based front-end and Gatsby's build pipeline for fast, pre-rendered HTML pages.
• Teams deploying to Netlify — Use the one-click deploy flow to quickly publish a Gatsby blog to Netlify and connect a custom domain later.

What can you do with it?

• Create a personal blog — Start with the boilerplate and customize the homepage, templates, and content structure to build a blog.
• Experiment with Gatsby APIs — Modify gatsby-node.js, gatsby-browser.js, and gatsby-ssr.js to control build-time page creation, browser behavior, and server rendering.
• Deploy to Netlify — Click the deploy button to build and host the site, then connect your own domain through Netlify's dashboard.

How does it work?

1. Run gatsby new my-blog-starter followed by the starter's GitHub URL to create a new site in a directory.
2. Navigate into the directory and run gatsby develop to start a development server at http://localhost:8000.
3. Edit files under src — the browser refreshes in real time. Use the GraphiQL tool at /___graphql to explore the data layer.

FAQ

Is the Gatsby blog starter free?

Yes, it is open source and released under the permissive 0BSD license, so you can use it for personal and commercial projects without paying a license fee.

How do I create a new Gatsby blog from this starter?

Use the Gatsby CLI: gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog. This creates a new directory with the starter's files and installs all required npm dependencies.

What is the GraphiQL link for?

The /___graphql URL is a GraphQL IDE that lets you explore the data layer of your Gatsby site. You can view available queries and test them before using them in your pages.

Can I deploy this starter to Netlify?

Yes, the README includes a one-click deploy button that connects the GitHub repository to Netlify for building and hosting. The Netlify service handles the build process automatically.

Does the starter include styling?

The README does not mention any included CSS framework or design system; it provides the standard Gatsby configuration and a React source structure, so you add your own styling.