After years of using a heavier setup with Docusaurus and React, it was time for a change. On July 23, 2026, Ammar Najjar shared his experience of rebuilding his personal site using a lighter, faster, and more maintainable stack. This topic is especially relevant today as more developers seek efficient ways to create and manage their websites.
Why Choose Astro?
Astro was selected for this rebuild because it outputs zero JavaScript by default. This means that the site can load faster since it reduces the amount of processing that needs to happen on the client side. By using Astro, the website scores excellent Core Web Vitals, which are metrics that measure the performance of a website in terms of loading speed and user experience.
Transitioning to Bun
The development environment was switched to Bun, a modern JavaScript runtime. This change made the development process feel snappier and more responsive. Bun replaces the traditional Node.js environment, offering faster startup times and improved performance overall.
Optimizing JavaScript Usage
One of the key achievements of this rebuild is that the site delivers under 10 KB of JavaScript on most pages. This optimization contributes to faster load times, which is crucial for keeping visitors engaged and improving search engine rankings.
Smart Image Optimization
To enhance visual performance, smart image optimization techniques were implemented. This includes automatic dimension injection, which means images are automatically resized to fit different screen sizes, and responsive handling, ensuring that images look great on any device.
Supporting Multiple Languages
Internationalization (i18n) was also a focus in this rebuild. By setting up content collections, the site can support multiple languages, making it accessible to a broader audience.
Deployment Pipeline
For deployment, GitHub Actions were used alongside Cloudflare Pages. This combination allows for streamlined updates and ensures that the site is efficiently and reliably deployed. Cloudflare Pages also leverages a global content delivery network (CDN), which helps in delivering content quickly to users around the world.
Additional Features
The rebuild includes several additional features that enhance user experience:
- Dark Mode: This was integrated without causing layout shifts, which is important for maintaining a smooth user experience.
- Shiki Syntax Highlighting: This feature uses CSS variables to provide a modern and accessible code display.
Conclusion
The transition to a lighter stack using Astro, Bun, and Cloudflare has resulted in a high-performance personal website that is easy to develop and maintain. This approach highlights the benefits of modern web development tools.
Merits
- Fast loading times due to minimal JavaScript.
- Improved user experience with smart image optimization.
- Support for multiple languages through internationalization.
- Efficient deployment process with GitHub Actions and Cloudflare.
Demerits
- Requires learning new tools and frameworks.
- Potential compatibility issues with existing plugins or libraries.
- May need additional configuration for advanced features.
Caution
This article is educational and any placeholder values must be replaced with actual data when implementing similar solutions. Readers should verify claims against the original source before relying on them.
Frequently asked questions
- What is Astro? — Astro is a static site generator that outputs zero JavaScript by default, enhancing website performance.
- What is Bun? — Bun is a modern JavaScript runtime that offers faster startup times compared to Node.js.
- What are Core Web Vitals? — Core Web Vitals are metrics that assess the loading performance and user experience of a website.
- How does image optimization work? — Image optimization techniques automatically resize images and ensure they are displayed correctly on various devices.
- What is internationalization (i18n)? — Internationalization is the process of designing a website to support multiple languages and regions.
- What is GitHub Actions? — GitHub Actions is a tool that automates software workflows, including deployment processes.
- What is Cloudflare Pages? — Cloudflare Pages is a platform for deploying static sites quickly and efficiently using a global CDN.
- Why is dark mode important? — Dark mode improves user experience by reducing eye strain and providing a visually appealing alternative to light themes.
Tags
#webdev #performance #javascript #astro #bun #cloudflare #static-site #web-development #internationalization #image-optimization
Responses
Sign in to leave a response.