Migrating to GatsbyJS
It has been only two days ago since I released this platform on Jekyll.
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.
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:
- 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.
- I got my hands dirty on SASS even if it’s only for variables and imports. The rest was just like regular CSS.
- They are right about GatsbyJS plugins. I’ve never thought it would be very helpful. I used to take it for granted.
gatsby-plugin-catch-linksis your friend when you want to navigate to local links
gatsby-remark-external-linksmakes 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? 🥳
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)↩
web.dev, Links to cross-origin destinations are unsafe [website], https://web.dev/external-anchors-use-rel-noopener/, (accessed June 5 2020)↩