Website Modernization and Migration to Gatsby 5
Project Timeline: March 2025 – June 2025
Project Summary and Objectives:
The objective of this project was the comprehensive update and modernization of a Gatsby.js-based website. The primary task involved migrating from a technically obsolete Gatsby 2 version to the latest possible stable release, Gatsby 5. The project also encompassed updating the entire development environment (Node.js), refactoring key components, and performing extensive bug fixing and code optimization.
Initial Challenge:
The starting point was a website running on the Gatsby 2.13.3 engine and a Node.js 14 environment. This setup was incompatible with newer Node.js versions (16 and 18), which blocked any further updates, security patches, and the use of modern framework features.
Project Execution Stages:
1. Stage I – Intermediate Migration to Gatsby 4:
- Following a compatibility analysis, the first step was to migrate the site to Gatsby 4.25.0 and the environment to Node.js 18.
- All Gatsby plugins were updated to the highest versions supported by Gatsby 4.
- A crucial image refactoring was performed, migrating all instances from the deprecated
gatsby-background-imageandgatsby-imageto the unified, moderngatsby-plugin-imagestandard. - A fully stable, working version of the site was achieved at this stage.
2. Stage II – Final Migration to Gatsby 5:
After stabilizing the environment, the final migration of the site's engine to Gatsby 5.14.0 was initiated. This version, while running on Node.js 18, also ensures compatibility with future releases (e.g., Node.js 22).
3. Stage III – Optimization and Quality Assurance (QA):
- Bug and Warning Fixes: All warnings appearing during the build process were eliminated. Critical bugs were fixed, including issues with page refreshing, language switching, and the occurrence of a double slash ("//") in URLs.
- Code Cleanup: All unused files and Node.js modules were removed to optimize the project.
- Page-Specific Fixes: Dedicated functional and visual fixes were implemented on the "firma/company" and "kontakt/contact" subpages.
- Final Testing and Visual Polish: The project's final touches were applied after detailed consultations and testing by QA specialist and my friend Tomasz Ciechomski, who helped identify and refine the smallest visual details.
Outcome:
The project was successfully completed, delivering a fully modernized, stable, and high-performing website. The new version is more secure, easier to maintain, and ready for seamless future development.