A Bootstrap 5 starter for Gatsby — fast, accessible, and ready to fork.
- Gatsby 5.16+ with React 19 and TypeScript (strict).
- Bootstrap 5.3 via Sass — no jQuery, no popper.
- Markdown blog with Prism syntax highlighting.
gatsby-plugin-imagefor responsive images.- Gatsby
<Head>API for per-page SEO. - Lighthouse mobile 95+ on Performance, Accessibility, Best Practices, SEO.
gatsby new my-blog https://github.com/jaxx2104/gatsby-starter-bootstrap
cd my-blog
pnpm install
pnpm developOpen http://localhost:8000.
Edit gatsby-config.ts. The siteMetadata block is the single source of truth
for the navbar title, the per-page SEO <Head>, and the PWA manifest:
const siteMetadata = {
title: 'Your Site',
description: 'Your description.',
siteUrl: 'https://example.com',
author: 'Your Name',
twitter: 'your_handle',
}Theme tokens are at src/scss/colors.scss and src/scss/fonts.scss. Override
Bootstrap 5 Sass variables there before the bootstrap import in
src/scss/gatstrap.scss.
To swap the brand color:
// src/scss/colors.scss
$purple: #00bcd4;Add a folder under content/posts/:
content/posts/2026-06-01-my-post/
index.md
hero.jpg
index.md frontmatter:
---
layout: post
title: My Post
path: /my-post
category: Notes
tags: [example]
description: A one-sentence description.
date: 2026-06-01
---| Command | Description |
|---|---|
pnpm develop |
Start the dev server |
pnpm build |
Production build to public/ |
pnpm typecheck |
Run TypeScript strict mode checks |
pnpm lint |
Run Biome lint |
pnpm lint:fix |
Run Biome check (lint + format) with fixes |
pnpm format |
Run Biome format |
- Fork and clone.
pnpm installto install (Node 22).pnpm typecheck,pnpm lint, andpnpm buildmust pass before opening a pull request.- Pre-commit hooks run
lint-stagedautomatically. git pushrunspnpm typecheckvia apre-pushhook. Usegit push --no-verifyto skip during work-in-progress pushes.- SCSS and Markdown files are not formatted by tooling — follow the
.editorconfigsettings (2-space indent, LF line endings, UTF-8).
Released under the 0BSD License.