← Back to Home

Rebuilding my website with Astro + AI-generated blogs

Wed Sep 10 2025

After years of neglecting my personal website, I decided it was time for a complete overhaul. I wanted something modern, easy to maintain, and with minimal overhead for publishing new content to give myself more of an online presence teaching other aboutr any new technologies/work streams I am working on.

To achieve that, I turned to Astro for the site rebuild—and I didn’t stop there. I also built an AI-powered blog generator using AWS Bedrock and Claude 3.7 Sonnet to help streamline creating content by giving a structure and a baseline that I can change to make it more human and add my own personal touch.

Why Astro (and not Next.js)?

I narrowed it down to Astro and Next.js

recently in my work life I’ve seen more projects use Next.js so to help me stay ahead of the curve I looked at useing this but after a little more research based on the type of website/portfolio I wanted Astro was a better choice.

Lets look at why:

Astro Pros

  • Content-first philosophy, perfect for blogs/portfolios
  • Zero JS by default, “islands” of interactivity when needed
  • Native MDX support

Astro Cons

  • Smaller ecosystem, less suited for app-like sites

Next.js Pros

  • Mature ecosystem with huge community
  • Built-in SSR/ISR and API routes
  • Great for hybrid static/dynamic apps

Next.js Cons

  • More complexity if you just want a static site
  • Ships more JS by default

Since my site is mostly static with a few widgets, Astro’s simplicity and performance defaults won out.

Architecture Overview

My site architecture is relatively straightforward:

┌─────────────────┐     ┌──────────────┐     ┌───────────────┐
│  Astro Site     │────▶│  Cloudflare  │────▶│  Site Visitor  │
│  (Cloudflare    │     │  Pages       │     │                │
│   Pages)        │     └──────────────┘     └───────────────┘
└─────────────────┘            ▲
         │                     │
         ▼                     │
┌─────────────────┐            │
│  Content        │            │
│  Collections    │────────────┘
│  (MDX)          │
└─────────────────┘

The site is built with Astro and deployed to Cloudflare Pages. Content is stored as MDX files in the repository, organized using Astro’s content collections. Interactive elements like the Spotify widget hydrate only when needed.

Layouts & Components

Pages share a BaseLayout.astro wrapper for consistent structure. Most components are static, but some use client:* directives to hydrate only when needed:

<StaticBio /> <!-- no JS shipped -->
<SpotifyNowPlaying client:visible /> <!-- hydrates when in view -->
<SocialIcons client:load /> <!-- hydrates on page load -->

Spotify Now Playing

Music has always been a big part of my day and my personality, so I wanted to bring a little of that personality into the site. The Spotify Now Playing widget shows the track I’m currently listening to — album art, title, and artists — in real time.

Technically, it’s a lightweight React component that fetches my now-playing data via Spotify’s API. It hydrates only when visible on the page, so it doesn’t waste resources if visitors never scroll that far.

What it adds is more than just a widget: it gives the site a “live” element. Visitors aren’t just reading static posts, they’re also seeing a slice of what I’m into at that exact moment. It makes the portfolio feel a little more human.

AI Blog Generator with AWS Bedrock

Writing blog posts is often the hardest part of running a personal site — not the code, but actually sitting down to draft content. To make that easier, I built a simple CLI tool that generates blog drafts for me.

Here’s how it works:

  1. I run a command like: 
    npm run generate-post "Astro vs Next.js" "Focus on trade-offs for personal sites"
  2. The script calls Claude Sonnet via AWS Bedrock with my prompt.
  3. It outputs a ready-to-edit MDX file straight into my /content/blog folder.

The result is that I don’t face a blank page anymore — I start with a solid draft that I can refine, fact-check, and add personal insights to.

Instead of spending hours struggling with structure, I spend my time polishing. It’s like having a technical ghostwriter who sets up the scaffolding while I focus on making it “me.”

CI/CD with GitHub Actions

To make publishing frictionless, I set up a lightweight CI/CD pipeline with GitHub Actions.

Whenever I push to main:

  • The site is built automatically.
  • Spotify secrets are injected securely as environment variables.
  • The finished site is deployed to Cloudflare Pages.

That means I don’t think about deployments anymore. I just commit content or code changes, push, and the site updates itself in a couple of minutes.

It’s a small detail, but removing those manual steps keeps the momentum going and makes blogging less of a chore.

Social Animations

I added small hover animations to SVG icons with a sprinkle of CSS. Using client:load, they hydrate only when the page is ready. A subtle detail, but it makes the site feel alive.

Pitfalls during my learning

  • Astro Islands & State – client components don’t share state. I used Nano Stores for global state management.
  • AWS Region Availability – Claude only works in us-east-1, so I hardcoded the region.
  • MDX Cleanup – AI output needed small post-processing to then save as a MDX file I can refine.
  • Spotify API - When I first brought my website back to live the spotify API was not being called and displaying when I played music, to get around this I looked at creating a lightweight Lambda with the call in or a Cloudflare Function. Blog post to follow

Conclusion

Rebuilding my site with Astro was the right call: simple, fast, and content-first. Adding an AI-powered blog generator reduced the friction of writing, making it more likely I’ll keep publishing new content for people to read, enjoy and hopefully learn from.

If you’re deciding between Astro and Next.js:

  • Pick Astro if your site is mainly content with light interactivity.
  • Pick Next.js if you’re building an app-like experience.