I Added Gatsby, Graphql and Contentful to My Portfolio

Nov 2023


This blog or portfolio was initially built with only HTML, CSS, and JavaScript. However, when I started using it as an actual blog and not just a show-and-tell project, it was clear I needed more tools. Using Gatsby allows me to maintain my template (the HTML and CSS part), and outsource my content management to Contentful while using GraphQL as the query language between them


Gatsby is an open-source static site generator built on top of Node.js using React and GraphQL. A static site generator (SSG) is a tool or software that helps developers create static websites. Unlike dynamic websites, which generate content on the server in real-time when a user requests a page, static websites are pre-built and served as-is to users.

hey Chat, explain that to me like I'm five

Sure! Imagine a website is like a storybook.

A "static site generator" is like a special tool that helps make these storybooks. Instead of telling the story as you read it, the tool creates all the pages of the storybook ahead of time and makes them look nice.

Regular websites are like telling a story out loud, where you make up the words as you go. But with a static site, it's like having all the words and pictures already prepared, just waiting for you to read them.

"Gatsby" is one of these special tools, and it's like a magical crayon that can make the storybook look really pretty. It uses a computer language called "Node.js," some building blocks called "React," and a way to find the right pages called "GraphQL."

So, static site generators are like making a complete storybook in advance, and Gatsby is a special crayon that makes the storybook look amazing.


Contentful is a headless content management system (CMS) that provides a way to manage and deliver content for websites, mobile apps, and other digital experiences. It's often used to separate content from the presentation layer of a website or application, which makes it a popular choice for implementing a "BFF" (Back-end for Front-end) architecture.

hey Chat, explain that to me like I'm five

Sure, little friend! Imagine you have a big box of colorful building blocks. These blocks are like the words, pictures, and videos that you put on a website or a game.

Contentful is like a special box where you keep all these blocks neatly organized. It helps grown-ups (like website makers) decide which blocks to use and how they should be put together.

Now, sometimes, the way these blocks are used on a computer is too tricky for kids like you. That's where the "BFF" comes in. It's like a big brother or sister who takes the blocks from the special box and arranges them just right, making them easy to play with.

So, Contentful is the box for the blocks, and the "BFF" is the helper who makes sure the blocks are used in a fun and organized way on the computer, like building a cool game or a website for you to enjoy!


GraphQL is a query language for APIs (Application Programming Interfaces) that provides a more efficient, powerful, and flexible way to request and manipulate data from a server. It was developed by Facebook in 2012 and later released as an open-source project. GraphQL is often used in web and mobile app development to retrieve data from a server.

I've decided to continue building this blog or portfolio in a private repo for now

» More posts

Let's Connect

You can offer to hire me, collaborate with me, check up on me

Copyright 2020 Ini Olorunnishola olo-ini