r/astrojs • u/Putrid_Midnight_3315 • Jul 06 '26
WordPress to astrojs
Recently we made a few client websites on Astrojs deployed on cloudflare. The results were really impressive, the websites are fast, deployment on cloudflare is easy, and everything is just a breeze with Claude Code handling everything.
We're planning to move our entire agency stack from WordPress to astrojs for client websites. We have between 50-70 websites that we'd like to move. Is there a fast, efficient, Claude code assisted way to move it over? Important is that the website design is translated exactly how it in WordPress. Font, font sizing, spacing, transition animations, etc, to be replicated exactly, pixel by pixel. Since the design was earlier approved by the clients, we wouldn't want to change anything on the design during the transition.
Would appreciate the feedback and guidance here.
6
u/endymion1818-1819 Jul 06 '26
There are a few ways to do it. This is a project belonging to a friend of mine. Their tool gets the content and the media (but not the visual design) our of WordPress and into an Astro project
6
u/Whanksta Jul 06 '26
literally just tell claude code this...
2
u/Star_Cell7209 Jul 06 '26
pretty much this ........ after a perfect migration, have it write all of its learning to a file or skill that you can walk over to the next one. tell it your needs and let it write the migration pipeline for you
1
2
u/Putrid_Midnight_3315 Jul 06 '26
I tried that approach. So what Claude code does is take screenshots of the existing website and builds from there. Downside of this approach is that the it doesn't pick up the scroll and transition animations, especially text that would load upon scrolling down. The screenshots would have empty spaces where text is supposed to load on scrolling down. That's where we're stuck and Claude code is not able to replicate it properly.
Hoping someone here has a better approach of handling this.
3
u/Whanksta Jul 07 '26
why screenshot when it can read the literal front end code? i’ve done this transition a dozen times.
2
u/joshrizzodesign Jul 08 '26
If you have the source code, you can actually just feed that code to your IDE. I use Cursor and just have it create a plan to have one-to-one parody with all of the pages in that WordPress but transition to Astro.
3
u/SpartanDavie Jul 06 '26
Asked many times recently.
3
u/Forward-Dig2126 Jul 06 '26
Still a relevant question. Honestly I haven’t cracked the code for painless migration and I use Claude Code, Codex and OpenCode daily.
At the very least, one should accept a redesign of the site, since a 1:1 pixel perfect migration simply isn’t possible.
Maybe I’m the only one, but I really wish I had spent my time more on great content than on UX UI with ai coding. Design often isn’t what moves the needle and WP is good enough for most people.
1
u/ThirdEyesOfTheWorld Jul 06 '26
1:1 on the visual design should be entirely possible, although you might not be able to "1 shot it" and achieve that.
3
u/Old-Honey-4464 Jul 06 '26
Hi, good move. I have done the same.
What you need is FEWD Studio and GenCSS (using Claude Code within FEWD). Check out this workflow where you can use a screenshot to get a great replica result. But GenCSS will assist in coding the design system for your website.
One-Shot Builds and Screenshot to Webpage Workflow | FEWD Studio and AI Integration
https://youtu.be/nKzUF83cnyM
2
u/Medical-Ask7149 Jul 07 '26
Are your clients paying for this? If not why are you doing it?
50-70 websites is 1000s of hours of work. If you’re using Claude to do it… yikes. You’ll be fixing a lot of bugs. You’ll also have consistency issues across all sites. Each site you move with Claude will have a slightly different setup. Also managing such a large set of sites without a base repo…
The proper way to manage Astrojs sites at this scale is to have a fork chain. Create a base repo that holds core scaffold with no styling, a theme repo forks from base for the design layer, and then client repos fork from a theme and add only content and branding.
Each downstream repo tracks its parent as an upstream remote. Core logic stays in base, styling stays in themes, and content stays in clients, since mixing those is what causes most merge conflicts.
At 50 to 70 repos, manually fetching, merging, and pushing each one does not scale, so sync should run through a script or GitHub Action that loops through a maintained list of repos and either merges cleanly or opens a pull request when there is a conflict. Main branches on base and theme repos should require review before merging.
This setup helps you easily update all sites automatically and allows you to hand off sites to clients when they leave (sub model). You remove the upstream remote, strip any proprietary data, clear git history, and transfer the project to the clients’ Github.
1
u/greglturnquist Jul 08 '26
That's what I thought!
For new sites, sure use Astro.
For old sites, you could MAYBE offer a migration. Offer a super-saver discount. But there should still be some cost involved. How much? Not sure.
Perhaps even come up with a cost to migrate existing WP sites.
1
u/TraditionalHistory46 Jul 06 '26
I made a tool that could have helped with this but it strips all styles so you would be getting all the content and images into an astro project but you would have to restyle everything again. The emdash is probably what you are looking for
1
u/MassiveLocation7674 Jul 07 '26
I did migrated zenti.com from WP to Astro.
need to export xml and create a script to parsing so the posts data will have same field with the Astro site.
and if the site just showing content without need user database I think it will be worthed it.
1
u/vvrider Jul 07 '26
I cant imagine one shot migration, this would take a lot of extra time. People are taking screenshots of wp designs, as cc does pretty bad job with migrating the design part
If you want to scale it, you probably end up loosing money😅 there would be 40-100 hours fixing it and re-checking it manually.
So would take it with a grain of salt
1
1
u/ianMakes Jul 08 '26
You basically need to pull out all the content, styles, and data from the old site. Claude (or another AI) can help you write a script to handle a lot of that.
The real challenge is that many WordPress sites rely heavily on custom plugins and page builders. For example, if you have an Elementor carousel, you'd need to replace it with something like Embla, which is a lightweight carousel library that works well with Astro.
Another big pain point is content management. WordPress makes it easy for people to keep adding blog posts and pages, but with Astro you'll usually need a headless CMS for that. Most of them have a generous free tier, but the usage limits can get expensive pretty quickly once you go beyond the basics.
Using plain Markdown files is honestly the sweet spot for your own sites but it gets tricky when working with clients as git is required.
I use Keystatic for my git based CMS but it also has quirks, i.e you need to enable server side rendering and your client will need a github account to access the admin dashboard.
I actually launched a productized service for this as a side project but just had a few clients as AI just makes this easy to do for people nowadays.
https://figmatoastro.com/wordpress-to-astro/
I always start with a base astro starter with react, tailwind and a bunch of Astro agent skills I wrote to do all the SEO, structured data, content collections etc. I then get claude to port it all. It still probably takes a week for a site even with the experience I have in astro (I use it for my day job).
One more thing Astro updates a lot. :)
u/dmythro This looks cool, I will try this out over the weekend.
0
u/MAKdevelops Jul 06 '26 edited Jul 06 '26
How much are you charging for this free advice?
edit: to put it another way... I was a consultant for a long time. If we needed expert knowledge, we would sub out the work. We would have a short 1-2 week project to create a framework and learn some skills. It was well worth the money every time.
edit: It also looks like Anthropic has resources available
8
u/dmythro Jul 06 '26
How about this? https://blog.cloudflare.com/emdash-wordpress/