Donovan Gomez
Donovan's web development blog

Donovan's web development blog

A Newbie's Experience with GatsbyJS

A Newbie's Experience with GatsbyJS

I really wanted to over engineer my portfolio.

Donovan Gomez's photo
Donovan Gomez
ยทAug 30, 2022ยท

3 min read

Some of you reading this might be in the same boat I'm in right now. You're trying to switch careers from something not tech related. Something that a lot of career switchers are told is that we need a portfolio to showcase our work. I really wanted to create a portfolio, but use it as an opportunity to learn new things as well. GatsbyJS has been mentioned for a while now and I used to see it mentioned everywhere. I didn't know exactly what the advantages of aStatic Site Generator (SSG) are, or even what it a SSG is. So I decided to just try it out and layout my thoughts from a newbie's perspective. TLDR at End <3

โœ… Gatsby is just React!

Gatsby is just React at the end of the day. With how popular React is in today's world you might have already written some React after going through some fundamental JavaScript. You'll feel right at home in Gatsby since a lot of the things that make React dank are there like Components, Context and State.

๐Ÿ‘Œ Plugin Ecosystem

Gatsby's plugin ecosystem is as deep as the Mariana Trench. Despite following videos and the official docs, this is where I started questioning myself. It wasn't overwhelming like when you learn a new concept. It just felt weird because I felt like I was installing so many plugins instead of just going straight to writing code. This might be nothing new to you if you've already had this experience with WordPress. At the end of it all all I had to do was install these plugins to have an extremely optimized website. The plugin gatsby-plugin-image optimized all my images and made them responsive. Gatsby-transformer-remark parses all your markdown files so you can use them for content on your site. There's even in plugin to scrape Instagram data.

image.png

๐Ÿ‘Œ GraphQL Errything

Since Gatsby is just React, you can fetch data in all the ways you are familiar with. I feel like to take advantage of Gatsby you have to use GraphQL to query everything. This came with a pretty large learning curve for me who has not seen what a GraphQL query even looks like. One handy tool is actually the Graphiql playground where you can preview your queries. This was a huge gamechanger for me because this is even available for other APIs you might use in the future that use GraphQL (Like the AniList API.) Using GraphQL I understood why people enjoyed it. You can sort your query in different ways like by date. You can choose what kind of data to receive. An example would be that you have a bunch of blog posts in Markdown with a category. Say you want to only receive the blog posts that have to do with the category of "Cheesecake reviews." and sort it by date starting with the most current. You can use the playground to preview your query and just use that query to get that data!

image.png

โœ… Top Performer

I normally try and get things up and running before I think about performance. Once I got things up to a "acceptable" state I was curious on the Lighthouse scores. We all aspire our website to be BLAZINGLY fast that we as devs kind of meme(NSFW Language) it now but it really is important for the person viewing your site. I didn't think about performance and scored a 98 (on web at east)?!? Looks like spending the time to install those plugins were worth it after all!

image.png

TLDR: There's definitely a learning curve and people have their preferences. I had a good experience making the website with the exception of using GraphQL for almost everything. It's not bad its just something you have to use for Gatsby.

The portfoliobuilt in this article

Checking out NextJS might be next... Till next time beautiful people!

ย 
Share this