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.
- I'll leave my jekyll site up at https://jekyll.nicholasstees.com for those interested in comparing.
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.