Gatsby Typescript Markdown Starter is a GatsbyJS boilerplate that combines TypeScript, Markdown content, and a predefined site structure so you can launch a blog or project showcase quickly.
What is Gatsby Typescript Markdown Starter?
Gatsby Typescript Markdown Starter is an open-source starter template for GatsbyJS created by Caelin Sutch and released under the MIT License. It takes Markdown files and a YAML categories file as content inputs and produces a static site with a home page, project pages, category filtering, and a 404 page. TypeScript, ESLint, Prettier, Emotion, and Sass are configured out of the box, so you can start building without setup.
Key Features
- TypeScript preconfigured — Write React components in TypeScript without additional configuration; the starter includes tsconfig and typing support.
- Markdown-based content — Content lives in
src/contentas Markdown files; each post supports code blocks highlighted with PrismJS. - YAML-driven categories — Define categories in
categories.yamland assign posts to them; the site generates filterable category views. - Gatsby Image plugin — The starter is preconfigured with gatsby-image for optimized, responsive images from your assets.
- Emotion and Sass styling — Use Emotion for CSS-in-JS component styles and Sass for global stylesheets, both ready to import.
- React Helmet SEO — SEO metadata is managed with React Helmet, allowing per-page meta tags and social sharing information.
- ESLint + Prettier — Quality tooling is wired up so linting and formatting run consistently across the project.
- Optimized for Lighthouse — The starter reports high Lighthouse scores, reflecting performance and accessibility work.
Who is it for?
- Web developers who want a Gatsby starter with TypeScript already set up and need a clean base for a portfolio or blog.
- Technical writers who prefer authoring content in Markdown and want a blog with category filtering out of the box.
- Open-source maintainers looking for a minimal project page with SEO metadata and a 404 page included.
What can you do with it?
- Publish a personal blog: Drop Markdown files into
src/content, assign categories incategories.yaml, and the template builds a blog with syntax highlighting. - Showcase a project: Use the projects page and home page to present a software project, with images and metadata handled by Gatsby Image and React Helmet.
- Create a quick documentation site: The structure with a
templatesfolder and global styles suits a multi-page static site; customize the categories to organize docs.
How does the starter work?
To get started, run gatsby new gatsby-typescript-markdown-starter https://github.com/caelinsutch/gatsby-typescript-markdown-starter. Then customize the site by replacing the favicon, editing website-config.ts and gatsby-config.js with your information, swapping cover-card.png and main-logo.png in src/content/assets, updating categories in categories.yaml, and adding your own Markdown content.
