Hello World: Building dsj.blog
I’ve finally decided to stake my claim on the web with the dsj.blog domain. Building a personal site from scratch gives me complete control over the performance, design, and content architecture. After evaluating several frameworks, I chose a modern, deeply optimized stack that centers heavily around markdown and static site generation.
With this foundation, the site is designed to be extremely lightweight, shipping absolutely zero JavaScript to the client by default. Every page is pre-rendered at build time and served incredibly fast from the edge via Cloudflare Pages.
The Technical Stack
Crafting this experience required picking tools that are both enjoyable to write and performant for the end-user:
- Astro: The core framework. It provides excellent developer ergonomics and out-of-the-box support for content collections.
- Tailwind CSS: A utility-first CSS framework that makes styling components rapid and consistent, especially with the
@tailwindcss/typographyplugin. - MDX: A flavor of Markdown that allows me to embed interactive JavaScript components directly within my posts when necessary.
Here’s a quick look at how the Astro BaseLayout slotting is structured, demonstrating syntax highlighting:
<main class="mx-auto w-full max-w-3xl flex-grow px-4 py-10">
<div class="prose prose-slate lg:prose-lg max-w-none">
<slot />
</div>
</main>
This ensures that everything from h1 tags down to bulleted lists looks clean, readable, and perfectly formatted across all device sizes. Stay tuned for more deep dives into engineering leadership and technology!