Gatsby Starter Hero Blog

Gatsby Starter Hero Blog is a GatsbyJS blog starter template that scaffolds a complete static blog with a hero section on the home page, authored by Greg Lobinski and upgraded to Gatsby v2 by community contributor Mohsen Khanpour.

What is Gatsby Starter Hero Blog?

Gatsby Starter Hero Blog is a ready-to-use blog starter for GatsbyJS that takes Markdown files as content input and outputs a static site ready for hosting in the /public directory after running gatsby build. The starter includes a full set of blog features: SEO, social sharing, comments, search, RSS, PWA support, and a contact form. It was initially built for Gatsby v1 and later upgraded to Gatsby v2, with the original version preserved on the branch gatsby-v1.

Key Features

• Markdown content — All posts, pages, and site parts are written as Markdown files in the content directory; no CMS or database required.
• Styled-jsx and PostCSS — CSS is handled with styled-jsx and PostCSS, and base styles (fonts, colors, sizes) are defined in a theme object generated from a YAML file.
• SEO and OpenGraph — Includes sitemap generation, robots.txt, meta tags, and OpenGraph tags for social sharing on Twitter, Facebook, Google, and LinkedIn.
• Algolia search — Full-text search is implemented through Algolia, requiring an Algolia app ID, API keys, and index name in an .env file.
• Facebook comments — Comment threads are powered by Facebook, using an FB_APP_ID from your .env configuration.
• Gatsby-image — Images get lazy loading and webp support via gatsby-image.
• PWA and RSS — The starter is a 100% PWA with manifest.webmanifest, offline support, favicons, and generates an RSS feed.
• Netlify contact form — A contact form uses Netlify form handling with form elements and validation from ant-design.

Who is it for?

• Personal bloggers — Write Markdown posts and get a production-ready PWA blog with SEO, RSS, and social sharing without configuring build tooling.
• Gatsby developers — Learn from a real Gatsby v2 project that integrates gatsby-image, styled-jsx, Algolia, Google Analytics, and lazy-loaded components in a single starter.
• Freelancers — Spin up a client blog quickly by running gatsby new and then customizing the YAML theme file for branding.

What can you do with it?

• Launch a blog in minutes — Run gatsby new with this repository URL, then gatsby develop to preview at localhost:8000 or gatsby build to generate the static site.
• Customize the design globally — Edit the YAML theme file to change fonts, colors, and sizes across the entire site instead of writing per-component CSS.
• Add search and analytics — Create an .env file with Google Analytics, Algolia, and Facebook keys to enable tracking, full-text search, and comment threads.

How does it work?

Install the Gatsby CLI, then run gatsby new [directory] with the repository URL. The starter is served locally with gatsby develop and built for production with gatsby build. External services (Google Analytics, Algolia, Facebook) require an .env file in the root folder with the relevant IDs and keys.