Headlessness

When I first read through the challenge I thought to myself “Why the barnacles would I need a CMS for my insignificantly abysmal blog?” Of course the answer is I don’t and the added complexity of integrating some other API into my project isn’t doing it any favours either. But then I thought, “Why not?” If successful, it’s something I can add to my repertoire of skills should an ideal situation arises.

the steps

step 0: pick a headless CMS

There are so many options of CMS’s out there, many with specific target audiences e.g. Shopify for ecommerce. I have chosen to go with Contentful as my headless CMS. It seems like top pick in Gatsby and thus I presume it has a great underlying developer experience, community support and docs.

step 1: play around with a starter eg gatsby-contentful-starter

Basically, just start a new project and clone the gatsby-contentful-starter to look at the source code. Through this method I found out what to query, how to set up my data, etc. It also gave me the little comfort of not destroying my current project (although I can always revert changes with git). I just felt like playing around with it and trying to understand / reverse-engineer it was the way to go.

step 2: skip step 1, just add gatsby-source-contentful

After playing around with step 1 and gawking at the code, sifting through what’s relevant and irrelevant, useful or not, you come to the conclusion you’ve got the gist of it and no longer want to waste anymore time mucking around. You’re ready to shove this thing in.

Just npm add gatsby-source-contentful and watch the magic happen. And by magic, I mean carnage as your compiler starts spewing up gorgeous red errors which you then slowly but surely tend to.

Which leads us onto the final step…

step 3: ad hoc the 💩 out of it

It’s time to use those excellent problem solving skills you claim to have, so proudly stamped on your CV under your skills section, to resolve these conflicts and make this thing fly. It’s a surefire way to stroke your ego and reaffirm your adept coding skills.

Use that google-fu, pro-stack-overflow-copy-and-paste and your persistent pestering inquisition within the Gatsby discord channel. I’m sure the answer’s out there, waiting for your question.

Some useful hints from my trials and tribulations:

• when querying your md/mdx from contentful, make sure you query the childMdx > body
• and for images being queried its …GatsbyContentfulFluid not …GatsbyImageSharpFluid (as it normally is when queried locally)

final thoughts

I’m actually surprised I managed to pull this through. I anticipated this would be much harder but I’m surprised that it’s not—generally the case, isn’t it?

However if you do get stuck, I would highly recommend reaching out to the folks within the Gatsby discord. I’m usually active on there. Or feel free to message me joshuawritescode@gmail.com