From WordPress to Astro
Why Astro.js?
Astro.js is all about static rendering at this time, which means faster, more optimized websites by default. Unlike frameworks like Next.js, Astro takes a minimal JavaScript approach while allowing you to mix different frameworks (React, Vue, or Svelte…etc) all in the same project if needed. For my portfolio, this meant I could keep things lightweight and flexible while getting the performance benefits of static rendering.
The big draw for me was the ability to manage my content as Markdown files. This approach means my content isn’t locked into a specific CMS, it’s future-proof. I can edit my posts in any text editor, like Obsidian, and the Markdown files remain the core of my content.
Development Insights
I won’t go into the step-by-step setup since the official documentation is excellent and covers it all. Instead, I want to share some specific insights about using Astro with Tailwind and React.
- Reusable Components: Astro’s approach encourages a component-driven architecture, making it easy to organize reusable blocks. Tailwind CSS fits perfectly into this, allowing quick styling directly in the components. Astro’s scoped CSS and Tailwind’s utility classes meant I could rapidly build and iterate without accumulating technical debt in the form of sprawling CSS files (technical debt is accumulated in other ways).
- Component Architecture with Tailwind: Astro’s component structure, combined with Tailwind’s utility-first approach, made styling very straightforward. Tailwind’s responsive utilities allowed me to handle breakpoints directly within each component, which was particularly helpful. Because Astro encourages a modular approach, Tailwind’s atomic classes kept styles intuitive and organized without relying on a global stylesheet and having to think “what should I name this class?” every 5 minutes.
- React Components & State Handling: While Astro lets you write its own
.astro
components, I opted to use React for pieces that required more interactivity or state management, since that’s what I was familiar with. Astro’s flexibility with hydration was particularly useful, I could choose when and how components loaded. For instance, a React component could be set to hydrate only when it became visible (client:visible
). Neat! - Markdown for Content Management: Writing all my blog posts in Markdown was a major shift from WordPress. It makes my content incredibly portable, Markdown files are universal, and I can edit them with anything from VS Code to Obsidian (using Vim motions). The downside? Anytime I want to add a new feature or modify something about the content display, I have to open up VS Code and start coding. Unlike WordPress, where you can simply add a plugin or configure a setting to add a feature, here it’s very hands-on! sometimes it’s a quick fix, other times it turns into an hour of debugging and reading documentation which distracts from the act of writing and focusing on content.
Pros and Cons
- Pros:
- Static Rendering & Performance: Astro’s static-first approach results in fast page loads and smaller JavaScript bundles. Astro also lazy-loads React components, which means JavaScript is only added when absolutely needed.
- Component Flexibility: Mixing Astro components with React provided the best of both worlds: Astro for simpler static content and React for interactive pieces.
- Markdown Content: I love the portability and simplicity of managing my content in Markdown. It’s easy to version control and future-proof.
- Cons:
- Manual Effort for Features: While Markdown makes content portable, any new feature I want to add requires coding. There’s no plugin ecosystem like WordPress, which means customization often involves a deeper dive into documentation and coding.
- Growing Ecosystem: Astro is still newer, which means its ecosystem isn’t as mature as Next.js or other frameworks. Finding specific third-party integrations or support can sometimes be challenging.
- React Compatibility: Since Astro aims to minimize JavaScript, using certain React libraries that rely on client-side rendering can be tricky or require workarounds.
Final Thoughts
Rebuilding my portfolio with Astro.js, Tailwind CSS, and React was ultimately a rewarding experience. I appreciate the performance, the flexibility of mixing frameworks, and the simplicity of Markdown. However, I do miss the ease of WordPress when it comes to adding features. Sometimes you just want the convenience of a plugin rather than diving into VS Code.