Migrating WordPress Site to Astro JS

A year ago, when I was creating a website/blog for my company, I used Wordpress. Wordpress has alway been my go-to stack for sites in the past - I have had quite a few blogs over the years. I never really created a landing page before. I thought a simple WordPress theme would be sufficient to take care of it (splashed around 60 GBP on one).

But it turned out to be a nightmare instead. The blogging infra was rock-solid, but customizing the “look” was a nightmare. I created one using their drag-and-drop UI editor and it was ugly! It was so ugly that I avoided promoting my website on launch sites out of embarrassment 😅

Wordpress wasn’t cutting it for me anymore. I needed something which can be updated using AI. Something that could be built locally so that I can build it using a AI CLI. Static site generating platform fit my needs perfectly.

Astro vs Wordpress

After searching for a static site generator, I narrowed it down to JS-based frameworks. AI is good at writing JS (probably had lots of training data), so I wanted to stay in that ecosystem. Astro stood out as the most popular choice right now. Here are few other reasons why I am liking my new static site setup:

Local Source Code / AI Friendly: My source code now lives locally on my machine - that means I can use Gemini CLI to tweak the look of sites for me. My design skills are horrible, so I really appreciate Gemini’s skills here. Trust me, even AI slop designs better than me.
No Server Cost: I had been paying 15 GBP for a VPS hosting (I could have gotten a shared on for cheaper, but I didn’t want to compromise performance). Static sites can be hosted for free on platforms like Github Pages, Vercel and Cloudflare Pages. The less the maintenance cost of my business, the better for sustainability.
Super Performance: Since static sites are pre-built html and no server side rendering is required to server them, they can easily hit 100 score for performance on LightHouse audit. Better performance means happier readers + happier SEO.

How I Instructed AI to build site with Astro

The steps for getting AI to build the site was as simple as:

Setup: Provided Gemini CLI with an empty directory and told it setup a bare bone astro project.
Migrating old posts: Provided Gemini with link to my old WordPress sites and asked it to import them.
Chrome Dev Tool MCP: This is an extension that allows Gemini to open Chrome Browser and interact with it in various ways.
- This was used to open up my old blog and scrap the content for migration.
- This was also used to verify the contents of the new astro blog. Gemini opened localhost:4321 and verified various html elements during coding. This feedback loop helped Gemini catch various bugs itself and fix them without my intervention.
SEO, Sitemap and RSS: Astro has plugins for these. I simply instructed what I wanted and AI integrated with them.
Testing: When using AI, I am always worried that it will make some random change somewhere which will break something and I will never know. For example, what if it changed something in sitemap generation logic which ends up exposing some of my test routes into the output? They will get 404 in production and then Google will penalize me for adding such links to sitemap. How do I ensure that sitemap never has my test routes.
- Turns out, I can write tests for that! I asked AI to write e2e tests and it used playwright to launch my site in preview environment, navigate to various routes and analyze the html content to verify state.
- With this, I now have tests to ensure:
  - Sitemap doesn’t have any of the test pages I created.
  - RSS xml doesn’t have any relative links
  - My Google Analytics tags have been added correctly.
  - All of my blog posts have SEO description, title and etc.
- It’s quite incredible! I can be more at ease before deploying to production now.
Deployment to Cloudflare: I had few choices here: Github, Vercel and Cloudflare.
- While my site is JS free as much as possible, I might still need some backend service in future. So Github Pages was not considered.
- Vercel was a good choice, but it’s free only for hobby projects. Since this site is for my company + App Pause landing page, it has a professional background. Cloudflare allows free usage for professional use, so I went with that.
- It’s my first time using Cloudflare and so far I am really happy with it. With a limit of 100K daily page views, I think I will be able to use free tier for a long time. Can’t believe I had been paying 15 GBP per month for hosting wordpress in a VPS!

Places where I had to intervene more closely

AI isn’t perfect and of course I had to go back and forth with it a lot. It took me a week to get my site ready, so it wasn’t a one-shot prompt output. Here are the places that I needed to put in more effort:

Typography and Color Consistency: I used tailwind 4 for CSS and while AI was able to use it to quickly spin out beautiful individual components, it soon started to become inconsistent betwen pages. I asked AI to follow material UI guidelines. It didn’t find any material ui astro package. There was one for react, but I wanted a 0-JS solution.
- In that end, I just asked it to create a theme (color + typography classes) based on material ui and use that consistently - instead of hardcoding CSS directly on the html element. With a bit of back and forth, I was able to bring more consistency.
Invisible Text Colors: Another issue that AI couldn’t handle properly was mismatch between text color and background. Since it usually reads text/html, it has no idea if its using black text over black background.
- Luckily, Chrome Devtool MCP helped out here. It can run LightHouse audit and provide an “Accessibility Score” and report. Color issues are considered accessibility problems and comes out in the report as error.
- I simply asked AI to make sure I had 100 score and it checked the reports for error and fixed them.
- I went a step further and asked AI to create a /test/color route with all possible background to text color combination, run lighthouse audit and eliminate all combination that threw error. With this feedback loop, it managed to find the right combinations, which then got turned into a guideline in the theme.

Conclusion

I used to be embarrassed about my site before, but now, I feel quite confident! It looks so much better than before! Perhaps now I can finally start promoting my website on Product Hunt without feeling shy.

And best of all, I know that iterating over it is going to be a breeze. If I notice any scope for improvements (I have tons of ideas), I can just get AI to do it. In fact, I already made more changes than what I have described above.

Setting up a newsletter form for capturing emails. This required server side work.
Analytics and Cookie Consent!

I just didn’t want to turn this into a huge essay. Today’s post was all about getting started with AI to build your website. Hopefully, I will be able write separate posts about how to fine tune the site further. Stay tuned.