Hono is a super fast and lightweight web framework designed for building applications across multiple JavaScript runtimes, like Cloudflare, AWS Lambda, Bun, Node.js, and more.

It's noted for its small size (the tiny preset is under 14kB), extensive support for middleware, and first-class TypeScript support, all contributing to a delightful developer experience.

Hono's architecture relies exclusively on Web Standard APIs, ensuring the same codebase can run everywhere.

Cloudflare Calls is a managed service that acts as WebRTC selective forwarding unit (SFU).

Orange Meets is Google Meet-like demo app built on the top of Calls, showcasing the capabilities of the whole Cloudflare stack.

It is built with Remix and also uses TailwindCSS.

shadcn/ui offers a selection of ready-to-use, customizable design components that you can simply copy and paste into your projects without needing to install them as dependencies.

This approach allows for greater flexibility and control over the code, as you can customize each component to your specific needs. It's designed to be accessible and open-source, providing a practical resource for building your own component libraries.

In their website you can find also a theme builder and bigger blocks putting together the components into cohesive pages.

For the past months I felt that this site needed a bit more of activity, this was a single static page made with Remix v1 and only with the "Bio" section.

So after building some Astro sites for The Crafters Lab clients, yesterday I decided to fix it and update it with something similar to a blog.

The site is based on the Keystatic Astro template, you can test it just running: npm create @keystatic@latest

Technologies Used

• Astro: Static site builder.
• Keystatic: The markdown-based CMS powering this bits.
• TailwindCSS: A minimal utility-based CSS framework.
• Cloudflare Pages: A developer-focused platform designed for building fast websites.

The Good Parts

• It's fully static. This means a very fast performance, stability and thanks to the Cloudflare pricing, fully free hosting with unlimited bandwidth.
• Everything is owned by the developer. The code, the data and the CMS are open source local components that don't rely on external services being up or down.
• WYSIWYG editor. Keystatic gives you a local editor that makes editing the markdown files a standard CMS experience (think Wordpress, Ghost, etc)

The Bad Parts

• It's fully static. This means that editing and publishing a post involves editing a markdown file (either in GitHub or through the local WYSIWYG editor) and redeploying the site (deployment takes ~40s).

Conclusion

So, wrapping things up: your site's makeover really steps up the game by integrating Astro and Keystatic. It's sleek, efficient, and keeps things straightforward with its static setup. Yes, updates need a bit of elbow grease since you're editing markdown files and redeploying, but what you get in return is a site that's totally yours, costs nothing to host on Cloudflare Pages, and runs super smoothly.

It's a great balance of ease, control, and modern web tech!

Astro is a modern web development framework designed to make building fast and efficient websites easier.

It allows you to write your website using multiple frameworks (like React, Vue, or Svelte) without loading all their JavaScript by default and rendering the html at compile-time. This approach results in faster loading times and better performance.

Astro also focuses on delivering a seamless developer experience, with features like out-of-the-box TypeScript support, file-based routing, and optimized build outputs. Whether you're building a simple static site or a complex web application, Astro provides the tools to help you create a high-performing website with less hassle.

PS: And it powers this very website!