Migrating to Gatbsy

13 May, 2019 — blog, JavaScript — 1 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,

change ./gatsby-node.js onCreateNode function.
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
7
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]
24+
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+    }
40+
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]
13+tags:
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.

Migrating to Gatbsy

What worked

Comments