Gatsby Starter Lavender

Gatsby Starter Lavender is a Gatsby blog starter that creates a minimal, readable blog interface, built by blurfx and published on GitHub under a Zero-Clause BSD license. It takes blog configuration and Markdown content as input and produces a statically generated site deployable to Vercel, Netlify, or Gatsby Cloud.

What is Gatsby Starter Lavender?

Gatsby Starter Lavender is a blog template for the Gatsby static site generator, designed to strip away visual clutter so articles take center stage. It uses TypeScript throughout the source, including src/pages/index.tsx, and Stitches for styling, with theme colors defined in src/stitches.config.ts. The template inputs blog settings and content, then outputs a production-ready static blog, with a live demo hosted at https://gatsby-starter-lavender.vercel.app.

Key Features

• Minimal, readability-first design — The interface deliberately avoids decorative elements, focusing on comfortable reading of long-form text.
• TypeScript source — The main page and configuration files are written in TypeScript, enabling type checking during development.
• Stitches theming — Both light and dark themes are controlled from a single src/stitches.config.ts file, where you edit a default object and a darkTheme object.
• Centralized blog config — Edit blog-config.ts to change blog information like title and author without touching component files.
• Gatsby CLI quick start — Scaffold a new project with npx gatsby new my-blog-starter https://github.com/blurfx/gatsby-starter-lavender, then run yarn dev to start developing at http://localhost:8000.
• Built-in GraphiQL — The development server exposes http://localhost:8000/___graphql, letting you experiment with Gatsby's data layer before writing queries.
• One-click deployment — Official deploy buttons connect the repository directly to Vercel, Netlify, and Gatsby Cloud, so you can publish without setting up CI manually.
• Open-source license — The Zero-Clause BSD license permits unrestricted use, modification, and redistribution.

Who is it for?

• Independent bloggers — People who want a clean, minimal home for essays or articles without the overhead of a feature-rich theme.
• Gatsby developers — Those looking for a lean starter to build a custom blog on top of, with TypeScript already configured.
• Designers and theme tinkerers — Anyone who wants to quickly rebrand a blog by adjusting Stitches theme tokens for light and dark modes rather than editing CSS files.

What can you do with Gatsby Starter Lavender?

• Launch a personal blog: Run the npx gatsby new command to clone the starter, fill in your bio in blog-config.ts, and publish to a static host.
• Implement dark mode: Use the pre-defined darkTheme object in src/stitches.config.ts to switch the entire color scheme with a single configuration.
• Deploy with one click: Use the Vercel, Netlify, or Gatsby Cloud deploy buttons to connect a GitHub repository and automatically build and host the site.
• Learn Gatsby's data layer: Use the GraphiQL interface at http://localhost:8000/___graphql to test queries against your blog's content before writing page queries.

How does Gatsby Starter Lavender work?

The starter follows the standard Gatsby workflow: you clone the repository via the Gatsby CLI, then run yarn dev to start a local development server with hot reloading. Edit src/pages/index.tsx to change the homepage, adjust blog metadata in blog-config.ts, and tweak theme colors in src/stitches.config.ts. When you run a production build, Gatsby compiles everything into static HTML, CSS, and JavaScript files that you can host anywhere.

FAQ

Is Gatsby Starter Lavender free?

Yes, the project is released under the Zero-Clause BSD license, which allows free use, modification, and redistribution for any purpose, personal or commercial.

What styling approach does it use?

It uses Stitches, a CSS-in-JS library with a theme system. You define colors and other design tokens in src/stitches.config.ts, and the starter includes separate light and dark theme objects.

How do I start a new project from this starter?

Run npx gatsby new my-blog-starter https://github.com/blurfx/gatsby-starter-lavender in your terminal, then cd my-blog-starter and yarn dev to launch the development server.

Does it support dark mode?

Yes, a darkTheme object is already defined in src/stitches.config.ts. You can edit its values to customize how the dark theme looks across the blog.

Where can I see a live demo?

A live demo is available at https://gatsby-starter-lavender.vercel.app. It reflects the default configuration of the starter.