How was the migration process from Jekyll to Gatsby?
When I wrote this article, I had recently migrated my blog from Jekyll to Gatsby during my medical license due to a surgery in January, 2022. At that time, I saw an online store, Marin Brasil, using a technology that made it very fast. At the time, they were using Gatsby JS. Although they use NextJS today, I think to share how the migration was is still a good idea up to this day.
Design
First, I used Adobe XD to plan what I was going to do (sorry Figma folks, it’s what I know hehe). I wanted to do the project really from scratch.
This was the initial design:
Home
Menu
Search
During development, some things changed, like some colors and some icons I got from styled icons. I planned everything, I have the XD file that I will share here soon.
The idea here was to make it similar to the Minima theme from Jekyll, changing very specific things like the colored categories, the search, the menu, and the dark mode (which is not in the design).
Development
To develop the blog, I watched a very good course by Willian Justen, which is “Gatsby: Create a PWA site with React, GraphQL, and Netlify CMS”.
Features and technologies
Dark Mode
I’ll make a post explaining how the dark mode was done. I had seen this technique in another article from CSS Tricks, in addition to having seen it in the course I mentioned earlier. It basically consists of defining some CSS variables for it and through two CSS classes (light, dark) placed on the body, we can easily make the change with JavaScript. It works very well and is supported in almost all modern browsers according to Can I Use.
Algolia
Algolia is an excellent tool for search. Basically, you send your posts through an API and when consuming it on the frontend, in addition to extremely fast indexing, some features like spelling check, the instant search itself which is what I use on the blog, make the tool essential for small, medium, or large blogs or websites. Oh, the free plan is also quite generous, you know?
Netlify CMS
Soon I want to make a more detailed post about Netlify CMS and how I implemented its features in the blog. But this is what it looks like. It is open source, and automates the process of opening a Pull Request in the repository to create a new file with markdown and make the commit, in addition to facilitating the upload of images in the same way. The process of writing a post becomes much less burdensome and quite user-friendly.
Gatsby
In short, the whole site was made with Gatsby. It is an incredible technology used to generate static sites with React, with the main focus on performance, but by generating static files, it makes the frontend not become insecure and not create gaps for invasions. It is really popular in the market and the community has made hundreds of thousands of plugins to meet any needs that we as devs have already felt.
And the old URLs?
If you look closely, I migrated the format of the URLs.
Before it was like this:
Now it’s like this:
As I only had 8 posts, I ended up doing the process manually, but I could have written a script for it.
---
redirect_from:
- /dicas/2018/06/21/7-dicas-para-a-integracao-perfeita.html
title: "7 tips for perfect integration"
date: 2018-06-21 18:55:41
category: tips
thumbnail: /assets/uploads/integracoes.jpg
description: Nowadays, many companies
that make their own website to enter the web decide not to give up their ERP.
color: "#1abc9c"
---
This section of an article is the front matter. In it, you put metadata of the article like title, date, category, thumbnail, etc. With the help of a plugin called gatsby-redirect-from, you put the list of desired URLs from where users will come from, the source URLs, in an attribute called redirect_from, and through that, I was able to achieve my goal of redirecting old traffic to this new slug.
Furthermore, as in Netlify CMS you declare which attributes you want to fill through the panel, I also included redirect_from in that list.
To make redirect_from work, a tip if you use the plugin gatsby-remark-relative-images: basically it will convert all relative URLs in your front matter to the images generated with Gatsby’s optimization. The problem was that it was recognizing redirect_from as an image, for having a relative URL, and consequently was causing an error in the build. The only thing I needed to do was add redirect_from to the exclude attribute in the plugin settings within my gatsby-config.js:
{
resolve: `gatsby-remark-relative-images`,
options: {
name: "uploads",
staticFolderName: 'static',
include: ['thumbnail'],
exclude: ['redirect_from'],
}
}
I even made it redundant as I put thumbnail within include and redirect_from in exclude. In the end, it worked perfectly. It’s just a reminder in case I want to add or exclude fields to be processed by this plugin.
Going Live
Netlify CMS was made by Netlify, which makes the process of deploying the entire blog quite automated, as Netlify has native support for Gatsby, just needing to do the OAuth login with GitHub to connect the repository in Netlify itself. Oh, Netlify is also free, having some paid plans.
The only point of attention I had to have was regarding the CMS. I was receiving an error when trying to log in with GitHub in the CMS. Just following the steps according to the link below to configure the CMS correctly was enough.
And that’s it!
It was a very good learning process during the development of this blog. Gatsby is amazing and quite customizable. I plan to add other collections inside my Netlify CMS to take the focus just off Posts.