robbin.works

Hello, Gridsome!

12 Dec, 2019 // 3 min read
Hello, Gridsome!

Earlier this year I wrote a post about generating a static bundle of my Laravel site in order to host it statically on Netlify. This made me take a closer look to the whole JAMstack shananigans.

I finally had some time left-over to give it an honest try. I was looking for something that utilizes Vue.js (💚) since that's my go-to javascript framework and started goofing around with two options; Nuxtjs and Gridsome.

After some evaluation I landed in Gridsome, it just felt "more me".


So, what is Gridsome?

Gridsome is a free and open source Vue.js-powered framework for building blazing fast static websites. The use of a centralized data layer in GraphQL makes querying/filtering data from whatever source you prefer a breeze – the data source can be an API, headless CMS or just plain markdown files to mention a few. Gridsome is heavily inspired by Gatsby for React.

Gridsome is a free and open source Vue.js-powered framework for building blazing fast websites & apps that are fast by default 🚀.

Migrating the content

In all fairness, my previous site had literally like one post and one sub page. Nothing fancy whatsoever, my content was already written in markdown which made the switch effortless, basically – I just copy-pasted the content from one place to another.

Taking into consideration I hadn't been using Gridsome at all in the past, it only took me about an hour to create a site (read: without using any of the available starter templates) with the same content and design I used on my previous site, with some tweaks and improvements.

That's pretty fast I think, definately one of the big positives with Gridsome – the ease of getting up and running quickly.

The setup

Getting started is pretty straight forward. To create a new project and fire up a local dev server, all I had to do was following these steps;

$ yarn global add @gridsome/cli
# or...
$ npm install --global @gridsome/cli

$ gridsome create my-gridsome-site

$ cd my-gridsome-site

$ gridsome develop

That's it, with these 4 commands I now had a site up and running with the following features;

  • Hot reloading
  • File-based page routing
  • Static file generation
  • Data sourcing
  • GraphQL data layer
  • Automatic code splitting
  • Paginated content
  • Progressive image lazy loading that resizes and crops images on the fly

🤩 Not to mention, at this point the site was already ready to be deployed on Netlify with an SSL certificate.

Additional configuration

The purpose of this post is to share my thoughts on Gridsome as a first-timer, therefor I wont go into detail on how I went by installing and configuring each of the additional plugins/packages I used.

I'll save that for future posts.

Anyway, in short – to make things more spicy and to match my personal preference, I installed and configured the following external packages/plugins;

  • Markdown support for my blog posts (Link)
  • Filterable taxonomies on my posts (Link)
  • Tailwindcss + PurgeCSS (Link)

Granted Gridsome is packed with great features out-of-the-box, they also have a really good plugin ecosystem which makes it convenient to implement any additional features you might need.

Adding Tailwindcss is basically just a one-liner and you're done. In case you want to use Purgecss you'd have to go a little further than that, still very easy to setup. In fact, there's a section explaining the process in the documentation.

However, if you don't want to setup Tailwindcss + PurgeCSS on your own, there's a plugin that will do just that for you. 😅

Conclusion

The people behind Gridsome has truly done a wonderful job, I had a blast creating my first site using it and I will definately use it in future projects.

Although Gridsome isn't very old (initial release late 2018) it has already come a long way and is in my opinion a super viable resource for building static websites. The documentation might be lacking some content, although I expect this to get improved in the near future.

Considering how far this project has come already being in the early stages I can't wait to see what's next! 👏🏻

So, if you're looking to get started on a JAMstack project using Vue.js and haven't tried Gridsome yet, you really – like really really should give it a try!

👨🏻‍💻

~ Robbin

#jamstack #gridsome #vuejs #netlify #tailwindcss #purgecss