Building This Blog: The Tech Stack

This blog is built to be as fast, simple, and maintainable as possible.

Here is what powers the site:

Astro

The core framework is Astro. It is a modern static site generator that is perfect for content heavy websites. Astro takes all the code and content, and builds it into plain HTML and CSS before it ever reaches the browser. This means there is zero unnecessary JavaScript loading on the client side, which keeps the site incredibly fast.

graph TD
    M[Markdown Files] -->|Parsed by| A[Astro Content Collections]
    C[Astro Components] -->|Compiled with| A
    S[Vanilla CSS] -->|Bundled into| A
    A -->|Built to| H[Static HTML/CSS/JS]
    H -->|Deployed to| CF((Cloudflare Pages Edge))
    
    style M fill:#f9f2f4,stroke:#d14,stroke-width:2px,color:#000
    style A fill:#ff5d01,stroke:#000,stroke-width:2px,color:#fff
    style CF fill:#f38020,stroke:#000,stroke-width:2px,color:#fff

Markdown and Content Collections

All the blog posts are written in standard Markdown files. I use Astro’s built in Content Collections feature to manage them. This allows me to write posts simply by creating a new .md file in the project, while Astro handles all the heavy lifting of parsing the content, validating the frontmatter metadata like tags and dates, and generating the individual pages.

Vanilla CSS

For styling, there are no massive CSS frameworks or utility libraries. The design relies entirely on Vanilla CSS. Features like the dark mode toggle are handled smoothly using native CSS variables (custom properties), making it lightweight and easy to adjust without learning framework specific classes.

Cloudflare Pages

Finally, the entire site is hosted on Cloudflare Pages. Because the output is just static HTML files, Cloudflare can serve the blog directly from its global edge network. Whenever new code or a new Markdown post is pushed, Cloudflare automatically builds the site and deploys it in seconds.