Abstract art

100 Days Of Gatsby

At the beginning of the year, Gatsby launched 100 Days Of Gatsby, a way to challenge you to do everything you can Gatsby for 100 days.

Feel free to follow the links to see more on some of the things I used to get this working.

Days 1 - 31

For the first challenge, I am to build a blog with Gatsby for keeping track of my progress. You are reading this so... mission accomplished.😎

Day 1:

The first day was mostly planning, since I already had a little bit of experience building Gatsby sites I knew that I would have to set up a CMS "Content Management System" for managing content like blog posts on the blog. Next up was setting up my dev environment, I already had the Gatsby CLI installed I went ahead to create the site using the Gatsby Hello-World starter template.

Day 2 & 3:

I figured that I would be using Netlify CMS to manage content on my blog and I decided I would use Cloudinary to manage media assets. I also installed the necessary Gatsby plugins and npm packages to help with this. Here's a list of the plugins I installed:

The way Netlify CMS works is it generates Markdown files from documents you create within the CMS and the Markdown file(s) generated are committed to the corresponding folder within your project/sites repo, you can then fetch the Markdown data on your site using a GraphQL query. The Gatsby documentation covers this extensively.

Days 4 - 9:

I had to pause the Blog challenge to finish up on some other Gatsby site I started building late last year, It shares a similar stack to this one.

Days 10 - 15:

I was trying to figure out image transformation for my Cloudinary assets, I ended up installing the gatsby-source-cloudinary and the gatsby-transformer-cloudinary plugins. I had really poor internet and electricity (the plague of most Nigerians), so it took a while to sort it out. Better days ahead I suppose.

Days 16 - 19:

I discovered that I didn't need any of the plugins I mentioned earlier since I could just configure my CMS to source only the asset name and do the transformation from within the manually generated URL. Here is a link to the docs.

Days 20 - 23:

Enter Sanity...

Due to my frustrations with getting Netlify CMS to work properly with Cloudinary, I decided to try out another CMS - Sanity.

I started by using the starter blog Sanity provides for Gatsby and boy was it great. The CMS uses a very familiar approach to structuring content, it is a lot similar to the way data is structured within MongoDB [ Schema ] so I found it easy to use.

Days 24 - 29:

I familiarized myself with the Sanity starter and then decided to stick with the starter and build my blog with it. What this means is that I get to keep the already existing styles and most of the configurations already in place. However, I have made some minor adjustments to its schema to accommodate future changes I'd be making to the blog.

Days 30 & 31:

I used these two days to finish up the first part of this blog post and get someone to l vet it before I publish it.

So far it has been a blast. The #100DaysOfGatsy challenge has really pushed me to learn new things. This challenge to create my own personal blog has pushed me to overcome a fear I have had for some time now. I have been shying away from starting a blog I guess because I didn't know what to expect, but now I have a blog and this is a good thing. Gatsby makes building a website very easy so that is another hurdle skipped. Expect more good things ahead!