← All posts
System Design

How do I run this site completely for free?

The Technical Architecture that powers this website and the AI Agent that lives here.

· 5 min read

System Design

I used to write my articles on Hashnode. And I ported from it. I had a few issues. It moved to a freemium model breaking stuff that worked for me already. Secondly, constant changes and not having the control over how your site looks and what you want to be the highlight articles was another challenge. My personal belief is that it is an opinionated platform, it is just not calling itself one.

So I decided to make my website from scratch (well, prompt Claude a few times, but you get the point) and made a list of what I intend to highlight on my website. And as a good pre-coding agents era engineer, I sat back to make a list of what I want on my site.

For my background, one thing was extremely important, having an AI Agent on my site that knows about me. So that people (Hiring Managers, Recruiters, and anyone who comes around my blog) are able to know about me and what I write on. Plus what kind of an AI Engineer would I be if I can't demonstrate my skills and building one extremely simple agent was the way to go.

So here's the complete list I had in mind

  • AI Agent that knows about me
    • Guardrails so that it doesn't answer anything apart from my information and the blog content.
    • Knowledge managed through multiple .md files instead of one gigantic prompt.
  • Sort of a personal bias, but I really like Bento Grid designs. So was thinking of having grid approach to the UI.
  • A WYSIWYG editor experience, similar to what Hashnode and Medium have, something I have become accustomed to already.
  • Tag each article I write to a category to easily manage a series which contains multiple articles.
  • I don't want to manage authentication and security of the website.
  • Analytics of what people are reading.
  • I don't want to pay anything for the site.

Not a really great list, tbh. But it was a start to narrow down. And I narrowed down to CloudFlare and OpenRouter. But if it were that easy, this would have been a tweet and not a blog post.

Architecture Diagram

CloudFlare Architecture that runs the site

I wanted to keep things simple — I didn't want to spend a lot of engineering effort just keeping my own site alive. Cloudflare became the obvious choice once I started mapping the requirements against it.

The entire frontend is built with SvelteKit, a framework I personally like better and find it easy to understand and work with. I use it with Server Side Rendering and deploy it on CloudFlare Pages. SvelteKit ships with a plugin for CloudFlare Pages making it easy to build and configure the application for CloudFlare.

For data, CloudFlare D1 was an obvious choice. It has a generous free tier, more than enough for the traffic I get on my site. I club it with CloudFlare R2 for Media storage for all the images that you see on the blog pages.

To manage my own access to publish articles, I use CloudFlare Zero Trust and have configured my email to be the only email that can be logged in to the Admin pages. To make it seamless for me to write my blog posts, I integrated Editor.js for a Notion-like editor experience. 

Finally, OpenRouter gives me free access to Open Source LLMs for the chat agent. I haven't put a lot of effort into it right now since there is a lot less content for it and is managed by knowledge graphs itself. No vector databases for now.

Sending newsletter updates for new articles is managed by CloudFlare Workers which publishes and scheduled drafts from Admin page and triggers an email to subscribers via Resend.

What do I pay for all this?

$0. Nothing. Nada. Everything works out from the generous free tiers of CloudFlare, OpenRouter, and Resend. This cost will scale as the audience grows but for now, it's $0.

AI write-ups and Canadian-finance data reports, roughly every other week. No spam, unsubscribe anytime.

Get in touch Building something with agents, or just want to talk shop? Let's talk. [email protected]