Skip to main content

Migrating from Gatsby to Docusaurus

· 2 min read

Recently, I made a shift from building this site on Gatsby to embracing the capabilities of Docusaurus. The decision stemmed from a desire to explore the potential of this robust content-focused web framework.

The Power of Docusaurus

Docusaurus is a mature, open-source framework centered on content, constructed within React, and actively maintained as part of Meta’s open-source initiatives. Similar to Gatsby, it harnesses analogous technologies and concepts, allowing developers to swiftly construct websites. One of its standout features is its native support for Markdown as a content source.

Where Docusaurus truly shines is its versatility in content sourcing. While its primary function lies in documentation, easily integrating within your codebase, repositories (both small and monolithic), the framework extends its capabilities through plugins like this very blog feature. This versatility allows for effortless creation of blog posts!

A Hassle-Free Migration

Migrating from Gatsby to Docusaurus was surprisingly smooth. Simply copying and pasting the content from the former and making a few tweaks to the Markdown formatting finished the port. Remarkably, even as a newbie to Docusaurus, the content move took no more than half an hour.

Crafting the Website's Aesthetic

Transitioning from a Gatsby site utilizing a Tailwind-built theme posed a minor challenge, given the default incompatibility with Docusaurus. The default theme of Docusaurus, uses Infinima (yet another production of Meta), and mirrors the layout and theme possibilities akin to Bootstrap.

In the end I needed to copy a few CSS styles into a single stylesheet, and swap out a few SVGs for dark-mode to function, a process that took a couple of hours to achieve.

All-in-all I'm pretty happy with the result.

Building to production

This site is currently built to Netlify, who actually owns Gatsby. The build process needed a single line change for where to store the build.

Future Plans

When I first created the site I wanted to use Cloudflare pages, however at the time of development Cloudflare pages did not support the version of node I needed for Gatsby, hence moving to Netlify. In the near future I'll switch the hosting over to take full advantage of Cloudflare.