Hello Gridsome

Converted from Jekyll to Gridsome

Tagged: webWednesday, March 13, 2019

Converting My Site To Gridsome

I only just discovered Gridsome.org but after a week or so of playing around with I was really happy with it. Which lead me to give it a real world test and convert my personal site to Gridsome. I have been a growing fan of Vue.js and quite honestly jealous of the headway Gatsby.js has been making so I am so happy I ran across this project.

Why not VuePress?

VuePress is a much more known option, however I have found creating anything other than a Docs type site is hard. The product really is geared for those documentation sites. I haven't seen any tutorials or articles showing how to create a typical marketing site which is often what I need to create.

Jekyll Pains

There were not too many issues with Jekyll, but now that I have been doing component based work in Vue.js more often, Jekyll feels very old school. I did want to start working PWA features into the site so Gridsome seems to just be the next logical step.

I should note that Speed/Performance wise the site really didn't improve much at all, Jekyll actually was a few ms faster, since its less javascript running on the client.

What I like and what is better

Gridsome/Gatsby I think hit the nail on the head by adding a database layer at build. I think this is what many static sites have been missing and makes them much more powerful now. I also could ditch my very complicated Gulp.js build in Jekyll since Gridsome can handle my sass and live reloading out of the box.

  • A database layer is awesome in a static site generator
  • Built-in SASS and Live Reloading
  • npm installing components makes your repo much lighter and faster to add features
  • Component based design feels much more modern
  • Deploys in Jekyll took ~2min where Gridsome is right at 1min
  • Using axios in the gridsome.server.js to pull in remote api and manipulate the data before storing in GraphQL is very easy.

Challenges

Overall learning GraphQL was a bit of a challenge, finding a cheat sheet helped alot. And the errors in Gridsome need some improving but it wasn't anything a bit of trial and error couldn't get me past.

  • Errors in Gridsome build on the Console can by cryptic to troubleshoot
  • The amount of imports/requires in pages and components can be a lot to manage
  • Dates were kind of hard to get working, GraphQL is new and I basically had to store dates as strings to get things working.
  • When using a content API Gridsome doesn't download images like Gastby, but its on their roadmap.

Overall I Love It

I don't think Ill be switching back anytime soon and I can't wait for the Gridsome team to keep up with the updates. I also don't mind its a Gatsby clone, I prefer Vue.js syntax and I don't think its bad to have parallel projects incase one goes crazy and takes the project down a random road.