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
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.
Saturday was smooth sailing until I deployed the site onto Github pages, same host as my current blog. I saw this.
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. 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.
The site looked like this before user testing.
- Setup continuous deployment on Netlify, not used in production due to broken local image links
- Use Cloudinary’s Admin API with their Nodejs package to get images, not used in production because of API limits
- Pass data from API requests to existing pages in Gatsby using onCreateNode, not used in production because using local images
- GraphQL debugging: use the in-browser IDE to debug Gatsby image rendering
- Working with YAML: use it to store metadata on comics
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!