- Published on
Images in Gatsby Post Content when using Netlify CMS
- Authors
- Name
- interglobalmedia
- @letsbsocial1
- Link to Images in Gatsby Post Content when using Netlify CMS podcast on anchorfm
Today I finally figured out how to add images to the body of Gatsby markdown posts
when using the Netlify CMS
. It's easy, but not intuitive. No one seems to ever talk about the process, but so many ask how it is done!
After some trial and error, I finally found that all I had to do was first upload the image to my Netlify CMS
backend that I wanted to use in the body of a post. To do this, I click on the Media
tab in the CMS backend
, and upload a new image.
Next I wait for my automated deploy(ment)
to complete. While that is happening, I add the image
via markdown
in my either already published article
, or wait till the image deployment
has completed, create a new blog post including the path
to the image
using markdown
inside the post content body
, and then push
the changes
to Github master
. However, whichever way I do it, I have to make sure to git pull
changes made first on remote Netlify CMS
before committing and pushing my local changes
. And that is it! This is how I added an image to one of my posts:

What this is saying is that my git-large-file-storage.png
png resides in an img
folder inside of my static
folder:
static/img/git-large-file-storage.png
But I don't have to add the static
path, because Netlify CMS
knows to look inside the static
folder and retrieve blog post images
there. So the path is stating that Netlify CMS
can find this image
inside the img
folder in the parent static
folder. And that is it!
To view my gatsby-config.js
and the plugins I use in my package.json
file, please visit the:
I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. I will be including the related resource links mentioned in the podcast of course. Always do. Bye for now!