Skip to content

Migrating From Gatsby to Astro: Migration and Styling Tips with Kathleen McMahon

Kathleen McMahon shares how she migrated her personal site from Gatsby to Astro. She discusses styling Astro Islands and Astro Slots, and their impact on CSS styles on deployment. Viewers also learn about component conversion, and challenges with React Live and display boxes in MDX articles. The transition came with plenty of challenges, but it also highlighted some great benefits of Astro. Here's a look at the hurdles she faced, the specific issues she encountered, and the ultimate wins.

Challenges Faced

One of the big challenges Kathleen dealt with was styling issues. Astro Islands and Astro Slots are powerful, but they caused unexpected CSS problems on the deployed site. She had to spend time tweaking the stylesheets to make everything look right. Converting components was another tough task. Kathleen's story shows how important it is to pay close attention to detail when switching platforms.

Astro's Simplicity and Compatibility

Despite the challenges, Kathleen praised Astro for its simplicity and compatibility with her existing setup. The platform's seamless integration with various tools and frameworks made the move smoother. Astro's focus on reducing reliance on JavaScript helped her optimize her website's performance and improve loading times. This simplicity and compatibility make Astro a great option for developers wanting to streamline their workflow.

The Importance of Component Conversion

Kathleen’s experience highlights how crucial component conversion is. Carefully analyzing and converting each component ensures a smooth transition. The issues with React Live and display boxes in MDX articles show that even minor components can have a big impact on the website’s functionality and look. Attention to detail and thorough testing are key to a successful migration.


Moving a website from one platform to another is no easy task, as Kathleen McMahon found out during her switch from Gatsby to Astro. The challenges she faced, like unexpected CSS styles and component conversion issues, highlight the need for careful planning and attention to detail. Despite these hurdles, Astro’s simplicity, compatibility, and potential to reduce JavaScript reliance make it a compelling choice for developers. Kathleen’s experience is a valuable lesson for anyone considering a platform migration: meticulous component conversion and a keen eye for detail are essential.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.