Barebones Gatsby Starter

Barebones Gatsby Starter is a minimal Gatsby boilerplate that wires together TypeScript, styled-components, MDX, NetlifyCMS, and a full linting/testing toolchain for static site development.

What is Barebones Gatsby Starter?

Barebones Gatsby Starter is a Gatsby project template extracted from an earlier iteration of Artsy's design system, Palette. It provides a Gatsby skeleton pre-configured with TypeScript, styled-components, Rebass, MDX, Jest, NetlifyCMS, and code-quality tools such as lint-staged and Prettier. The repository includes the standard Gatsby API files: gatsby-browser.js, gatsby-config.js, gatsby-node.js, and gatsby-ssr.js. It was created by a developer on Artsy, and the Palette docs site and source code are linked in the README as a more full-featured example.

Key Features

• TypeScript — The starter is written in TypeScript and includes a yarn type-check script for static type checking.
• styled-components — Styling is handled with CSS-in-JS via styled-components, one of the starter's core dependencies.
• Rebass — Rebass, a UI component library built on styled-system, is included for building layout primitives.
• MDX — Rich MDX support lets you use JSX components inside Markdown content.
• NetlifyCMS — NetlifyCMS is pre-configured with local file-system and MDX support, enabling content editing through a CMS while keeping files local.
• Jest — Jest is included for unit testing, paired with lint-staged and Prettier for pre-commit checks and formatting.
• GraphQL validation — GraphQL queries are validated in the editor via eslint-plugin-graphql.

Who is it for?

• Developers starting a Gatsby site who want TypeScript, MDX, and styled-components configured from the start.
• Design system teams who need a minimal base for a documentation or component explorer, similar to how Artsy used it for Palette.
• Content-driven static site authors who want to edit Markdown through NetlifyCMS without losing local file control.

What can you do with Barebones Gatsby Starter?

• Build documentation sites with MDX by embedding live React components inside Markdown pages.
• Set up a blog or content site with NetlifyCMS editing Markdown files on the local file system.
• Create a component library explorer using Rebass and styled-components to display UI primitives.

How does it work?

The starter uses Yarn for dependency management. Run yarn start to launch the Gatsby development server, yarn build to produce a static site, and yarn type-check for TypeScript checks. yarn clean removes Gatsby's cache. The repository includes the standard Gatsby API files and GraphQL validation via eslint-plugin-graphql.

FAQ

Does Barebones Gatsby Starter work with npm?

No. The README explicitly says to use Yarn, as npm may not install dependencies correctly and can cause development issues.

What Gatsby API files are included?

The starter includes gatsby-browser.js, gatsby-config.js, gatsby-node.js, and gatsby-ssr.js, giving developers access to browser, Node, and server-side rendering APIs.

What is GraphQL validation?

GraphQL validation is added via eslint-plugin-graphql, which catches invalid GraphQL queries in your editor. The README notes a TODO to generate usable TypeScript types with apollo-cli.

Is this starter related to Artsy?

Yes. The starter was extracted from an earlier iteration of Palette, Artsy's design system. The Palette docs site and source code are linked in the README for a more full-featured example.