Gatsby Starter Typescript

gatsby-starter-typescript is a Boilerplate starter for the Gatsby static site generator that scaffolds a new site with TypeScript and the emotion CSS-in-JS library preconfigured. It is maintained on GitHub by goblindegook and installs through the Gatsby CLI with a single command.

What is gatsby-starter-typescript?

gatsby-starter-typescript is a GitHub-hosted starter template that generates a new Gatsby project with TypeScript for type safety and emotion for styling. It accepts a project name and a repository URL as input through the gatsby new command and produces a fully configured Gatsby site with a build pipeline, development server, and 20+ plugins already wired. The author describes it as A Gatsby starter the way I like it, and a demo is hosted on Netlify at gatsby-starter-typescript.netlify.com.

Key Features

The starter activates a large set of Gatsby plugins and developer tools without further configuration. Its most notable features include:

• TypeScript with typegen — gatsby-plugin-typescript enables TypeScript compilation, and gatsby-plugin-typegen generates TypeScript types from GraphQL queries during build.
• Emotion styling — gatsby-plugin-emotion configures the emotion CSS-in-JS library so components can use styled and css APIs directly.
• MDX and Markdown content — gatsby-plugin-mdx processes Markdown and MDX files, while gatsby-source-filesystem watches a content directory for files to pull into the GraphQL data layer.
• Image optimization — gatsby-plugin-sharp and gatsby-transformer-sharp handle image processing, with gatsby-remark-images adding responsive images to Markdown content.
• SEO and feeds — gatsby-plugin-react-helmet manages head metadata, gatsby-plugin-sitemap creates an XML sitemap, and gatsby-plugin-feed produces an RSS feed.
• PWA and offline support — gatsby-plugin-offline adds a service worker, gatsby-plugin-manifest generates a web app manifest, and gatsby-plugin-nprogress displays a top progress bar.
• Deployment extras — gatsby-plugin-netlify applies Netlify-specific settings, gatsby-plugin-catch-links improves in-site link handling, and gatsby-remark-prismjs provides syntax highlighting.
• Testing and linting tools — Jest with react-testing-library is set up for unit tests, and ESLint supports TypeScript, React, Standard, and Prettier.

Who is it for?

gatsby-starter-typescript is aimed at developers who want a Gatsby blog or content site without manually configuring TypeScript, styling, and SEO plumbing. It is useful for TypeScript developers who want type-safe GraphQL queries, content creators who prefer writing Markdown/MDX, and teams deploying static sites to Netlify who want offline support and automatic sitemap/feed generation out of the box.

Use cases

• TypeScript developers: scaffold a new Gatsby project that already has gatsby-plugin-typescript and gatsby-plugin-typegen working, so all components and page queries are typechecked from the start.
• Content bloggers: write posts as Markdown or MDX files, rely on gatsby-remark-images for image handling, and publish with an automatically generated RSS feed.
• Netlify deployers: run the starter with gatsby-plugin-netlify and gatsby-plugin-offline to get PWA behavior and Netlify-friendly build outputs without extra configuration.

How does it work?

Install the Gatsby CLI globally with npm install --global gatsby-cli, then run gatsby new gatsby-example-site https://github.com/goblindegook/gatsby-starter-typescript. After that, npm run develop starts the local development server. The starter's plugin list processes Markdown/MDX files, generates TypeScript types, optimizes images, and outputs a static site ready for deployment.

FAQ

Is gatsby-starter-typescript free?

Yes, the starter is published as an open-source GitHub repository under the goblindegook account, so it can be downloaded and used without a license fee.

Does this starter support TypeScript?

Yes, it includes gatsby-plugin-typescript and gatsby-plugin-typegen, which handle TypeScript compilation and generate types for GraphQL queries during the build.

Can I use Markdown for content?

Yes, the starter includes gatsby-plugin-mdx and gatsby-source-filesystem, so content can be written in Markdown or MDX and processed into pages.