Gatsby Starter Blog Grommet

Gatsby Starter Blog Grommet is a Gatsby v2 blog starter that builds a static blog site on the Grommet v2 UI framework, with TypeScript, styled-components, and built-in light/dark theme switching.

What is Gatsby Starter Blog Grommet?

Gatsby Starter Blog Grommet is a starter repository for creating a blog with Gatsby v2, using the Grommet v2 component library for all UI elements. You provide Markdown files in the content/blog folder, and the starter generates a static site with card-style post previews, a sticky sidebar, and responsive layouts. It is maintained by Ganevru on GitHub and has a live demo at https://gatsby-starter-blog-grommet.netlify.com/.

Key Features

• Easily configurable — Site-wide settings live in a single site-config.js file at the root, where you set the title, description, and theme.
• Theme switching — Switch between five Grommet themes — dark, base, dxc, aruba, and grommet (default) — or toggle light/dark mode at runtime.
• Markdown blog posts — Drop Markdown files into the content/blog folder; the starter renders each post with optional cover image and pre-renders static HTML.
• Sticky sidebar — Uses the react-sticky library to keep the sidebar and navigation fixed while the user scrolls.
• TypeScript + linting — The codebase is written in TypeScript and ships with ESLint plus typescript-eslint configs for static checking.
• Pre-commit build guard — lint-staged and husky run ESLint and the full gatsby build on every commit, so broken builds are caught before they reach the repo.
• State management — redux and react-redux are included, following Gatsby's official example, so you can add global app state out of the box.
• Responsive design — The layout is optimized for mobile phones and tablets using Grommet's responsive grid and breakpoint utilities.

Who is it for?

• Developers who want a blog without hand-writing UI styles and components, because Grommet provides the entire component system and the default themes are ready to use.
• TypeScript adopters who need a starter with type safety and an ESLint setup already wired.
• Gatsby learners who want a working example combining Gatsby v2 with a UI library, redux, and Git hooks to study.
• Teams shipping content sites who can configure the whole blog from one config file and keep posts as Markdown files.

What can you do with it?

• Launch a personal blog — Write posts in Markdown, drop them in content/blog, and the starter generates a static blog with a list of card previews and a sticky sidebar.
• Experiment with Grommet themes — Change the theme setting in site-config.js to dark, base, dxc, aruba, or grommet to see how the same content looks under different design systems.
• Deploy to Netlify — The repository includes a Netlify badge and a Travis CI badge, so you can connect the repo and deploy with continuous build and deploy.

How does it work?

Install the Gatsby CLI globally with npm install --global gatsby-cli, then run gatsby new blog-grommet https://github.com/Ganevru/gatsby-starter-blog-grommet. After that, cd blog-grommet and start the development server with gatsby develop. Write a blog post by copying one of the example Markdown files in the content/blog folder.

Pros and cons

Pros

• Pre-commit hook runs gatsby build, so every commit is guaranteed to compile.
• Five Grommet themes and light/dark mode are available without custom CSS.
• TypeScript is built in from the first line.

Cons

• The pre-commit build makes commits slower, as noted in the README.

Alternatives

For a more minimal blog starter, the official gatsby-starter-blog from the Gatsby team avoids UI libraries and theme switching, relying only on core Gatsby plugins.

FAQ

Is the starter free?

Yes, this is an open-source repository on GitHub. You can clone it or use it as a starter with the Gatsby CLI at no cost.

How do I install it?

Run gatsby new blog-grommet https://github.com/Ganevru/gatsby-starter-blog-grommet, then cd blog-grommet and gatsby develop to start a local development server.

Which Grommet themes does it include?

Dark, base, dxc, aruba, and grommet themes are bundled. The theme field in site-config.js controls which one is used by default; you can also switch between light and dark mode.

Why are commits so slow?

The husky pre-commit hook runs ESLint and a full gatsby build on every commit, which intentionally slows down commits to catch build errors that gatsby develop would not surface.

Is there a live demo?

Yes, the project has a Netlify demo at https://gatsby-starter-blog-grommet.netlify.com/ with the default grommet theme.