How I Built This Site in a Weekend

Web Development Astro JS

How I Built This Site in a Weekend

With finals just around the corner, time is tight — and starting a new project sounds like the worst idea possible. But, due to deadlines for regsitering a new student org, I had to lauch this sit ASAP. So I gave myself one weekend to get it done. Thanks to the ANT stack — AstroJS, Netlify, and TailwindCSS — I went from zero to deployed in under 48 hours.

This stack made it easy to focus on content and layout without wasting time wrestling with config files or bloated frontend frameworks. If you’re juggling classes, deadlines, and projects, this lightweight setup is a game-changer.

🧱 Tech Stack: The ANT Stack

This stack is minimal but powerful — and perfect for rapid development without sacrificing long-term maintainability. While at it’s heart it’s just another JAM stack (JavaScript, APIs, and Markup), there are some interesting benefits to using the tools, I’ve laid out.

🚫 Reducing the JavaScript Bundle

One of the key goals was to ship less JavaScript. Astro made this ridiculously easy.

Unlike traditional SPA frameworks, Astro ships zero JavaScript by default. Components render to static HTML unless you opt-in to interactivity using client:* directives. For example:

<!-- Only loads JS if needed -->
<Counter client:load />

This means no React hydration unless I explicitly want it. My Lighthouse score went up, and bundle size went down — all without tweaking Webpack or Rollup configs.

The result? A fast, low-carbon site that loads instantly, even on slow connections.

🔧 Templating with .astro, .jsx, and .svelte

Astro’s support for multiple component syntaxes was a huge win. I could mix and match .jsx, .svelte, and .astro files — but I chose to use .astro components as the primary building blocks for this site.

Why .astro?

That said, I also love the flexibility of dropping in a .jsx component for dynamic behavior or a .svelte component when I need fine-grained reactivity.

For example:

---
// In a .astro component
import MyReactChart from '../components/Chart.jsx';
import MySvelteWidget from '../components/Widget.svelte';
---

<MyReactChart client:visible />
<MySvelteWidget client:idle />

This multi-framework interoperability gave me the freedom to use the right tool for the right job — without rewriting everything.

🎨 Using Astro Themes

Astro’s ecosystem is growing fast, and I took advantage of that by starting with an open-source Astro theme. Themes saved me hours of layout and accessibility work.

I picked a theme that matched my needs, stripped out what I didn’t want, and customized the rest with Tailwind. Since the theming system is just a collection of Astro components, modifying layout and slots was straightforward.

My process:

  1. Clone a theme.
  2. Swap out the content.
  3. Apply my Tailwind config and color palette.
  4. Remove any unnecessary scripts or integrations.

If you’re in a hurry, don’t reinvent the wheel — Astro themes are gold.

🚀 Final Thoughts

I used to think fast development came at the cost of performance or maintainability. Astro proved me wrong.

By using AstroJS, TailwindCSS, and Netlify, I built a modern, lightweight, production-ready website in under 48 hours. No bundler hacks. No configuration rabbit holes. Just clean, fast output and an enjoyable dev experience.

If you’re racing against finals or project deadlines and still want something polished online, the ANT stack makes it possible.