Why I use Gridsome
For over two years I’ve been using Gridsome as the static generator for my website. During this time I’ve come to love it and this is a few reasons why.
Built on Vue
Vue is my favorite JavaScript framework of choice. Part of why I love it is because it feels so native to how you build for the web. There is very little abstraction compared to other frameworks. I especially love the structure and the concept of the Single File Component.
Keep your markup, together with logic, and styling in the same file helps my brain connect the dots a bit easier compared to the time when I had to go look for these bits in separate files. But at the same time there is no weird CSS-in-JS going on. CSS and HTML is written in the traditional way and it’s very plain.
Markdown as data source
I like having my content declared in plain text. So being able to use Markdown files as my data source is really convenient. Gridsome uses something called “source plugins” to transform the data from a format you want into something that Gridsome understands. There are many different transformers. If you keep your content in WordPress, in a .txt file, a .yaml file, or something like Contentful doesn’t matter. You can install the transformer plugin and start using the data for your website.
GraphQL
GraphQL acts as the transformation layer between your data sources and your templates. That’s where you take the data your transformer plugin has converted and display it in a template. You can query only the data you need for a specific purpose. GraphQL is a breeze to use, and feels like such a straightforward natural language.
Great developer experience
When you create a site with Gridsome it comes with a great developer experience built in. After installing it and running yarn dev it compiles and do hot-reloading of your changes automatically. No need to refresh the browser to see the updates. It also serves up a version on your local network, so you can get that hot-reloading on your phone and all other mobile devices. It’s super useful.
Automatic image processing
Progressive images is another wonderful thing. When you use an image in your templates, or directly in the content, Gridsome will automatically create different versions of the image and dynamically load the proper version of it only when it comes in the viewport. Awesome!
Pre-built static pages
The whole idea with Gridsome is that it pre-builds your website before sending it over to your web server. So everything is converted to standard static HTML pages with CSS and JS on build time. There is no database. That means the server doesn’t have to generate those files on the fly and it means fewer back-and-forth trips between the server and the client. This makes Gridsome websites super fast to load and browse.
Summary
There are many static site generators out there. It could almost be a bit overwhelming when you start looking at all the options. Other relevant choices on the Vue side would be using Nuxt or VuePress, but they don’t come with GraphQL which is one of the main reasons why I went with Gridsome in the first place. Having GraphQL as the query language for gathering data makes the solution so versatile, quick, and enjoyable to work with.