This past weekend, I decided to rebuild my Jekyll blog with Gatsby. So what was the point of this?
First off, if you don't know what Gatsby is, it's a static site generator built for the JavaScript ecosystem and has quickly become one of the most popular static site generators available, fully equipped with React, Webpack, GraphQL, and more.
Jekyll was my go-to static site generator for years. I loved Jekyll since it was simple to use, but setting up build tools around it was a huge pain. In the past, I used Gulp to handle some tasks, and eventually configured something with Webpack that quickly fell apart. I wanted something JavaScript friendly that worked out the box that I could reach for whenever I needed to quickly whip up a static site. Gatsby was the perfect fit and rebuilding my blog was the best way to learn it.
There's a great community around it already with thorough documentation, making it simple to get something up and running without spending hours on a webpack config.
Part of this initiative as well was to explore concepts like CSS-in-JS as part of my seemingly lifelong quest to put together the best CSS methodology. I think I'm making progress with that as well with a combination of TailwindCSS and Linaria. More on that later.
The learning curve for Gatsby isn't that big as well, because it's really just React under the hood. Gatsby just provides tools to make working with React easier. The best part about this stack is that it's not very complicated for a simple blog. That's why Gatsby seems to be the most friendly way to dive into the world of React.
Rebuilding simple sites is a great way to provide context to these tools and progressively level up JavaScript skills.