Gatsby Starter Alchemy is a boilerplate template for building static sites with Gatsby and PostCSS, designed to get developers running a first Gatsby project quickly with a blog and page structure already in place.
What is Gatsby Starter Alchemy?
Gatsby Starter Alchemy is a Gatsby starter boilerplate that pairs the Gatsby static site generator with PostCSS processing. It takes a standard Gatsby project structure and produces a configurable static site with support for blog articles and standalone pages, output as static HTML, CSS, and JavaScript. The starter was created by Enrique Benitez (bntz.io) and is released under the MIT license. It is intentionally a boilerplate rather than a theme, meaning you start from a minimal base and build your own design.
Key Features
- PostCSS plugins preinstalled — Includes five PostCSS plugins configured out of the box: postcss-nested, postcss-import, postcss-cssnext, rucksack, and lost.
- Lost Grid grid system — Uses Lost Grid as its grid system, so responsive layouts are driven by PostCSS rather than a separate CSS framework.
- Clear folder structure — Separates files into a "Must edit" group (components, pages/articles, pages/pages, pages/index.jsx, pages/_template.jsx, styles/base, styles/components, styles/main.css, config.toml) and a "May leave as it is" group (utils, wrappers, styles/markdown-styles.css, gatsby-node.js, html.jsx).
- Blog-ready layout — Includes a pages/articles directory for Markdown blog posts and a pages/pages directory for additional site pages, with a main template defined in _template.jsx.
- Configuration via TOML — Site-wide settings live in config.toml, giving a single file for metadata such as site title and description.
- MIT licensed — Free to use and modify for personal or commercial projects, with copyright owned by Enrique Benitez (bntz.io).
Who is it for?
- Developers new to Gatsby: Use this starter to see a working Gatsby project with a minimal file set and learn how pages, templates, and styles connect.
- Static site builders: Start from a tested boilerplate to create a blog or landing page without configuring PostCSS from scratch.
- PostCSS fans: Use the preconfigured PostCSS pipeline with nested rules, imports, cssnext, and Lost Grid to style a site exactly how you want.
What can you do with it?
- Bloggers: Add Markdown files to pages/articles and they become blog posts rendered through the site template.
- Landing page creators: Replace the default index.jsx and add sections in components to build a custom landing page on a static site.
- Portfolio builders: Use the neat folder structure to organize your own components and pages while relying on PostCSS for responsive styling.
Getting started
Install the starter by running gatsby new my-site https://github.com/bntzio/gatsby-starter-alchemy, then cd my-site and npm run develop. This downloads the template, installs dependencies, and launches a local development server you can edit live.
