Malcolm Finlayson

A Brief Introduction to Gridsome

Published:
Author: Malcolm Finlayson

Gridsome is a Vue.js-based static site generator (SSG) / single page app (SPA) hybrid, ‘heavily inspired by’ the React.js-based Gatsby.js. As it happens, this site was built using Gatsby, and is now built with Gridsome.

When I was first getting started on building this site, I had a rough idea that using Gridsome (or rather Gatsby, as-was) could be a good idea. However, I wasn’t 100% clear on why, and what the difference would be to a plain old SPA. If you’re in the same position as I was - or just wondering what all the fuss is about Gridsome, Gatsby, or SSGs in general - then hopefully this article will clear things up a bit for you.

What is a Static Site Generator, and why use one?

The first web page I ever created (a portfolio site for FreeCodeCamp) was a static page. That is, I manually added the HTML elements (the structure), and the text and images (the data) to a couple of .html files in a folder, and linked them up using <a> tags.

Most web pages we read today aren’t created this way. Instead, an HTML structure is created in advance, and these HTML templates are then ‘hydrated’ with the relevant data later. This can happen in a few ways:

  • Single Page Application (SPA): The user downloads an app that has HTML templates, data, and some code that fetches more data. The pages are created by the app on the users computer, phone, tablet, etc.
  • Server-side rendering(SSR): The user requests a particular page from your server. Your server fetches the required data (based on the url the user has requested), adds it to an appropriate HTML template, and then sends the resulting page back to the user.
  • Static Site Generator (SSG): HTML templates are hydrated with data (i.e. ‘static’ pages of the site are generated) when the site is built, prior to deployment, so when the user does request a page, it’s just sitting there ready to go.

What is Gridsome, and why use it?

Gridsome is both a SSG and a tool for creating SPAs. For Vue users, think vue CLI with SSG functionality bolted on. This combination has benefits for both the end user, and you as the author.

Benefits for users

Gridsome pulls in the data you have available (e.g. blog posts, product listings, etc.) when building your site, to create as many pages of your site as it can with that data (and as much of those pages as it can). So after your site is built and deployed and a user first requests a page from your site, you can then serve up that page, fully, or almost fully formed. This is a fast process, and the user is happy. This is the SSG part.

While the user is checking out this page, the code of your site is loading in the background (the SPA part). When a user requests another page, the app can step in and quickly create the page. The user is still happy (or at least not annoyed by the slowness of your site).

Benefits for you

Aside from the big benefit of having happy end-users, Gridsome has a number of other significant benefits to you. Here are five of the more obvious benefits:

  1. SEO: Although things have likely improved (and will improve further), those little robot spiders that Google et al send out to crawl about your website are ok with fully formed pages that you can provide them, but have a hard time understanding single page apps. That can mean lower scores for your site from search engines.

  Serving up ready-made pages (either through SSR or using an SSG) keeps the spiders happy and unconfused, and means better search engine scores for your site. Having pages ready to go immediately (by using an SSG), makes the spiders extra happy.

  1. Content Creation: If you’re going to be the one creating - or at least aggregating - the content-data for your site, you’ll be glad to know that Gridsome’s build process (with some added plug-ins) can collect and deal with most forms of data (Markdown, json, yaml, csv, CMSs, etc.) - held both locally on your machine and/or remotely.

Of particular note for those creating text content is Gridsome’s ability to work with Markdown files. I could write a whole other post on the wonders of Markdown as a writing format. The tl;dr is that Markdown is a great format for writing anything longer than an email but shorter than a book.

One of Gridsome’s official plug-ins, vue-remark (or a combo of source-filesystem and transformer-remark), will take your Markdown files and turn them into posts like this one. With vue-remark you can even import and include Vue components directly in your Markdown should you wish.

While it is the case that you could use an SPA, SSR, or a SSG to transform content data of whatever form into pages, Gridsome comes pre-configured for this process, and as such gives you both a lot of easy options, and a lot of flexibility in how to automate the creation of pages.

  1. It’s (also) an SPA: A Gridsome app is still a Vue.js app. Although there is, necessarily, a ‘Gridsome way’ that needs followed for pages generated at build time, those pages are still created from regular Vue template pages, that can be fitted out with all the regular SPA functionality you like.

You can also add as many standard Vue components, pages etc. as you like inside and around those data-generated pages, doing anything you’d do with a standard Vue.js app.

  1. An opportunity to learn about GraphQL: Gridsome generates content-pages in a two step process. Firstly, it grabs all the data that you’ve pointed it to, and processes it to create a GraphQL data layer. Secondly, it runs the GraphQL queries that you’ve specified and uses the returned data to turn your template page into actual pages.

While there are plug-ins that can automate much of this, you also have the opportunity to experiment and work with both sides of the GraphQL coin.

  1. A strong ecosystem of plug-ins: As with Gatsby.js, Gridsome development is supported by a wide range of plug-ins that you can use to automate parts of your build process and enhance your site.

While the plug-ins will do a lot of the work for you, they also represent a way to expose yourself to - and learn more about - some of the latest technologies and concepts in building sites (Progressive Web Apps to give just one example).

Getting Started with Gridsome

In my experience, creating a demo app is the best way to get your head around a new framework. So have a go at creating something that will use some data sources to generate pages, for example a (imaginary or real) blog, news site, online store, or set of technical documentation pages. The Gridsome documentation is very beginner friendly, and will walk you through much of creating your first site.

With that said, I’ve found the documentation - while broad in its coverage - perhaps not as deep in places as I would like. As ever, the solution here is some combination of hacking around, taking a break, google -> Stack Overflowing the problem, and if that doesn’t work, posting your own question.

Also bear in mind that Gridsome uses a number of other technologies under the hood, so if you can figure out where the problem is, checking out documentation and searching for solutions for those specific technologies can be helpful.

Conclusion

I hope you’ve found this article useful. If you’re a React person, and have a site that you think would benefit from SSG functionality, your best bet is probably Gatsby.js - as pretty much all I’ve said here applies to it too.

If you’re looking to learn Vue (you should - it’s great 🙂 ), I’d suggest getting used to building out an app or two using ‘vanilla’ Vue first, just so that you’re clear what is Vue, and what is new. Gridsome CLI scaffolds out a fair few extra folders and files into your starter project, and it’s easier to get your head around this when you can single in on the Gridsome-specific features.

Finally, if you already know Vue and have a site that you think would benefit from SSG functionality (or are just curious), then give Gridsome a shot.