I Finally Shipped My New Website!

I've waited a long time for this day. My new website (yes, the one you're seeing right now) is out!

Long Time No Website

While I make websites and web apps for a living, I wasn't able to find the time to work on my own website because of the grandiose plans I had created for it.

With time and experience (and a lot of suffering), I have gradually learnt to tone down my perfectionism and instead work in iterations and try my best to meet budgets. However, this has mostly applied to client work. On personal projects that I'm deeply attached to, I am sometimes still not able to curb my impulse to get started with unreasonable plans or constantly keep increasing the scope of work. Because I have a lot of difficulty in carving out substantial time for these projects, I experience a strong urge to try to meet the final grand vision in the first iteration itself.

I've tried to change that with this year's work. In order to get more things done, I've been breaking projects into strict iterations and focusing on completing just the first iteration as an MVP. I've applied the same principles to this website's development.

Driven Away from Social Media

My relationship with social media hasn't been great. I had been perpetually unhappy with how distracted I'd get by endlessly scrolling and exploring content on these platforms. Lately, I had also been getting concerned about privacy (open Facebook's settings to see how many apps/services have access to your data and you will be too). So, I ended up deleting my Facebook and Instagram accounts earlier this year.

I don't particularly enjoy the social aspect of social media. Managing DMs and constantly responding to responses feel like too much effort most of the time. Writing there seems akin to standing on a stage and making a point in front of an audience, eagerly awaiting their applause or fearing their unfiltered criticism, which tires me emotionally. I'd much rather be talking to myself or a small set of close friends in a corner, away from the masses. To that end, I chose to go back in time to the simpler era of self-hosted blogs (fashionably called the IndieWeb these days). No likes, no DMs; just me posting stuff for myself. Others can see what I'm doing but do not get an easy way to disturb my mental peace.

The main goal for this website was to create an online space where I could write about things that I was learning, had created or found interesting in general. I wanted this space to be something that my future self could look back to with nostalgia and pride (that I was putting in effort towards continuous improvement).

The Tech Stack

The core audience for this website is me. And I love creating unnecessarily complex systems that can handle all the whims and fancies that I randomly have (don't take this too seriously—I create simple systems for work, but having complex ones to toy with is super fun). So of course, this website's plans involve a lot of over-engineering.

My first choice was to use Eleventy and add content using Markdown. But when I started creating the content model for the site, I realised that I needed more structure and would need a CMS to maintain it long term. I am not super comfortable with headless CMSes and my experience with Node is limited, so was mainly looking at using Craft CMS with Twig templates. Craft is a stable system from a solid team and receives good support from a growing community. More than that, I had worked on multiple Craft-based websites during my work at Miranj—it was a tried and tested system that I knew my way around.

While I was installing Craft on my local machine, I felt a twinge of dissatisfaction that I won't be able to keep the content under Git-based version control like I could with Eleventy and would have to deal with the overhead of managing a database (with backups and whatnot). On a whim, I decided to explore Statamic and I'm glad I did.

While I don't like its name (sounds a bit uninspired to me, not to mention difficult to speak—I've heard people call it Stamic, Satamic, Stamatic, Statamatic...), it promised everything that I was looking for. It was flat-file (so no DB to manage and content could be Git-controlled), had a beautiful control panel, included good Markdown and rich-text editor fields natively, supported modularity enough that it could work with the architecture I came to appreciate at Miranj and could be modified to use a database in case the need arose later. Plus, the vibe in the Statamic ecosystem is casual and fun, which seems more appropriate for a personal project like mine as opposed to Craft's more business-y and professional feel.

Like most of my other projects these days, I used Tailwind CSS on this site. This was my first experience using Laravel Mix, which came included with Statamic. It was surprisingly simple to set up Tailwind using Mix despite moving all asset-related files and config to a sub-folder. I might switch to something like Vite later if Mix is discontinued, but it's perfectly adequate for now.

A good friend of mine, Shashank Tiwari, offered to host the website on his Kubernetes cluster. However, after a few days of trying to create a Dockerfile for Kubernetes to automatically deploy the site, I realised that I don't have enough time to get into new DevOps technologies from scratch and do a good job while meeting my expected timelines. A few features planned earlier had required a server setup, but because I had omitted them from this iteration, I decided to instead use Statamic's first-party addon to generate a static site and host it with Netlify. I will probably have to switch to a server later, but it will take a while to get to that point. In any case, I learnt a lot about Kubernetes, Docker and Linux-based systems in general through this effort.

Just Getting Started

As I mentioned earlier, this is the first iteration of the website and I've focused on just getting enough done that I can make it live. There are three main content sections—Articles, Blog and Shared. The Blog contains informal content pieces where I talk about everyday experiences. Articles will be more authoritative pieces that explain how to do something using technology or share a life-lesson in a more formal manner. The Shared section contains links to all kinds of articles, videos, books, etc. that I find interesting. Each section has its respective listing page. Some listing pages might show content from multiple sections, eg. Writings. The homepage lists entries from all sections in one place. Standard stuff.

I generally consider styling to be my biggest strength, so I gave the least amount of time to it in the first iteration. The entire focus was to make the site work and then ship it. Only a little CSS has been added, default Tailwind fonts are being used and there is zero Javascript on the site. The list of things to be added is too long, but among the highest priority items are adding pagination, optimising images and improving the overall styling and readability of content. I'll get to tackling them soon.

More importantly, though, I need to start writing regularly now that I have a website. 😅
Wish me luck!

Helpful Resources

I encountered numerous issues in trying to set this site up and found help in even more places. The most obvious but amazing places were Statamic's docs, forums and Discord server. The Peak starter kit was a good reference to cross-check things from.

The project's architecture is inspired by Miranj's modular architecture as implemented in their Craft Boilerplate code. Some of the directory structure changes are inspired by Craft CMS's project structure.

The content structure and design has been inspired in bits and pieces (this will become apparent with time as the design improves) by Maggie Appleton's site, Amit Gawande's micro blog, Justin Bennett's site, Daring Fireball and Fifty Two.