Gatstrap

Gatstrap is a Bootstrap 5 starter for Gatsby that scaffolds a TypeScript blog with Markdown posts, responsive images, and per-page SEO out of the box.

What is Gatstrap?

Gatstrap is a Gatsby starter template that produces a static blog site. It takes configuration from a gatsby-config.ts file and Markdown content from content/posts/ folders, and outputs a production-ready site in public/ when you run pnpm build. The template was built for Gatsby 5.16+ with React 19 and TypeScript strict mode, and it relies on Bootstrap 5.3 via Sass for styling, with no jQuery or Popper dependencies. It is maintained by jaxx2104 and released under the 0BSD license.

Key Features

• Gatsby 5.16+ and React 19 — The starter targets current Gatsby releases with TypeScript strict type checking enabled in tsconfig.json.
• Bootstrap 5.3 via Sass — Styling uses Bootstrap's Sass source so you can override theme tokens in src/scss/colors.scss and src/scss/fonts.scss before the bootstrap import.
• Markdown blog with Prism — Blog posts live in content/posts/ as folders containing an index.md with frontmatter; code blocks are highlighted with Prism.
• Responsive images — The gatsby-plugin-image plugin generates optimized, responsive images from hero files like hero.jpg in each post folder.
• Per-page SEO — The Gatsby <Head> API injects metadata; siteMetadata in gatsby-config.ts drives the navbar title, SEO tags, and the PWA manifest.
• High Lighthouse scores — The readme reports mobile scores of 95+ across Performance, Accessibility, Best Practices, and SEO.
• Developer tooling — Scripts cover pnpm develop, pnpm build, pnpm typecheck, and linting/formatting with Biome; pre-commit and pre-push hooks run checks automatically.

Who is it for?

• Blog authors who want a fast, accessible static site with Bootstrap's look and feel without maintaining their own Gatsby configuration.
• Gatsby developers who need a TypeScript-based starting point with Sass customization and best practices like responsive images and per-page SEO already wired up.
• Teams building content sites who want a consistent structure for Markdown posts and a known-good Lighthouse baseline.

What can you do with Gatstrap?

• Start a blog quickly: run gatsby new my-blog https://github.com/jaxx2104/gatsby-starter-bootstrap, then add posts under content/posts/ with frontmatter fields like title, path, category, and date.
• Customize the design: change the brand color by editing $purple in src/scss/colors.scss or adjust font tokens in src/scss/fonts.scss.
• Publish to any static host: the production build outputs plain HTML, CSS, and JS in public/, so it can be deployed to Netlify, Vercel, GitHub Pages, or any static file server.

How does Gatstrap work?

The quick start uses gatsby new to clone the repository, then pnpm install and pnpm develop start a local development server at http://localhost:8000. Content is authored as Markdown files inside content/posts/; each post folder contains an index.md file with YAML frontmatter. When you run pnpm build, Gatsby compiles the pages, wraps them in Bootstrap styling via Sass, and writes the static site to public/.

Alternatives

• Gatsby's official gatsby-starter-blog — the default minimal blog starter from the Gatsby team, which does not include Bootstrap or come with Sass out of the box.

FAQ

Is Gatstrap free?

Yes, Gatstrap is free and open source under the 0BSD license, so you can use and modify it without restrictions beyond the license notice.

What version of Gatsby does Gatstrap use?

The template targets Gatsby 5.16+ and React 19, with TypeScript strict mode enabled. The exact versions are pinned in package.json after you create a new project.

Does Gatstrap include jQuery?

No. Bootstrap 5.3 is included via Sass and does not require jQuery or Popper, keeping the bundle smaller and the site faster.

How do I write a new blog post?

Create a folder under content/posts/ with a name like 2026-06-01-my-post containing an index.md file. That file must include frontmatter with fields such as layout, title, path, category, tags, description, and date.

What commands are available?

The main scripts are pnpm develop to start the dev server, pnpm build to create a production build, pnpm typecheck for TypeScript checks, and pnpm lint / pnpm format for Biome-based code quality.