Gatsby TypeScript MDX Prismjs Starter is a Boilerplate that scaffolds a TypeScript-based Gatsby site with an MDX blog and Prismjs syntax highlighting.
What is the Gatsby TypeScript MDX Prismjs Starter?
This is a GitHub-hosted starter template for Gatsby 2.0. It takes a project name and repository URL as input via the gatsby new command and produces a complete static website with a configured TypeScript toolchain, MDX blog, and testing setup. The generated site can be served locally with yarn dev or built into a static site in the /public directory with yarn build. The starter is published by GitHub user tylergreulich, and a live demo is available at https://infallible-brown-28846b.netlify.com/.
Key Features
- Gatsby 2.0 — Runs on Gatsby 2.0 with integrated plugins for sharp image processing, offline support, and a web app manifest.
- TypeScript — The whole project, including Gatsby Node APIs and page components, is written in TypeScript and linted with TSLint.
- MDX Blog — Blog posts are authored as MDX files, enabling embedded JSX and interactive components inside Markdown content.
- Prismjs Syntax Highlighting — Code blocks in blog posts are highlighted with Prismjs; themes can be changed by editing
gatsby-browser.js. - styled-components — All styling uses the CSS-in-JS library styled-components.
- Testing Suite — Jest and react-testing-library are pre-configured for writing and running unit and integration tests.
- SEO via React Helmet — React Helmet manages the document head, letting you set per-page titles and meta tags.
- Offline PWA Support — The output is a progressive web app with offline capability and a manifest for installability.
Who is it for?
- TypeScript developers who want a working Gatsby environment without manual TypeScript configuration.
- Technical bloggers who want to publish posts in MDX with syntax-highlighted code samples.
- Front-end teams that need a starter including tests, linters, and SEO basics out of the box.
- Static site users looking for a PWA-ready foundation with image optimization via sharp.
What can you do with the Gatsby TypeScript MDX Prismjs Starter?
- Write a blog with interactive code: Author MDX posts that contain live React components and Prismjs-highlighted code blocks.
- Develop with type safety: Use TypeScript across all source files, including page queries and components.
- Deploy an installable PWA: Build a static site that works offline and can be added to users' home screens via the manifest.
- Run tests immediately: Write component and integration tests with Jest and react-testing-library without additional setup.
How does the starter work?
Install it with gatsby new my-website https://github.com/tylergreulich/gatsby-typescript-mdx-prismjs-starter. Then run yarn dev to start the development server at http://localhost:8000, or yarn build to generate a production-ready static site. To change the Prismjs theme, edit the import in gatsby-browser.js using any theme from Prismjs or the prism-themes collection.
Pricing
The starter is free and open source. The source code is publicly available on GitHub and can be cloned or used as a template without payment.
FAQ
How do I install this starter?
Run gatsby new my-website https://github.com/tylergreulich/gatsby-typescript-mdx-prismjs-starter from your terminal. This creates a new directory named my-website with the starter's files.
Does the starter include TypeScript?
Yes, the entire project is written in TypeScript and includes TSLint configuration for linting. The tsconfig.json and related setup are part of the scaffold.
How do I change the Prismjs theme?
Open gatsby-browser.js and replace the imported Prismjs theme with another one. The Prismjs website lists default themes, and the prism-themes repository provides additional options.
What testing tools are included?
Jest and react-testing-library are pre-configured. You can run tests with yarn test (assuming the standard Gatsby test scripts are preserved).
Can I use this for a non-blog website?
While the starter focuses on an MDX blog, the underlying Gatsby setup with TypeScript and styled-components can be adapted for other static site types by modifying the page templates and routes.
