Hello Gatsby Starter is a free, open-source (0BSD) Gatsby and TypeScript starter template for building a full-featured marketing website with a blog, deployed on the JAMstack via Gatsby Cloud.
What is Hello Gatsby Starter?
Hello Gatsby Starter is a starter template that scaffolds a full-featured marketing and blog website from Gatsby, TypeScript, and TailwindCSS. It takes a Gatsby project plus Markdown/MDX content files as input and produces a static site with a blog, tag pages, pagination, RSS feed, sitemap, and SEO metadata. The template was published by hellotham under the permissive 0BSD licence, so anyone can fork it and customise it freely.
Key Features
- Full-featured blog — Blog posts are authored as Markdown or MDX files in
src/mdx/blogwith frontmatter fields for title, description, author, date, image, and tags;src/mdx/post/2000-01-01-template.mdis provided as a base file for new posts. - Automatic tag system — Creating a new tag automatically generates a dedicated page (for example
/tags/newtag), and the/tagsindex page enumerates all tags with pagination on both post and tag pages. - Built-in SEO — React Helmet injects Open Graph, Twitter Card, and Schema.org JSON-LD metadata into every page, covering Facebook, Twitter, and structured-data markup.
- SendGrid contact form — The
/contactpage includes a working form that sends email through SendGrid and Gatsby Functions, configured with theSENDGRID_API_KEYandSENDGRID_AUTHORIZED_EMAILenvironment variables. - Site infrastructure — RSS feed, sitemap, robots.txt, manifest and offline support, automatic image optimisation in Markdown/MDX posts, and code syntax highlighting are preconfigured.
- TailwindCSS design system — Styling is built on TailwindCSS with TailwindUI components, HeroIcons, Hero Patterns, and unDraw SVG illustrations; the default purple palette is changed by a global search-and-replace of '-purple-'.
- Editable landing page — The home page is composed of Hero, Feature, CTA and other components in
src/components, with navigation and footer edited viaheader.tsxandfooter.tsx. - Quality tooling — ESLint and TypeScript type-checking are wired in through
yarn lintandyarn type-check, and all site metadata is centralised ingatsby-config.js.
Who should use Hello Gatsby Starter?
Marketing teams can assemble a corporate site from the prebuilt Hero, Feature, and CTA landing page components and publish blog content in the same project. Technical bloggers can write posts as Markdown or MDX files with frontmatter and get tag pages, pagination, RSS, and SEO automatically without a CMS. Developers starting a Gatsby project in TypeScript get TailwindCSS, ESLint, HeadlessUI, and Gatsby Functions already wired together. Agencies can fork the 0BSD-licensed template and white-label it for client marketing sites.
What can you do with Hello Gatsby Starter?
- Launch a marketing site quickly — clone or fork the repo, run
yarnthenyarn develop, and edit the Hero, Feature, and CTA components insrc/componentsto reshape the landing page. - Publish a tagged blog — add Markdown or MDX files to
src/mdx/blogand each post automatically appears with its tag pages, pagination, and RSS entry. - Collect form submissions — set the two SendGrid environment variables on your deployment host and the
/contactform delivers email without extra backend code. - Ship an SEO-ready site — every page carries Open Graph, Twitter Card, and Schema.org JSON-LD metadata from React Helmet with no per-page configuration.
How does Hello Gatsby Starter work?
The template follows the JAMstack architecture: Git is the single source of truth, Gatsby builds Markdown/MDX content and React components into a static site, and the result deploys on Gatsby Cloud. To start, fork or clone the repository, run yarn, then yarn build or yarn develop; site parameters live in gatsby-config.js, content is organised under src/mdx, and anything added to the src/mdx/blog subdirectory becomes a blog post.
FAQ
Is Hello Gatsby Starter free to use?
Yes. The template is released under the 0BSD licence, so it is free to use, fork, modify, and redistribute, including in commercial projects, with no attribution required.
What tech stack does Hello Gatsby Starter use?
Gatsby with TypeScript is the framework, TailwindCSS and TailwindUI handle styling, HeroIcons, Hero Patterns, HeadlessUI, and unDraw supply UI assets, and MDX plus Markdown are the content formats. ESLint covers type-checking, and SendGrid provides email delivery for the contact form.
How do I change the default purple colour scheme?
The starter ships with a purple colour palette to match the Gatsby logo. The README instructs you to perform a global search-and-replace of '-purple-' with your preferred colour name across the project, then rebuild.
How do I create a new blog post?
Add a new Markdown or MDX file to the src/mdx/blog subdirectory and it automatically becomes a blog post. Use the provided src/mdx/post/2000-01-01-template.md file as a base for the expected frontmatter fields.
Does the contact form work without configuration?
No. The contact form needs two environment variables to send email: SENDGRID_API_KEY and SENDGRID_AUTHORIZED_EMAIL. These are set either in a local .env file or on the deployment host.
Pricing
Hello Gatsby Starter is free: it is published under the 0BSD open-source licence, so there is no licence cost and no paid tier. The only external account you must provide is a SendGrid API key if you want the contact form to deliver email.
Alternatives
Gatsby Starter Default — the official Gatsby starter that Hello Gatsby Starter builds on, providing a minimal base without the blog, TailwindCSS, or SendGrid integration.
