How I Redesigned this site with Astro and Tailwind CSS
Ever had that moment when you realize you’re paying for something you barely use anymore? That was me with my DreamHost shared hosting account. I’d been with them for about 20 years—since their “Crazy Domain Insane” offer—and they’d served me well. But times change.
The site was slow. Painfully slow. Even though it wasn’t doing anything fancy, pages took forever to load. The WordPress installation came with a bunch of plugins I never asked for, and I was getting emails about plugin updates constantly. Managing it felt like wrestling with a system that was way more complex than I needed.
Then DreamHost’s domain registration prices crept up over the years. That was the final straw. I decided to move my domain registrations to Cloudflare and convert my sites to static hosting. No more shared hosting, no more WordPress bloat, no more monthly fees.
My WordPress hosting is paid yearly, so I have until November to migrate all my sites. This one was the first step—a test run to see how the process would work.
The result? A site that loads in the blink of an eye, costs nothing to host, and is actually fun to work with. Here’s how I did it.
What is Astro and why did I choose it?
Astro is a static site generator that’s built for speed. It only sends the JavaScript you actually need. Unlike traditional React or Vue apps that ship the entire framework to every visitor, Astro builds your pages as static HTML and only adds JavaScript when you specifically ask for it.
This means your site loads fast. Really fast. Even on slow connections or older devices.
What Astro excels at:
- Static site generation - Perfect for blogs and content sites
- Zero JavaScript by default - Pages load instantly
- Component islands - Add interactivity only where you need it
- Multiple framework support - Use React, Vue, Svelte, or vanilla JS
- Built-in optimizations - Image optimization, CSS minification, and more
For a personal blog like mine, this was exactly what I needed. I don’t need a full React app for a site that’s mostly text and images. I just need fast, reliable pages that work everywhere.
Why Tailwind CSS made styling actually enjoyable
I’ve been writing CSS for years, and I’ve tried just about every approach. Tailwind CSS changed everything.
Instead of writing custom CSS classes and fighting with specificity, Tailwind gives you utility classes that do exactly what they say. Want a blue button with rounded corners and some padding? That’s bg-blue-500 rounded-lg px-4 py-2
. Done.
What makes Tailwind special:
- Consistent design system - Built-in spacing, colors, and typography scales
- Responsive design made easy -
md:flex lg:grid
handles breakpoints - Purge unused styles - Only the CSS you actually use gets included
- Rapid prototyping - Build interfaces faster than ever
The learning curve was minimal, and within a few hours, I was building layouts much faster than with traditional CSS.
The migration process: from WordPress chaos to clean markdown
The actual migration was surprisingly smooth. Here’s what I did:
Step 1: Content extraction
I exported my WordPress content manually since there wasn’t much to migrate. Sometimes making a script is more fun, but it can take longer than just doing it manually. The blog posts converted cleanly to markdown, and the pages needed minimal cleanup.
Step 2: Building the structure
I set up a basic Astro project with Tailwind CSS. The structure is dead simple:
src/
├── content/
│ └── blog/ # All my blog posts as markdown
├── components/ # Reusable UI components
├── layouts/ # Page layouts
└── pages/ # Static pages
Step 3: Creating the components
I built a few key components:
- Layout component - Handles the overall page structure
- Blog post component - Renders individual posts
- Navigation - Simple, fast navigation
- Footer - Contact info and links
Each component is just a few lines of Tailwind classes. No custom CSS files to maintain.
Step 4: Setting up the build process
Astro handles most of the optimization automatically. Images get optimized, CSS gets minified, and the final build is just static files ready to deploy.
Hosting and deployment: Cloudflare Pages
I’m hosting the site on Cloudflare Pages, which is completely free for personal projects. The setup was straightforward:
- Connect my GitHub repository
- Set the build command to
npm run build
- Set the output directory to
dist
- Deploy
Every time I push changes to GitHub, the site automatically rebuilds and deploys. No server management, no downtime, no monthly bills.
I’ll write a separate article about hosting options later—there are some interesting choices out there, and Cloudflare Pages is just one option. But for a static site like this, it’s hard to beat free hosting with a global CDN.
The results: speed, simplicity, and sanity
The performance improvement is dramatic. The old WordPress site took 3-4 seconds to load on a good day. The new Astro site loads in under a second, even on mobile networks.
But the real win is the developer experience. Instead of fighting with WordPress plugins and database updates, I’m writing content in markdown files. No more rich text editor—just clean, simple markdown. It’s faster to write, easier to version control, and more reliable.
The site is also more maintainable. I can make changes locally, test them instantly, and deploy with a git push. No more FTP uploads or database backups.
Lessons learned
Sometimes the best solution is the simplest one. I was overthinking the migration, worried about losing features I never actually used. The static site approach is perfect for a personal blog.
Performance matters more than features. The old site had a lot of “features” I never used, but it was slow. The new site is fast and does exactly what I need.
Modern tools make development enjoyable again. Astro and Tailwind CSS removed the friction from web development. I actually enjoy working on the site now.
What’s next?
I’m planning to migrate my other sites to the same stack. The process was so smooth that I’m looking forward to doing it again. I might even add some interactive features using Astro’s component islands—but only where they actually add value.
The web doesn’t have to be complicated. Sometimes the best solution is just fast, simple, and reliable.
Ready to Transform Your Career?
Let's work together to unlock your potential and achieve your professional goals.