With the increasing popularity of static site generators now-a-days, we are going to discuss yet another and quite effective static site generator, Gridsome. Gridsome which is a Vue.js framework and based on JAMstack architecture, is getting developers attention from quite sometime. So, let’s dive into Gridsome and get to know some its core features.

What is Gridsome ?

Gridsome is a static site generator for Vue.js based on JAMstack architecture. Gridsome allows us to create static sites with the magic of Vue.js which means Gridsome creates static pages for us which works as Vue SPA after being loaded in the browser.

From above definition, we came to know a term JAMstack. So what is JAMstack ?

What is JAMstack ?

JAMstack stands for Javascript, APIs and Markup stack. JAMstack is not a framework or library, It is just an architecture or philosophy designed to make web faster, secure and scalable.

You can read more about JAMstack here.

How it works ?

Gridsome generates static html that works as Vue SPA after being loaded in he browser. This means we can build both static and dynamic apps with Gridsome.

It creates a html file and a json for every page. After first load it only uses json file to prefetch and load next pages. So, it makes it quite fast to navigate through the site.

How to install ?

For creating a Gridsome project, you need to have nodejs installed on your system. In you have nodejs installed, then just run below command:

npm install -g @gridsome/cli

Then to create a project:

gridsome create my-project

To start server on http:localhost:8080:

gridsome develop

Then you have a new Gridsome project in directory `my-project` and running on http:localhost:8080.

Directory Structure

.

├── package.json

├── gridsome.config.js

├── gridsome.server.js

├── static/

└── src/

    ├── main.js

    ├── index.html

    ├── App.vue

    ├── layouts/

    │   └── Default.vue

    ├── pages/

    │   ├── Index.vue

    │   └── Blog.vue

    └── templates/

        └── BlogPost.vue

1. gridsome.config.js contains configuration for installed plugins

2. gridsome.server.js is optional and used to access Server site options of Gridsome like adding a collection, adding a schema etc.

3. the src directory is same as a Vue src directory. All the view related things goes into this folder. This directory contains:

1. a main.js file
2. a layouts folder for all common layout files.
3. a pages folder for all main pages. Every .vue file you create in this folder works as page for the site.
4. a templates folder for all templates. These are used for a collection node which is imported from a data source or created in the server file.
5. a custom index.html file
6. a custom App.vue file, its just like a wrapper for all the components and pages.
7. a components folder, which is optional, for every small or common components to be used in pages just like Vuejs.

Core Features

Let’s discuss some core features of Gridsome

Pages and Automatic Routing

After you create a Gridsome project, you can find a src folder at the root of the project. In the src folder we have a pages folder. Every .vue file you create in this folder works as a page for your site.

For example, you create a About.vue file in src/pages folder. Then you can access this file and its content at http://localhost:8080/about.

You don’t need to do any extra works for the routing as Gridsome takes care of it with the help of vue-router which is inbuilt in it.

This file structure of the file for a page is same as any other vue file. So, it gives an advantage to the vue developers to build fast and effective pages.

Collections and Template

A Collection is a group of data nodes and each node contains different data fields. For example collection of posts, collection of blogs etc.

It can be added through a data source like external apis, local files etc.

A Template is used to create pages for a single collection node. It is just a vue file like a page.

GraphQL Data Layer

Gridsome uses GraphQL as a data layer where all the internal data imported get temporarily stored. You can get data by simple GraphQL queries and uses it in your views. It is a tool available in development mode.

When you add a collection, its data get temporarily stored in GraphQL data layer.

Every Gridsome project has a GraphQL explorer that can be used to explore all available queries in development. To access this explorer just go to http://localhost:8080/___explore after initialising your project.

Lets look at some data importing sources:

1. By using source plugins

We can import data into our project by using source plugins. For example, using file-system plugin of gridsome we can do like:

  module.exports = {

    plugins: [

      {

        use: '@gridsome/source-filesystem',

        options: {

          path: 'docs/**/*.md',

          typeName: 'Blog'

        }

      }

    ]

  }

2. By using external apis

We can also import data from an external api. For this we have to make change in the gridsome.server.js. For example:

  const axios = require('axios')



  module.exports = function (api) {

    api.loadSource(async actions => {

      const { posts } = await axios.get('http://localhost:9000/posts'); // Just a sample api returning posts



      const collection = actions.addCollection({

        typeName: 'Posts'

      })



      for (const post of posts) {

        collection.addNode({

          id: post.id,

          title: post.title

        })

      }

    })

  }

This will create a new collection in GraphQL named Posts. We can access this collection in our pages and templates by using some simple GraphQL queries.

There are more sources from which we can import data into GraphQL which you can look on there official documentation.

So, we discuss about how can we add data to a Collection which we can access through GraphQL but the question is How can we access this data ?

How to access data in Gridsome pages ?

If you have some knowledge of GraphQL you should know how to query GraphQL data. If you don’t have any knowledge don’t be afraid as Gridsome requires very less knowledge of GraphQL  to start with it.

So, to access data for a collection, let say Posts, we can add a <page-query> block in your page just below the <template> block, with the GraphQL query like this:

  <page-query>

    query Blog ($id: String) {

      blog: blog (id: $id) {

        title

        content

      }

    }

  </page-query>

Then you can just use $page.blog to use data in your template

In pages and templates you have to use <page-query> to query data as they works as pages for the site. And for other like components and layouts you can use <static-query> to access GraphQL data.

Pre-fetching

Gridsome provide a global component <g-link>. It’s a wrapper for router-link from vue-router. It works same as router-link. So, why a new component ? <g-link> not only used for routing but also for prefetching pages.

It use browser IntersectionObserver feature to prefetch the linked pages. It means whenever your <g-link> gets into view, it prefetch its linked page.

<g-link to="/about/">About</g-link>

Compressed Image Previews

Gridsome also provides a <g-image> component globally. It receives src as a parameter just like a normal img tag.

<g-image> will generate a blurry compressed version of the original image you are trying to insert and when the user browser finally receives the images from the server it replaces the compressed version.

<g-image alt="Example Image" src="~/favicon.png" width="100" />

Conclusion

So, that is it. We have covered almost all main features of Gridsome which makes it quite awesome to create static sites. It gives us simplicity of Vue.js in creating static sites. We have not covered all of its apis and you should check them out at Gridsome official documentation. Gridsome is still evolving so it may not be the best choice for you but still a developer should check it out.