Fast Static Site with Gridsome and Bulma in 5 minutes
Tags: vue, css, jamstack, gridsome
Published: 2019-09-11 19:02:38

[Gridsome](https://gridsome.org/) is a Static Site Generator developed on the top of Vue.js. It builds very fast static sites thanks to the [PRPL Pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/) and the [JAMstack](https://jamstack.org/).
If Gridsome is in beta version (_0.6.9_ now), it already has a lot of available plugins:
- source plugin for fetching data from Headless CMS
- CSS frameworks

At the moment, there is no plugin for using Bulma with Gridsome. 

![Bulma Gridsome Documentation](https://thepracticaldev.s3.amazonaws.com/i/lan72fmcwew2sqzquewg.png)

Let's see how to add Bulma styles to your Gridsome project!

## Create Gridsome project

```bash
npx gridsome create gridsome-bulma
```

## Add Buefy (Bulma for Vue)

Easiest way to add Bulma styles to your Gridsome project is to install [Buefy](https://buefy.org) as a dependency. Buefy is the component library for Vue.js projects based on Bulma.

```bash
npm install --save buefy
```

Edit **src/main.js**:

```js
import DefaultLayout from '~/layouts/Default.vue'

// import Buefy
import Buefy from 'buefy'
import 'buefy/dist/buefy.css' 

export default function (Vue, { router, head, isClient }) {
  // add Buefy to Vue project with use global method
  Vue.use(Buefy)
  Vue.component('Layout', DefaultLayout)
}
```

## Write a page

It's time to try it yourself!

Edit **src/pages/Index.vue**, replace all the content by:

```html
<template>
  <Layout>
    <div class="container is-fluid">
      <section class="section">
        <div class="container has-text-centered">
          <h2 class="title">Bulma + Gridsome = 💚</h2>
          <div class="block">
            <a href="#">
              <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
            </a>
          </div>
          <div class="columns is-mobile">
            <div class="column is-4">
              <a href="#">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
              </a>
            </div>
            <div class="column is-4">
              <a href="#">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
              </a>
            </div>
            <div class="column is-4">
              <a href="#">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
              </a>
            </div>
          </div>
          <h4 class="title is-spaced is-4">Bulma is working with Gridsome!</h4>
        </div>
      </section>
    </div>
  </Layout>
</template>
```

## Start develop server

```bash
npx gridsome develop
```

Access to [http://localhost:8080/](http://localhost:8080/), and you should see this page:

![Gridsome Bulma example](https://thepracticaldev.s3.amazonaws.com/i/0t9yuqfm1tmgss7gnah6.png)

_This template has been generated with [Bulma Builder](https://bulma.dev/), thanks to the team!_

# It was easy isn't it?

In 5 minutes you have been able to create a new Gridsome project, add Bulma style and get a first working page, great! 🔥

Have you already tried Gridsome + Bulma? Share your projects in comment section!