What is up with my website?
Sent on May 4th, 2021
You might have know from my previous letters that I'm rebuilding my website using NextJS.
Turns out, recording videos while working on it harder. And it doesn't make sense to record the non interesting parts, or parts where a lot of manual work is involved instead of creative work. There is one video yet to be edited where I set up themes (dark & light) using Tailwind CSS. I worked on the parts where I had to fill up the content from my old website. And I'll record more videos when I start working on interesting things like /bookshelf page, page views counter, etc.
A few notes from the commits I pushed recently
Images were hard. Especially because I was coming from Gatsby where the images are local entities. With next/image and next-mdx-loader, they either should be in the public directory, or should come from an external url. But I have them locally in directories. file-loader came to the rescue.
I'm also thinking of moving the images out of the repository to a cloud like S3 or Cloudinary.
Here is how I used Web fonts for the best font loading performance.
- Add the font files locally (in public folder). No Google Fonts link as the edge cache is more performant
- Set cache headers to let Vercel cache it on the edge
- Preload them using
<link /> font-display: optional
I added next-seo to the website and it was a bliss to work with. All the articles now have JSON-LD schema and I copied over the open graph images from my previous setup which work on top of Cloudinary transformations. SEO gains!
This is an example open graph image. Source - https://images.balla.dev/upload/w_1200,h_600,c_fill,q_auto,f_auto/w_984,c_fit,co_rgb:ffffff,g_north_west,x_108,y_87,l_text:Poppins_64_bold:Hackletter/card
The setup works like this - There is a base image in Cloudinary. It adds the text based on the URL parameters dynamically. The custom url (images.balla.dev) is a Cloudflare proxy which caches the image generated by Cloudinary.
Lots of clouds, 😅
RSS is generated as a prebuild step. It is a node script which gets all the MD(X) files and generates RSS. I've decided not to include the complete content in the feed as I would have few custom components that would need JS to work in the future.
https://github.com/aravindballa/website/blob/master/scripts/generateRSS.js
If you'd like to see the preview of what's going on here is the link - https://website-indol-pi.vercel.app/
That's all for this Tuesday.
Stay safe.