I have been following Gatsby for quite some time now, and I finally decided to give it a try on my personal website/blog! This post describes the journey of migrating from Jekyll to Gatsby.
Gatsby is an awesome open source framework for building blazing fast static websites and apps. What I find most intriguing about Gatsby is that it is powered by technologies that I use on my everyday dev life: JS, React and GraphQL.
Gatsby is also backed by a vibrant community, providing open source plugins that aid on accomplishing common tasks in an easy manner.
My plan for the Jekyll to Gatsby migration was pretty straight-forward, keep the content markdown structure, as well as preserve the CSS layout.
Gatsby shines on both aspects:
Thus the main migration challenge was setting up Gatsby, and migrating the layout from the Jekyll template format to JSX.
Gatsby offers various project starter templates, and I have selected the most minimal one, which fits my principal of learning a new framework by building a new project from scratch.
My WordPress/Jekyll background has also driven me to separate content into two main categories, pages and blog posts, with different templates.
Gatsby developers provide excellent documentation for getting started, so I am not going to list detailed steps for installing and using the gatsby-cli.
gatsby-nodefile and create templates.
Default configurations are pretty sane, but they can be customized to fit your personal preference.
.eslintrcto configure your ESLint setup. I prefer
eslint-config-airbnband a tight eslint/prettier configuration, failing compilation on errors.
.babelrcfile that extends from babel-preset-gatsby. For example you can add optional-chaining support or any other Babel plugin.
staticGatsby folder so that it can get deployed to the special
gatsby build && gh-pages -d public
gh-pagesbranch. Keep the
masterbranch clean, for source code purposes only.
npm run deploy
I didn't come across any major pitfall, other than the slight annoyance of sometimes having to clear the
.cache folder and restart the development server.
I really enjoyed the process of migrating to Gatsby. Step-by-step building the website from scratch, selecting the appropriate plugins, customizing code. Everything falling within the NodeJS and React ecosystem.
Overall I would highly recommend Gatsby, and of course I am looking forward to using it again on new projects.
Feel free to browse the updated source code and get inspired.