Gatsby Typescript Markdown Starter

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/content as Markdown files; each post supports code blocks highlighted with PrismJS.
• YAML-driven categories — Define categories in categories.yaml and 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 in categories.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 templates folder 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.