Into the Blue Hour
a vyonizr's blog

Migrating to GatsbyJS

GatsbyJS vs Jekyll

GatsbyJS vs Jekyll (source: Medium)

It has been only two days ago since I released this platform on Jekyll.

Yes,

I said that I am more concerned about the content. But, after reading some references, someone said that Jekyll builds slower when it comes to loads of pages.1

I want my blog to futureproof. I remember my colleague Adib Firman once said he built his blog with GatsbyJS. Then I realized one of the advantages of using it—easier to navigate between pages because its Link component won’t trigger a full page refresh.

Migrating 📦

I love the minimalism of Jekyll’s Noir theme and I want to bring it together. Converting Shopify’s Liquid into React was challenging. I kept the SASS files instead of installing styled-components like I usually do to save time. Then there came a little issue.

Jekyll and GatsbyJS have different parsers. It is a different world. Jekyll uses Kramdown while Gatsby uses remark. There is a significant difference on how it parses syntax highlighting as they have different class names and attributes. So, I did a workaround using gatsby-remark-prismjs. Some required custom styling to replicate Noir as close as possible.

During the development, I learned cool stuff:

  1. I used GraphQL once on a project, but not as deep as this one. I wish this can be a new API standard sometime in the future.
  2. I got my hands dirty on SASS even if it’s only for variables and imports. The rest was just like regular CSS.
  3. They are right about GatsbyJS plugins. I’ve never thought it would be very helpful. I used to take it for granted.
  4. gatsby-plugin-catch-links is your friend when you want to navigate to local links
  5. gatsby-remark-external-links makes handling attributes for external links on Markdown comes in handy to prevent security vulnerabilities2

Nevertheless, I keep my Jekyll as a memento on a branch. Time to celebrate one more time, I guess? 🥳


  1. Slant, Jekyll - What are the best solutions for a personal blog? [website], https://www.slant.co/topics/329/viewpoints/4/~best-solutions-for-a-personal-blog~jekyll, (accessed June 4 2020)

  2. web.dev, Links to cross-origin destinations are unsafe [website], https://web.dev/external-anchors-use-rel-noopener/, (accessed June 5 2020)