Why the Switch? Performance and Simplicity
After years running a more complex Docusaurus/React setup, developer Ammar Najjar sought a lighter, faster, and more maintainable solution for his personal website. The goal was clear: a high-performance, static site that excelled in Core Web Vitals, simplifying both development and deployment.
The outcome is a static site that achieves excellent performance metrics, delivering under 10 KB of JavaScript on most pages. This lean approach significantly improves load times and user experience. The architecture leverages Astro for its default zero-JavaScript output, Bun for a snappier toolchain, and Cloudflare Pages for seamless deployment.
Astro: The Framework of Choice
Astro emerged as the ideal framework for this rebuild. Its core philosophy of shipping zero JavaScript by default aligns perfectly with the objective of creating a performant, static site. For content-focused sites like personal portfolios or blogs, Astro allows developers to write UI components in their preferred JavaScript framework (React, Vue, Svelte, etc.) but only hydrates them on the client if explicitly needed. This drastically reduces the amount of JavaScript sent to the browser, leading to faster initial page loads and improved interactivity.
The framework's content collections feature was instrumental in managing the site’s various content types, including blog posts, projects, and talks. This provides a type-safe way to organize and query content, ensuring data integrity and simplifying content management. For Najjar, Astro’s built-in support for internationalization (i18n) was also a key factor, enabling straightforward setup for multilingual content without complex third-party configurations.
Bun: A Faster Toolchain
The decision to switch the entire toolchain to Bun was driven by a desire for a more responsive development experience. Bun, a new JavaScript runtime, bundler, transpiler, and package manager, boasts impressive speed improvements over established tools like Node.js, Webpack, and npm. Najjar found that Bun’s integrated nature significantly sped up tasks such as installing dependencies, running scripts, and bundling assets.
The performance gains are attributed to Bun’s implementation in Zig and its optimized engine. This translates to faster local development server startup times, quicker build processes, and generally a more fluid workflow. For developers accustomed to the sometimes-sluggish build times of larger projects, adopting Bun can feel like a substantial upgrade, making iterative development cycles much more efficient. The integration of testing capabilities within Bun also streamlined the testing process.
Image Optimization and Asset Handling
Effective image optimization is crucial for web performance, and Najjar’s rebuild incorporated several smart strategies. Astro’s built-in image component, combined with Cloudflare’s image optimization capabilities, ensures that images are served in appropriate formats (like WebP) and sizes for different devices and network conditions. The site automatically injects image dimensions, preventing layout shifts (CLS) which are a key component of Google’s Core Web Vitals.
Responsive handling means images scale correctly across all screen sizes, from desktops to mobile devices. This not only enhances the visual appeal of the site but also contributes to a better user experience and improved SEO rankings. The careful management of image assets minimizes bandwidth usage and accelerates page rendering.
Deployment with Cloudflare Pages
The deployment pipeline was designed for simplicity and reliability, utilizing GitHub Actions to automate the build and deployment process to Cloudflare Pages. Cloudflare Pages offers a robust platform for hosting static sites, providing features like global CDN, custom domains, and automatic HTTPS. The integration with GitHub Actions allows for continuous deployment, where changes pushed to the repository are automatically built and deployed to production.
This CI/CD setup ensures that the website is always up-to-date with minimal manual intervention. Cloudflare’s infrastructure guarantees high availability and fast load times for visitors worldwide. The choice of Cloudflare Pages also integrates well with other Cloudflare services, offering a comprehensive edge computing solution.
Advanced Features: Dark Mode, Shiki, and AI
Beyond the core architecture, the site incorporates several advanced features. Dark mode is implemented without causing layout shifts, maintaining a smooth user experience when switching themes. This is achieved through careful CSS variable management and pre-rendering strategies.
Shiki syntax highlighting is integrated using CSS variables, allowing for customizable and themeable code blocks within blog posts and project showcases. This approach ensures that code snippets are not only readable but also visually consistent with the site’s overall design, even across different themes.
Interestingly, local AI tools running on Najjar’s Mac played a role in shaping the website’s content and structure. While the specifics are not detailed, this hints at the growing application of AI in content creation and website development workflows, assisting in tasks like ideation, content refinement, or even code generation. This integration of AI showcases a forward-looking approach to personal web presence.
The Result: A Lean, Mean, Static Machine
The culmination of these choices—Astro for its static-first approach, Bun for its speed, and Cloudflare for its global reach—results in a personal website that is exceptionally fast, maintainable, and easy to deploy. It serves as a strong example of how modern web development tools can be combined to achieve peak performance and developer efficiency. The site’s excellent Core Web Vitals scores are a testament to the effectiveness of this architecture. For developers looking to build performant personal sites or small-to-medium web applications, this stack offers a compelling blueprint.