Gatsby JS - Two Days In

Filed under: developer diary, wordpress, plugins

I started learning how to build a static website using Gatsby JS about 48 hours ago. Previous to this weekend, my experience with react was quite vast but it is quite the opposite when it comes to GraphQL.

The idea of using React JS as a static site generator seemed daunting. Learning new data APIs when those like JSON have always been there for me when I needed them, were an idea not worth fathoming with a delightful 2 year old daughter in the house.

A significant amount of my work lately has been building static trade websites for plumbers, car salesmen, real and various professions that don’t run rolling content like a blog or a news feed. The agency employing me has a long history with Wordpress (as do I) and always requests we build them using Advanced Custom Fields and some form generating plugins. We are constantly battling update and security issues with their 10 years worth of clients. Spare time has been scarce.

After hearing about Gatsby and its endless devotes constantly praising it, I thought it might be worth the dive in to see if it could work to solve some of our long running Wordpress issues, At least with new projects moving forward.

So my partner and daughter were out of the house both days this weekend. I finally found the opportunity.

It pleases me greatly to say the pick up was quite fast. The tougest part has been grasping GraphQL. While I feel I can read it enough to use examples, I am a long way off from being able to write queries as fluently as I am able to in Mongo, DynamoDB or Mysql.

In the 18 or so hours I have found to work on this, I got a few tutorials videos in, read some docs and got the outline of two sites done. You are reading one of them right now.

This blog is generated from data housed in Markdown files. How neat!

The second job was building a landing page styled theme for my personal web portfolio at nicklarosa.net. I would say I am about 90% through it with some final touches to styling and copy before it is complete. With the same amount of images, and a way more modern feel, I am getting results on Google’s page speed insights between 98 and 100 using Netlify’s free hosting! I had never really breached 80 using Wordpress without some third party image crunching, costly servers and some complex layering of caches. I am over the moon!

My only concern is the longevity of the build process. I dont have any javascript based projects that can sit there for a year, and still compile with out some refactoring and reworking to bring scripts up to date. I wouldn't be tellimg the whole truth if I dont admint I have been stuck there before, quite a few times.

To sum it up, I have had a blast learning this widely celebrated technology and am kicking myself for not making time for it earlier.

Gatsby, I think I love you.

Thank you Kyle Mathews and your wonderful team.

© 2020 Nick La Rosa’s Web Dev Blog, Built with Gatsby