loading...
Cover image for Fast Static Site with Gridsome and Bulma in 5 minutes

Fast Static Site with Gridsome and Bulma in 5 minutes

zooly profile image Hugo Torzuoli ・2 min read

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

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

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)
}

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>

Start develop server

npx gridsome develop

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!

Posted on by:

Discussion

markdown guide
 

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 :)

 

Thanks for your feedback 😁