Rebuilding izzudinanuar.com

From humble beginnings with Front Page, now it is written in TypeScript.

4 June 2023#development
Cover

Background

It's rather remarkable that I've been writing on the internet for the past fifteen to twenty years. It all began with a simple HTML page built using Front Page, thanks to my cousin, Mat Yan. I believe we inherited our grandfather's writing talent, as I find writing to be an excellent means of expressing thoughts. There's a certain satisfaction in typing, and I've been enjoying it ever since I first started clicking the keys.

Changes

Over the years, the blog has undergone numerous transformations, adapting to the evolving landscape of life and transitioning across multiple platforms and designs. During the Front Page era, it boasted an impressive Itachi Uchiha theme that exuded coolness. Later on, I migrated to Blogger and still recall the excitement of having full control over customizing its appearance. In that same year, I launched a PhpBB online gaming forum. However, I eventually made the decision to secure the blog's privacy after discovering that my sister had been secretly reading it.

Upon completing high school, I took a leap of faith and purchased this domain, uncertain whether I could sustain the expenses. As our business started to flourish, we required a website, which led me to WordPress, a platform that ultimately became the blog's preferred choice. Yet, throughout the years of using WordPress, I realized that I didn't truly require most of its features. Consequently, I stripped it down and developed my own content management system using Laravel.

In 2018, I opted to return to WordPress for the sake of simplicity. Finally, in February 2023, as life took a new turn, I relished the opportunity to tailor everything to my exact preferences. Thus, I constructed this blog by integrating Strapi, Svelte Kit, Tailwind CSS, and Typescript into a harmonious blend.

Rebuilding Process

Initially, I envisioned utilizing a headless CMS, expecting a relatively straightforward experience. However, I soon discovered that I had to construct every aspect from scratch, ranging from the sitemap and link parser to the SEO module and beyond. Surprisingly, I found great enjoyment in the process while acquiring new knowledge along the way.

The process commenced with me sketching out my ideas on my iPad, visualizing the desired appearance. I settled on a simple, minimalist design featuring a hexagonal pattern header encompassing the title, description, and a captivating cover image. As for the posts, I allowed them to be associated with multiple categories, fulfilling my essential requirements.

Blog-scratch.jpg

If you decide to embark on this path

Allow me to caution against following this route. It can prove time-consuming, requiring approximately three weekends (equivalent to four to five days) to successfully implement and deploy. However, if you're still keen on pursuing it, I'll provide you with a list of components you'll need to develop:

  1. Efficient slug URL management
  2. Establishing a functional post and category relationship using Typescript
  3. Navigation system
  4. Effective metadata management, encompassing JSON-LD and OpenGraph
  5. SEO component
  6. Sitemap generation
  7. Streamlined asset management on Svelte
  8. Seamless redirection of old WordPress links to the Svelte Kit
  9. These are just a few elements that immediately come to mind, but the complexity of the endeavor will ultimately depend on your specific requirements.

Result

My ultimate aspiration is to achieve a perfect 100% score on every criterion assessed by Google Lighthouse, including Performance, Accessibility, Best Practices, and SEO. With the aid of Tailwind, I'm confident in realizing this objective.

Lighthouse-izzudinanuar