published: 28th of November 2022
Most recently I have been building this site using the 11ty Static Site Generator. 11ty is fantastic, I totally recommend checking it out.
I swore to myself I would never re-write this site in another framework after the last rewrite. when I moved from Rails to 11ty. Well, you know what they say about never saying never....
This year I have been learning (and loving) Rust. To put what I am learning to use, I decided to build a Static Site Generator named Shazam and eat my own dogfood to build this site. This post documents that adventure.
Before I go into the migration itself, here is an overview of the components I am using the build the site.
Tera is a templating engine similar to Jinja, which made the migration from the previous template engine I was using (Nunjucks) pretty straight forward, with a minimal learning curve.
I have been using Bootstrap CSS for the sites that I build for a long time. I have wanted to give Tailwind CSS a try for a while and this seemed like the perfect opportunity. So, codingpackets.com is now styled with Tailwind CSS.
Tailwind has a different approach to Boostrap which takes a bit to get used to. Once you get your head around it, it's pretty rad. I found the docs to be excellent and as long as you are using a reusable components feature it's plesent to work with.
I went through this awesome book which helped me ramp up pretty quickly. It's short and presented in a way that makes it easy to follow along and get familiar with the major pieces of the framework.
I am continuing to use the fantastic highlight.js for syntax highlighting of code blocks.
I still use Font Awesome icons for the few icons on the site. It has served me well for many years.
AWS using S3 and CloudFront is still my weapon of choice here.
I started by building out the site styling. I wanted it to look similar to the existing site, but also polish it up at the same time. Since I moved from Bootstrap to Tailwind it took some time to get my head around things and setup to a point I was happy to start migrating the content. There was also lots of tweaking along the way and I am sure there will be more in the future.
At first, using Tailwind slowed me down alot, but once I became familiar it made things really easy. Layout, Element positioning, Dark mode, all seemed alot easier with Tailwind. Tailwind kind of forces you to use the reusable components features of your language of choice. I created components for EVERYTHING which payed off dividends as I moved through the migration and also into the future.
Migrating the content took some time. I am pushing close to 300 posts on the site, and it was a bit tedious to move them all across. It was mostly using sed and the vscode find and replace feature to get everything in the right format to play nicely with Tera macro's which have a bit different syntax to 11ty.
I also took the chance to add a content menu to all the posts, which is something I have wanted to do for ages.
So... How long did it take?
I started building Shazam on the 19th of October 2022. All in all, it took about a month to migrate the content over and I published the New New New site on the 29th of November. Not bad considering I am also operating Dadlife enterprises, working a full time job and renovating my house, so could only work on this project in the gaps.
That's it! I hope you enjoy the new site. Feel free to reach out if you have any questions about starting a blog using a Static Site Generator.