On Learning Gatsby JS
As I have mentioned now a few times on this website, I am a full stack developer. But my main project at work focuses, mostly, on building the frontend, since a lot of the back end services are already written or I only need to make a few tweaks and pop them on to AWS API Gateway. As a result, I have had the chance to really improve my skills as a React developer. I use create react app, like many of us do to avoid worrying about Webpack and Babel configurations. But I did take some time to learn React more deeply before getting too far into my project. The reason I bring this knowledge level of React to light is because I think it is important to have a really good understanding of React before learning Gatsby because Gatsby is just another layer of abstraction in the frontend world. Abstraction is good and makes things easy and quick, but I think it takes away from knowing how things work under the cover, which is kind of limiting in my personal opinion (but that may not be the case for you and that its okay, too!). So I will briefly cover how I dove deeper into React, then I will cover my Gatsby journey.
Making Sure React Knowledge Is Sufficient
To improve my basic React skills, I took Brian Holt's Frontend Masters React courses, both intro and intermediate (highly recommended), before starting my work project because I knew it was going to turn into a big codebase and I wanted to architect this the best I could, for my future self and other developers down the road. I learned about how to create a react app from scratch, using parcel instead of Webpack, new techniques for hooks, using reach router instead of react router, context, and even using pure react (not that it should be done, cool to see nonetheless). All of these were valuable lessons to solidify my understanding of the react library and it's capabilities. Further, I was able to implement some of these useful techniques into my codebase. As I found my groove in working with React, in my own way, I kept seeking to learn different ways to use the library. Gatsby and Next, kept popping up more and more on my radar, so I finally decided to give Gatsby a go to redesign my personal portfolio and start this blog.
So what did I do to get started with Gatsby?
Starting With Gatsby
First, I panicked. Then I got myself together and just went to read about it in their very well done docs. However, there is SO MUCH information there that it kind of feels overwhelming for how my brain works. I wanted the simplest and most impactful way to just get a basic overview of what this technology can do. I set out to find YouTube videos that would help me get a grasp on how to start, but what I found was either way too high level of an explanation (basically what I already read about in the docs or google search hits). Or I found tutorials that lacked the more in depth information I was looking for. So I used my Frontend Masters (FEM) subscription to take Jason Lengstorf's Gatsby course. This was absolutely excellent and what I was looking for. I do highly recommend watching this course. This course taught the basics of building a blog, but also gave some really helpful tidbits about plugins to use or even lower level concepts about how or why the technology was built a certain way. This tutorial used no Gatsby starter and used MDX and some other plugins to turn markup pages into blog post pages. I knew this was not going to be the approach I wanted to take, but still very helpful to see this implementation.
Getting Started with Sanity IO
So once I made it through this course, I set out to build my own blog and portfolio site. It was tempting to just want to copy the project I had just built with the FEM course, but I wanted to use Sanity IO, after hearing about it on a podcast, and I wanted to try a different approach and make my own mistakes. So I found the Gatsby Sanity starter and installed that, their repo has pretty good documenation and it was really quite easy to set up. You just go to the sanity blog starter page here, then log in with your GitHub (there are other options too), then connect with your GitHub and Netlify account and the setup magic is automated for you. You can then clone the repo into your text editor of choice and start having some fun. They have some documentation on how to get started with local development in their README, which was clear and got the job done.
Getting Started with Customization
Of course, the point of creating your own portfolio, is to do just that, make it your own! So I knew I was going to be making a lot of changes to this starter. It felt a little overwhelming at first because it was a new code base and it can always be a little hard to orient yourself around a new repo. But with the skills I have learned as a developer over the years I was able to get started quickly. How do I approach a new code base? I run through files that look familiar, like index.js is most likely to be the base file for the whole app, then I look for familiar components like nav, app bar, or header. Basically, it is like getting a new Lego set and just looking through all the pieces to see how you can build something with all the cool pieces you got in the box. After that, continuing with this Lego analogy, I start putting pieces together or just breaking some apart to see how they work, or what they can or cannot do for what I am expecting or need. This whole starter becomes a playground to experiment with the styling and component functionality. I can now add a component that I know I will need or just change one already there to fit my needs. Here are some things I used to help with the customization of my portfolio:
- https://getwaves.io/
- https://html-css-js.com/css/generator/text-shadow/
- https://icons8.com/illustrations
- I used photoshop, a scanner, and water-coloring for my little sprout logo
Conclusion
Overall, I will say that if you have a desire to learn Gatsby, then building a blog/portfolio website is a good way to start! It can feel a little daunting to think of the right way to get started with so much information and tutorials out there, but even if you just get started I am certain you will have a lot of fun learning something new. Also, I will say that I had started with the intention of using the Jason Lengstorf FEM class as my guide, but knowing that I also wanted to use Sanity, it kind of let me in another direction. I had 2 repos going at one point, but I just stuck with the one that felt right in the end and I am happy enough with the result.