Migrating to Gatsby from Octopress

Octopress is an awesome blogging platform that has served me well for quite some time but recently I’ve migrated to Gatsby (since it is built with a tech stack I frequently use). The steps I’ve taken to do this are as follows:

1. Setup Gatsby for blogging See here
2. Move posts from Octopress /_posts into the gatsby project in their own folders. Something like /src/pages/2017-08-...
3. Rename each post from whatever.markdown to index.md
4. Update the timestamps in the posts’ frontmatter from date: 2013-04-06 14:11 to something like date: "2013-04-06T14:11:03.284Z"
5. Move each post image from a global, shared image directory to the same directory as the post that references the image. Update the image path in the post.

I was then able to run gatsby develop and see my posts. Unfortunately, I had a little trouble with my images — they were being referenced by gatsby and appeared to be output to the browser but were not showing up. Thankfully, some folks in the Gatsby channel in Reactiflux suggested adding the following CSS:

.gatsby-resp-image-wrapper[style] { 
  z-index: 0 !important;
}

With this addition, my site was up-and-running as expected!

Written by Ryan Lanciaux. Ryan is a developer based out of Ann Arbor who programs in many languages. He is the author of Griddle (react data-grid) and other various open source projects.

Follow him on twitter.