Migrating To New SSG100DaysToOffload
I started this blog 11 months ago, using Hugo and it's paper theme. As the time went on I added comment section, reduced the page size, changed the look and feel and even changed the hosting provider.
Since 2022, is just around the corner, I decided that I will change once again the look and feel of this blog, but with a twist. By porting the entire blog to another static site generator called eleventy.
The Journey #
To get started, I first cloned the eleventy base blog which provided a strong foundation to work on with already configured rss feed and layout. The hardest part of this entire fiasco was converting the existing posts front matter from TOML to YAML. It took almost an entire hour for this process to get complete, after that only styling was left.
For styling I went with Pico CSS, a minimal CSS framework. Organizing the already present layout from base blog into styled components was easy. Initially I went with card and article layout for blog posts, but later on changed to basic styling. Using pico gives the site auto theme switching functionality without adding anything extra, which is a plus point and with varaibles for changing the color code it's an added bonus.
The time taken for the entire migration was around half a day. My next challenge was to host the new site on the existing GitHub repo and then hosting it on Netlify. Pushing the new code into the existing repo was a streamlined process and I was taken by surprise on how Netlify auto detected the framework change and continued with it's building and hosting process.
New Stuff #
The site now only shows latest three posts, with an attribute linking to the archive page. The archive page now doesn't contain any pagination inspired by Kev's blog post. Similarly, I was again inspired by Kev to add a search page for finding a specific blog post easily.
I'm happy with what I have done. The design is also similar to that of what I had planned. Overall I had fun in recreating my blog using a new static site generator.