Blogging With Gatsby

October 9th, 2020

My thoughts on Gatsby are:  It takes a little getting used to, but I'm excited about what I can build with it.

Getting Started

I initially created this blog mostly following this tutorial from freecodecamp (I've edited since).  It's pretty quick and intuitive to make a blog site with Gatsby and GraphQl, once you figure out the setup.  In one file, you set up the GraphQl data query and the page or template into which the information should render.  You can use a variable in the query so it can target some identifying information (like a url slug, id, etc).  Then, it's just a matter of structuring the query to get the information you want, and use the component to format how it should be displayed.  Most of making it was getting my head around the difference between Gatsby and Create-React-App structure.  Gatsby is it's own whole thing with a specific setup, but I found the documentation to be really helpful.  The pages folder is for any typical pages you might want like your "about" page, "contact", etc.  Within the src folder, you have to create a templates folder to house the design component that will render each blog post to its own page.  You also have to do some setup in the node and config files to get things working, but the specifics are all dependent on where your data is located.

Where to house your data

So, there are basically three options for this, as far as I can tell.  You can build your own backend CMS, use an established service like Contentful, or make a folder in your Gatsby blog for all your content.  So, for the blog I am using Contentful, because it handles the rich text content really nicely and it's free space suits my needs at the moment.  Another option I saw was to just make markdown files and keep them in a folder right in your Gatsby blog. 

The other option I found is an open source CMS, called Strapi, that requires a little code to get started, but seems to have a lot of potential!  And it's free. Strapi has an npx quick start you can use to get up and running fast.  You can customize it like a lovely backend API, upload it to heroku, and it just works.  The only thing is, you'll need a data source for your photo content (because heroku wipes it).  I'm using Cloudinary.  You could also use AWS or etc.  There's a simple plugin for each data solution to work with Strapi, similarly to how Gatsby needs plugins to work with content sources like Contentful or Strapi.  It's really easy to set up the media sourcing, and you can upload images to the data storage (AWS, etc) from the Strapi Admin panel. 

Whichever data sourcing you go with,

it's a simple copy and paste to implement automatic updating with a webhook.

Write your post, and send it on its way!

© 2026 Rebecca Page