How I Built My Blog

March 6th, 2021

I believe that you are curious about the stack/technologies used in building this blog. Truth be told, curiosity always gets the best of me, just like it's getting a hold of you right now. 😃

Insight

I remember surfing the web, inspecting (by having my browser's devtools opened at most times) other developers blogs and personal site, trying to find one or more inspiration to lead me to my inner mansion of thoughts — I'm not the right person to meet for design suggestions because I'm quite terrible at it. I was only able to conclude what I want after going through this post. It was an eye-opener, looking at other developers' design choices with their blog or personal site.

Going through some blogs in the above-mentioned post, I was able to come up with a list of items or things I find to be recurring on different sites:

• Introduction
• Information about the developer, current and past works
• Communication mediums (Linkedin, Github, Twitter, ...)
• Blogging support for a developer interested in writing

Decision

Considering that there are many wants everyone desires when creating a personal site, the best way to forge ahead is to identify what features/items you want available on the site. For me, it wasn't straight forward but the route I took is to jot those items then find the tools that offer them. Below were the things I was looking for:

• Opinionated but configurable
• Flat files
• Ease of version control
• Blog-like features
• Most importantly, extensibility

I started looking at different tools, WordPress, gatsby, Jekyll ..., but Statamic caught my attention because it provides most of the things I was looking for, and it's built on Laravel — I have experience working with Laravel. The documentation is expressive and informative, I was able to get the up-and-running after setup without any hassles.

After fiddling with Statamic, I got to understand its principles and points of extensibility. But something was missing, Statamic only provides the infrastructure (admin panel, addons/plugins, templating engine, caching, and so on), it does not help you decide what your site should look like. And, I'm quite terrible at coming up with designs but I've been working on that missing 7th sense ( 😂 ) following the guidelines provided by the author of Refactoring UI — I recommend this.

Development

I kickstarted development by installing the necessary libraries, Tailwind, AlpineJS, Algolia (because I just built a blog search functionality yesterday), and other Statamic addons. First, I had to create a separate layout from the default layout that came with the Statamic installation, added a couple of partials to encapsulate repeating UI elements. Then, the Refactoring UI guidelines came into use, starting the design with contrasting, along the line I got to love the black and white look.

Deployment

After completing the base UI elements (typography, cards, navigations, e.t.c.) I had to set up a deployment process because manually deployment is going to be a terrible choice. Only one option came to mind for me, GitHub Actions, and this is why I wanted a tool that works seamlessly with the version control tool, Git. I had previous experience setting up a Github Action so setting another up was straightforward for me. The blog runs an auto-deployment flow on push to the master branch.

The deployment workflow contains optimization of assets, search index on Algolia, backend (templates, configs, cache...).

Conclusion

I feel I made the right choice going with Statamic because the flat files as storage remove the latency when a database is used to store site data.