Why I Built This Website with Astro

I wanted to build a personal website where I could write and share blog posts easily. Nothing complex, just something simple and content focused.

So I started looking for the right tech stack.

Why Astro?

I explored a few options like Next.js, SvelteKit, Nuxt, and even some SPA setups. But for a content heavy site, Astro stood out.

I didn’t need client side routing or state management. I didn’t even need a database. Astro gave me exactly what I needed: simplicity.

It supports Markdown, has built-in image optimization and integrates easily with Tailwind. After a quick tutorial, I knew it was the right tool.

Dark Mode Without the Bloat

I added a small dark/light mode toggle using a checkbox. No frameworks, no client side routing.

const themeCheckbox = document.getElementById("theme-checkbox") as HTMLInputElement;
const html = document.documentElement;

themeCheckbox.checked = html.classList.contains("dark");

themeCheckbox.addEventListener("change", function () {
  const theme = this.checked ? "dark" : "light";
  html.classList.toggle("dark", this.checked);
  localStorage.setItem("theme", theme);
});

I only added TypeScript because I clicked the wrong button during setup and didn’t bother changing it later. Now it’s just there for prop types.

Hosting

Astro builds static HTML, so deployment is simple. I host everything on Netlify and didn’t even need to use an adapter.

Tech Stack Summary

• Astro

• Tailwind

• TypeScript

• Netlify