Skip to content
Chandan Kumar

Migrating to Gatbsy

blog, JavaScript1 min read

I planned to use Gatsby for a long time now, but deferred it for a very long period of time.

There was no real strong reason to migrate from Jekyll to Gatsby. I wanted to try out Gatsby beyond "Hello World", and migrating something that was live would have given a good hands on. So this blog. It wasn't a breeze, I wanted to preserve the existing URLs of my blog. I tried out the steps given at this Gatsby post but it did not work for me. Below is what I did to get it working.

What worked

Update I did a few things diffently and will write up a separate blog for it.

original content below

For sometime my blog has been hosted on Google Cloud and as a part of this migration, I have decided to move the host to Netlify. So that it's easier to compose things. Plus there is some recurring charge on GCP which I am not sure why I am being charged for. Netlify provides this template and went with it.

So some of the steps mentioned on Gatsby were not necessary for me. Two things that I had to do,

  1. change ./gatsby-node.js onCreateNode function.
  2. Change all existing template to include templateKey and change categories to tags. This step was time consuming, rather, boring as I manually made the edits to each of the existing markdown template.

Changset of ./gatsby-node.js

1diff --git a/gatsby-node.js b/gatsby-node.js
2index 1c73a4e..df58c17 100644
3--- a/gatsby-node.js
4+++ b/gatsby-node.js
5@@ -77,11 +77,31 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
6 fmImagesToRelative(node) // convert image paths for gatsby images
8 if (node.internal.type === `MarkdownRemark`) {
9- const value = createFilePath({ node, getNode })
10- createNodeField({
11- name: `slug`,
12- node,
13- value,
14- })
15+ const value = createFilePath({ node, getNode, basePath: `pages` })
16+ // console.log('value:', value)
17+ if (value && value.includes('/blog')){
18+ BLOG_POST_SLUG_REGEX = /^\/blog\/([\d]{4})-([\d]{2})-([\d]{2})-(.+)\/$/
19+ const match = BLOG_POST_SLUG_REGEX.exec(value)
20+ const year = match[1]
21+ const month = match[2]
22+ const day = match[3]
23+ const filename = match[4]
25+ const slug = `/blog/${year}/${month}/${day}/${filename}/`
26+ // console.log('slug:', slug);
27+ createNodeField({
28+ name: `slug`,
29+ node,
30+ value: slug,
31+ })
32+ } else {
33+ console.log('slug-original:', value);
34+ createNodeField({
35+ name: `slug`,
36+ node,
37+ value,
38+ })
39+ }
41 }
42 }

Git diff of a sample post.

1diff --git a/_source/_posts/2012-05-09-hello-octopress.markdown b/_source/_posts/2012-05-09-hello-octopress.markdown
2index 03a748b..080974c 100644
3--- a/_source/_posts/2012-05-09-hello-octopress.markdown
4+++ b/_source/_posts/2012-05-09-hello-octopress.markdown
5@@ -1,9 +1,10 @@
6 ---
7-layout: post
8+templateKey: blog-post
9 title: "hello octopress"
10 date: 2012-05-09 19:20
11 comments: true
12-categories: [octopress]
14+ - octopress
15 ---
16 If for some reason it's not obvious, this site is powered by Octopress. I am
17 fascinated with simplicity of octopress. After playing around with it for sometime,

In addition I have to update the template to my taste, as the original template is something to with Coffee store.


Copyleft. WTH
Theme by LekoArts