My Journey Building This Blog: From Zero to Hero 🚀

Fahmi Aulia Rahman • • 8 min read

TL;DR

Built my personal blog using Astro, Tailwind CSS, TypeScript, and MDX, deployed on Vercel with automatic GitLab integration, and snagged a free .is-a.dev domain. Total cost? $0. Total satisfaction? Through the roof. Here’s how I did it and why these tools are absolute game-changers for any developer who needs things to just work.

The Stack That Made It Happen ⚡️

Let me give credit where credit is due – these tools made my life so much easier:

🎯 Astro - The Static Site Champion

Astro became my ride-or-die framework for this blog. It’s like having a sports car that only uses fuel when you actually need to go fast. The default blog template gave me a head start that would make any developer shed a happy tear.

What makes Astro special:

  • Ships zero JavaScript by default (because who needs bloat?)
  • Islands architecture lets you sprinkle interactivity exactly where you need it
  • Built-in TypeScript support that actually works
  • MDX support out of the box
  • Lightning-fast static site generation

🎨 Tailwind CSS - The Styling Wizard

Tailwind CSS turned my CSS anxiety into CSS confidence. No more staring at empty style files wondering where to start. The utility-first approach means I can style components without leaving my HTML.

Why Tailwind rocks:

  • Utility classes for rapid development
  • No CSS bloat or naming conflicts
  • JIT mode for blazing-fast builds
  • Responsive design made simple

🔧 TypeScript - The Error Catcher

Having TypeScript baked into Astro saved me from so many late-night debugging sessions. I need my code to work the first time.

📝 MDX - The Content King

MDX lets me write blog posts in Markdown but with the power to drop in JSX components when needed. It’s like having a Swiss Army knife for content creation.

🚀 Vercel - The Deployment Dream

Vercel’s free tier is honestly too good to be true. Git integration, automatic deployments, global CDN – all free. Perfect for someone who doesn’t want to babysit infrastructure. The best part? It automatically connects to my GitLab repo and deploys every time I push code.

🌐 is-a.dev - The Domain Hero

Grabbing is-a.dev’s free subdomain through their GitHub repo was surprisingly simple. No fees, no hassle, just a clean domain that says “I’m a developer”.

The Challenges I Faced (Because Nothing’s Ever Perfect) 😅

Challenge #1: Choice Paralysis

The web development ecosystem has more options than a Netflix menu. Choosing between frameworks, CSS solutions, and deployment platforms can be overwhelming.

How I solved it: I focused on my core requirements – fast, free, and low maintenance. This eliminated 90% of the noise.

Challenge #2: GitLab + Vercel Integration

While Vercel has native GitHub integration, connecting it to GitLab requires a bit more setup since it’s not the default option.

How I solved it: Thankfully, Vercel supports GitLab repositories directly through their Git integration. Once connected, it works seamlessly with automatic deployments on every push.

Challenge #3: Domain Configuration

Getting the .is-a.dev domain pointed to Vercel required understanding A and TXT records and waiting for propagation.

How I solved it: Followed the is-a.dev documentation and waited patiently (i know it is the hardest part for any of us lol).

Challenge #4: Learning Curve

Even with great tools, there’s always something new to learn. Astro’s component syntax, Tailwind’s utility classes, and MDX quirks all required some brain space.

How I solved it: Started small, built incrementally, and leaned heavily on documentation and community examples.

Why I Chose This Stack 🤔

The “It’s All Free” Factor

Let’s be real – as someone building side projects and personal sites, budget matters. This entire stack costs exactly $0 to run:

  • Astro: Open source and free
  • Vercel Free Tier: 100GB bandwidth, 100,000 serverless function invocations
  • is-a.dev domain: Community-driven and free
  • Tailwind: Free and open source

The “No Infrastructure Babysitting” Factor

My free time is precious, so I needed tools that work reliably without constant maintenance. Vercel handles scaling, SSL certificates, and global distribution automatically.

The “Developer Experience” and “Performance First” Factor

These tools prioritize developer happiness and optimized for speed:

  • Astro: Hot reloading, great error messages, TypeScript integration
  • Tailwind: IntelliSense support, consistent design system, and purged CSS with only used styles
  • Vercel: Git-based deployments, instant rollbacks, global CDN and edge optimization
  • MDX: Write content in familiar Markdown with component superpowers

The Wins That Made It All Worth It 🏆

⚡️ Blazing Fast Performance

My blog scores 100/100 on Vercel Speed Insights. Astro’s static-first approach combined with Vercel CDN makes pages load instantly.

Vercel Speed Insights Vercel Speed Insights Score: 100/100 😎

🔧 Zero Maintenance

I push code to GitLab, and Vercel automatically detects the changes and deploys. No server management, no SSL certificate renewals, no scaling concerns.

💸 $0 Monthly Costs

The entire setup runs on generous free tiers. My only costs are the time invested in building (which was fun anyway).

🚀 Room to Grow

When I need more features, this stack can handle it:

  • Vercel supports serverless functions for dynamic features
  • Astro can add SSR when needed
  • Tailwind scales from small sites to large applications

👥 Great Developer Community

Every tool in this stack has an active, helpful community. Documentation is thorough, and help is always available.

What I’d Do Next 🔄

Consider Astro Content Collections

Astro Content Collections would have given me better TypeScript integration for my blog posts from day one.

Plan for SEO

While Astro is SEO-friendly by default, I could have been more strategic about meta tags, structured data, and social sharing.

Use A Design System

A design system like shadcn/ui would have transformed your Astro blog development experience from day one. It’s worth implementing early to prevent the common problem like creating slightly different button styles or image across pages

For Fellow Developers 👨‍💻

If you’re a developer looking for a simple, effective blog setup, this stack is perfect because:

  1. Quick Setup: Get from zero to deployed in under an hour
  2. Reliable: These tools are battle-tested by thousands of developers
  3. Low Maintenance: Set it and forget it – like a good coffee maker
  4. Cost-Effective: Keep your budget intact
  5. Learning Opportunity: Stay current with modern web development

The Bottom Line ✨

Building this blog taught me that the best stack isn’t always the newest or most complex one. Sometimes it’s the combination that just works together seamlessly, costs nothing, and lets you focus on what matters – creating content and sharing knowledge.

Astro, Tailwind, TypeScript, MDX, Vercel, and is-a.dev aren’t just tools – they’re enablers. They took my idea from concept to reality without fighting me every step of the way.

If you’re thinking about starting a blog or personal site, I can’t recommend this combination enough. It’s like having a full development team in your corner, except they work for free and never complain about code reviews.

Summary

My blog-building journey showcased the power of choosing the right tools for the job. Astro’s static-first architecture combined with Tailwind’s utility-first CSS, TypeScript’s type safety, and MDX’s content flexibility created a developer experience that was both productive and enjoyable.

Vercel’s automatic GitLab integration eliminated infrastructure concerns while providing enterprise-level features like global CDN and seamless deployments. The is-a.dev domain service added the perfect finishing touch with a professional domain at zero cost.

The result? A blazing-fast, zero-cost blog that requires minimal maintenance – exactly what every time-strapped developer needs. Sometimes the best technology choices are the ones that get out of your way and let you focus on what really matters: sharing your story with the world.

Stack Recap:

About the author

Portrait of Fahmi Aulia Rahman

Fahmi Aulia Rahman

Software Engineer

Software engineer with 6+ years under the hood with new dad vibes — shipping cool stuff, learning out loud and keeping it real.