Hello Gatsby Starter

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/blog with frontmatter fields for title, description, author, date, image, and tags; src/mdx/post/2000-01-01-template.md is 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 /tags index 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 /contact page includes a working form that sends email through SendGrid and Gatsby Functions, configured with the SENDGRID_API_KEY and SENDGRID_AUTHORIZED_EMAIL environment 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 via header.tsx and footer.tsx.
• Quality tooling — ESLint and TypeScript type-checking are wired in through yarn lint and yarn type-check, and all site metadata is centralised in gatsby-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 yarn then yarn develop, and edit the Hero, Feature, and CTA components in src/components to reshape the landing page.
• Publish a tagged blog — add Markdown or MDX files to src/mdx/blog and 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 /contact form 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.