Every year, like a damn ritual, I update the underlying tech stack of this site. And why shouldn’t I? Technology progresses and makes things faster, better (arguably). And since I am a nobody in this vast web of madness, I have no-one to answer to. No loyal readers to take their reading preferences in consideration. No loyal users to think about their account migrations. All I try with every update is to keep the old posts so that when once in blue moon someone lands, they can see “something.”
I don’t know when this started but I remember the inspiration behind it — Stammy. He had built his site with Jekyll and around 4-5 years ago, static site generators were cool. The idea that you just need a static server to serve the html files sounded bonkers. And it was pretty fast when compared to Wordpress. Following his post, I was able to set up S3 and Jekyll.
However, as the content grew, Jekyll became slower and slower in building. And that resulted in sub-optimal developer experience.
Then Hugo came in town and it blew me away. The build times were halved. Both worked on markdown files so it was easy to switch.
In 2019, I heard about Gatsby. It sounded like an over engineered solution but I was excited to try this new framework that was “fast in every way that matters.” I felt the learning curve to Gatsby was steep (and I lacked some foundational knowledge of React and Graphql) so I took a course by Meng To and he got me up to speed.
It brought some performance benefits, especially to images. With its built in plugins you could add progressive loading of images and svg filters. It felt futuristic. But complex.
Last month, while building yet another small project — RemoteJobs.store — I decided to try out NextJS. And it clicked for me. Not only the documentation around it was great, but it also has a plethora of working examples that you can simply clone and deploy on Vercel. While building the RemoteJobs.store, I pushed Vercel to its limits — statically generating 8000+ pages during build time under 20 mins.
And so I wondered, what if I took Gatsby out of the equation and move this site to just NextJS? It does static builds and server side rendering (and of course client side rendering). For sure, the setup will not be simpler but I am nobody and I can easily try things without anyone noticing.
While researching the possibility of moving the site to NextJS, I came across Brian’s sitehttps://brianlovin.com/ who is doing some amazing single user experiments on his personal site. Seems like he had done something similar — and it inspired to take a step further by integrating a headless CMS.
The obvious advantage of something like a headless CMS would be that I no longer need to have my repository on my local machine to publish new posts. I can simply write my new posts in web editors of these CMSes that after “publishing” use the Vercel hook to automatically rebuild the static site.
I looked at the available options like Ghost, Contentful and Prismic and settled on Prismic. As Brian realised in his research process before making the move to NextJS that none of these solutions will be perfect and every solution will be a hack. Once I accepted this, I ended up with following system:
- Prismic as a headless CMS where I can add drafts, publish and edit posts
- Next.js to build the website with React
- Vercel to deploy the site
At this point, I should mention that I am still trying to figure out how to import (and export) my existing posts to Prismic and out of it. It seems like that I need to upgrade my Prismic Developer plan to something like “Medium” to have the option of Import/Export. Hopefully, I will figure out something soon.