Gatsby Hello Starter is a Gatsby v2 starter template that pre-configures TypeScript, Emotion, Storybook, and Plop file generators for building static sites.
What is Gatsby Hello Starter?
Gatsby Hello Starter is a boilerplate for Gatsby v2 that wires together TypeScript for static typing, Emotion for CSS-in-JS, Storybook for component development, and Plop for generating new files. It takes a fresh Gatsby project scaffold and returns a development environment with these tools already integrated, so you can start writing components and pages immediately. The starter runs on Node.js with Yarn as the package manager and relies on official Gatsby plugins for features like sitemap generation, robots.txt, image processing, and React Helmet head management. No corporate author is credited on the page; it is distributed as a GitHub repository.
Key Features
- TypeScript — Type checking is enabled through the gatsby-plugin-typescript plugin, so source files can be authored in .ts or .tsx.
- Emotion CSS-in-JS — The gatsby-plugin-emotion plugin integrates Emotion (emotion.sh), allowing styles to be co-located within components using JavaScript.
- Storybook — Storybook (storybook.js.org) is configured for isolated component development; run
yarn storybookto start it andyarn build-storybookto export a static version. - Plop file generator — Running
yarn newtriggers Plop, which scaffolds new files from templates to cut down on boilerplate. - React Helmet — gatsby-plugin-react-helmet manages document head tags for SEO and meta data.
- Sharp image processing — gatsby-plugin-sharp integrates the Sharp library for optimized image handling in Gatsby.
- Sitemap and robots.txt — gatsby-plugin-sitemap generates sitemap.xml and gatsby-plugin-robots-txt creates robots.txt automatically during build.
- Prettier formatting —
yarn formatruns Prettier to keep code style consistent.
Who is it for?
- Gatsby developers who want a TypeScript and Emotion setup out of the box instead of configuring plugins manually.
- Front-end teams that use Storybook to develop and review UI components in isolation before composing pages.
- Developers who automate scaffolding with Plop to generate consistent file structures via a single command.
What can you do with Gatsby Hello Starter?
- Prototype a Gatsby site — Run
yarn developto start a local dev server at http://localhost:8000 with live reload, and use GraphiQL at http://localhost:8000/___graphql to experiment with GraphQL queries. - Build a component library — Use Storybook to document components separately from the site, then export a standalone static Storybook build.
- Generate boilerplate files — Use
yarn newto have Plop create pre-structured files instead of copying and pasting existing code. - Prepare a production build — Run
yarn buildto compile the static site, thenyarn serveto preview the output locally.
How does Gatsby Hello Starter work?
After cloning the repository, run yarn install to download dependencies. The included .nvmrc file lets you pin the Node version with nvm install and nvm use; the optional AVN tool automates version switching when you open the project. From there, yarn develop launches the development server, yarn build produces a production-ready static site, and yarn storybook starts the Storybook environment. Plop generators run through yarn new.
Alternatives
- gatsby-starter-default — The official Gatsby starter; it is minimal and does not include TypeScript, Storybook, or Plop generators.
FAQ
Does Gatsby Hello Starter work with Gatsby v3 or v4?
No. The README explicitly states that this starter uses Gatsby v2, so it targets that major version. To run on newer versions you would need to update Gatsby and all its plugins yourself.
How do I set the Node version?
The repository includes an .nvmrc file. Running nvm install followed by nvm use switches to the Node version pinned there. The optional AVN tool can perform this switch automatically each time you open the project.
What does yarn new do?
It invokes Plop, a file generator. Plop creates new files based on templates defined in the project, reducing manual boilerplate when adding components or other project files.
Does the starter include SEO features?
Yes. It pre-configures React Helmet for managing meta tags, gatsby-plugin-sitemap to generate sitemap.xml, and gatsby-plugin-robots-txt to produce robots.txt during the build.
How do I format code?
Run yarn format, which executes Prettier over the source files in the project.
