ComicsBlogAbout

Blog Redesign, moving from Jekyll to Gatsby

May 29, 2020

During the Memorial Day long weekend I took the plunge and redesigned my blog. This meant adding more features, more comics, and transferring all the assets into a new platform. Since I’ve used JavaScript for 7 years and React the JavaScript library for 4 years, initially I thought the move would be done by Sunday evening. However some glitches meant the move took one week, from Friday to Friday. This post details the technical transformation.

Why the redesign?

Jekyll was my blogging platform of choice 3 years ago, but I was not a fan of its templating language. Meanwhile Gatsby, also a static site generator, was getting all the press. Plus Gatsby uses GraphQL, a technology on my to-learn list. My use cases for the blog include:

  • the index page lists my comics
  • on click comic show a carousel of the comic
  • use the carousel to navigate to other comics, without a page refresh
  • tags for comics and blog posts are visible and clickable
  • on click a tag, filter the listing to show the comics/blog posts with that tag

Repos used

I re-use code as much as possible. Starting with the Gatsby starter blog, since it has the blogging part and a minimal UI, I copied over the carousel from this Hungarian gatsby repo. I used Google Translate to undertand the alternative text for the carousel, an interesting break from the frequent code breakages.

Image Troubles

Saturday was smooth sailing until I deployed the site onto Github pages, same host as my current blog. I saw this.
images not loading The images were fuzzy! I thought it was a Github page issue, so I also deployed the site to Netlify. However Netlify has its own image issue, seen here. broken image links The breakage of image links is a well known issue at Netlify. Since the image breakage occurred only for local links, I uploaded my images onto Cloudinary to use remote links instead. I’ve used Cloudinary before, and can get images and tags using their NodeJs package. After I uploaded the comics and passed the remote links into the index page, Cloudinary’s API requests started failing. The error message said I’ve exhausted their 500 API limit. Since I don’t need additional storage for comics yet, I removed the Cloudinary code from the repo.

Then I took a hard look at the code copied over from the Hungarian gatsby repo. The images were wrapped in a Box component from the rebass package. I removed the component and simply used the <img /> tag. This got the images to show up non-blurry on Github pages.

User test

The site looked like this before user testing.

before user testing I kindly asked my boyfriend to give feedback on the site. He said the cropping of the image was messy and unflattering. An alternative is to display specific thumbnail art.

I agreed with him, and after much manual cropping, here is the result. I’m pretty happy with it for now :) final

Skills learned

Summary

It was a great experience and I’ve learned a ton along the way. Even though some features were not implemented the result is minimally delightful. I’m a big fan of Gatsby because of its fast feedback loop and wonderful documentation. I plan to open source the blog after cleaning up :)

Enjoy the blog!