DEV Community

Cover image for Fast Static Site with Gridsome and Bulma in 5 minutes
Hugo Torzuoli
Hugo Torzuoli

Posted on

Fast Static Site with Gridsome and Bulma in 5 minutes

Gridsome is a Static Site Generator developed on the top of Vue.js. It builds very fast static sites thanks to the PRPL Pattern and the JAMstack.
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

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

Create Gridsome project

npx gridsome create gridsome-bulma
Enter fullscreen mode Exit fullscreen mode

Add Buefy (Bulma for Vue)

Easiest way to add Bulma styles to your Gridsome project is to install Buefy as a dependency. Buefy is the component library for Vue.js projects based on Bulma.

npm install --save buefy
Enter fullscreen mode Exit fullscreen mode

Edit src/main.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)
}
Enter fullscreen mode Exit fullscreen mode

Write a page

It's time to try it yourself!

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

<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>
Enter fullscreen mode Exit fullscreen mode

Start develop server

npx gridsome develop
Enter fullscreen mode Exit fullscreen mode

Access to http://localhost:8080/, and you should see this page:

Gridsome Bulma example

This template has been generated with Bulma Builder, 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!

Top comments (2)

Collapse
 
arimet profile image
Anthony Rimet

Thank you for this tutorial !
Development completed in less than 5 minutes! All I have to do now is having fun and make a static site :)

Collapse
 
zooly profile image
Hugo Torzuoli

Thanks for your feedback ๐Ÿ˜