Gatsby Starter with Bulma

Gatsby Starter with Bulma is a Gatsby v2 boilerplate that packages the official gatsby-starter-default project with the Bulma CSS framework and Sass preprocessing. It is a starting point for building static websites and blogs with Gatsby, giving you a preconfigured styling stack so you can focus on content and structure rather than tooling setup. The template lives in the xydac/xylo-gatsby-bulma-starter repository and is designed to be deployed to Netlify with one click.

What is Gatsby Starter with Bulma?

Gatsby Starter with Bulma is a starter (boilerplate) for Gatsby v2 static sites. It takes no input beyond using the repository as a template; it produces a complete Gatsby project with a working layout, styling via Bulma, and Sass compilation configured. It runs on Gatsby v2 and is maintained by the xydac user on GitHub. It is explicitly based on gatsby-starter-default, so it inherits that starter's default structure, including pages and layout components.

Key Features

• Based on gatsby-starter-default — starts from the official Gatsby default starter, giving you the standard file structure for Gatsby projects.
• Bulma CSS Framework — includes Bulma, a free, open-source CSS framework based on Flexbox, so you can use its ready-made components and utilities.
• Sass preprocessor — integrates gatsby-plugin-sass, allowing you to write styles in .scss or .sass files and import them directly into your Gatsby components.
• One-click Netlify deployment — the README provides a Deploy to Netlify button that sets up continuous deployment from the repository to a live site.
• Live demo — a demo instance is hosted at xylo-gatsby-bulma-starter.netlify.com so you can preview the starter's appearance and behavior.
• npm run develop — the standard Gatsby command starts a local development server with hot reloading, so you can edit and see changes instantly.

Who is it for?

• Gatsby developers who want a minimal starting point with Bulma already wired in and who prefer to work with Sass instead of plain CSS.
• Freelancers and agencies building static marketing sites or blogs for clients and wanting a design-agnostic base with a well-known CSS framework.
• Netlify users looking for a quick deploy experience: they can click the deploy button and get a live Gatsby site without touching a command line.

What can you do with it?

• Start a new Gatsby project: clone or fork the repository, run npm run develop, and begin editing pages and styles immediately.
• Deploy a site instantly: use the Netlify deploy button to publish a Gatsby site to a custom Netlify URL with continuous deployment from GitHub.
• Customize Bulma: because Sass is set up, you can override Bulma variables and build a custom theme by editing the included scss files.

How does it work?

After getting a copy of the repository, you run npm run develop to start the Gatsby development server. For production, you can build the site with Gatsby's standard build command and host the resulting static files anywhere. The Netlify deploy button automates the entire pipeline: Netlify imports the repo, runs the build, and hosts the output.

FAQ

Is this starter free?

Yes, this is an open-source starter based on gatsby-starter-default, which is released under the MIT license. The repository is public on GitHub.

What version of Gatsby does it use?

The repository description states it is a "Gatsby v2 Starter," so it targets Gatsby v2.

Does it include Bulma out of the box?

Yes, Bulma is included as a dependency and is ready to use in components. You can also customize its variables through the Sass setup.

Can I deploy it to platforms other than Netlify?

Yes, because Gatsby produces static files, you can host the built site on any static hosting service, including Netlify, Vercel, or GitHub Pages. The provided one-click button specifically targets Netlify, though.