A few weeks ago, I sought to expand the reach of my writing while maintaining control over my content. The Bluesky platform, with its growing community and open protocols, intrigued me, but I desired a more personalised space than the standard profile page. This led me to discover WhiteBreeze, a SvelteKit implementation by hugeblank that integrates seamlessly with Bluesky's ecosystem. Instead of building from scratch, I forked this project and customised it to create a uniquely styled blog that reflects my personal aesthetic.

Why WhiteBreeze?

Traditional blogging platforms often present a dilemma between ease of use and content ownership. WhiteBreeze offers an elegant solution by leveraging Bluesky's AT Protocol for content storage while providing a fully customisable front-end. This approach ensures my content resides both on my personal domain and within the Bluesky ecosystem, specifically through WhiteWind, the AT Protocol blogging platform that WhiteBreeze interfaces with. This integration creates a seamless bridge between traditional blogging and social networking, allowing readers to access my posts through either medium.

Embracing a Dark Pastel Green Theme

The default WhiteBreeze theme is clean and minimalistic, but I wanted my blog to reflect my personal aesthetic. Drawing inspiration from natural landscapes and subdued tones, I crafted a dark pastel green theme that's gentle on the eyes while maintaining readability. The colour palette revolves around rich forest greens (e.g., #1a2a20 for the background) contrasted with soft mint highlights (#8bd5a0 for links), creating a digital garden ambiance. I ensured sufficient contrast for accessibility and applied Tailwind's utility classes along with custom CSS properties to achieve the desired look, from subtle gradients on post cards to thoughtfully styled typography.

Core Components of the Project

1. Front-End Component Architecture

At the heart of this implementation lies a structured SvelteKit application, forked from the original WhiteBreeze project. The application is organised around two main routes: the index page displaying a grid of post cards and individual post pages showcasing full content and comments. The component hierarchy includes a shared layout with navigation and footer elements, while the Profile.svelte component elegantly presents my Bluesky identity.

The post grid employs a responsive design pattern using Tailwind's grid-cols-[repeat(auto-fill,minmax(260px,1fr))], ensuring the layout adapts gracefully across device sizes. Each post card features a truncated title with CSS line-clamp properties and formatted dates that respect the user's locale settings.

2. AT Protocol Integration

Integration with Bluesky's AT Protocol forms the backbone of the content management system. Instead of relying on traditional databases or static file generation, the application fetches posts directly from my repository (or in layman's terms, my account) using the com.whtwnd.blog.entry collection. This approach allows me to publish directly through WhiteWind's interface while having content appear on my custom domain.

The implementation includes robust error handling and proper DID resolution, ensuring stability as the protocol evolves. I've also integrated the bluesky-comments-svelte component to enable readers to interact with posts using their Bluesky identities, creating a seamless bridge between my blog and the wider Bluesky community.

Markdown Processing Pipeline

A particularly satisfying aspect of this project was working with the robust Markdown processing pipeline already implemented in WhiteBreeze using the unified ecosystem. The parser handles GitHub-flavoured Markdown along with embedded HTML, ensuring a rich authoring experience without sacrificing security.

The pipeline includes:

• Markdown parsing with remark-parse and remark-gfm
• HTML transformation with remark-rehype and proper sanitisation
• Automatic upgrading of image URLs to HTTPS for security
• Excerpt generation for metadata and previews

Beyond basic Markdown, the custom schema supports embedded media like YouTube videos and Instagram posts, providing a rich multimedia experience when needed.

Containerisation for Seamless Deployment

To simplify deployment and ensure consistency across environments, I maintained and customised the containerisation approach using a multi-stage Docker build process. This approach separates dependencies, building, and runtime stages, resulting in a lean final image that can be deployed virtually anywhere.

I had to map the host port from :3000 by default to :3003 due to my existing Docker situation.

The Docker setup works hand-in-hand with Docker Compose, making local development and production deployment straightforward. The multi-stage build pattern ensures that development dependencies don't bloat the final image, leading to faster startup times and reduced resource usage.

Conclusion

Building this fork of WhiteBreeze for my blog has been both a technical exercise and a creative outlet. What began as a desire for a customised blog evolved into a project that merges traditional blogging with the innovative social features of the AT Protocol. The result is a platform at blog.ewancroft.uk that feels personal while remaining connected to the wider Bluesky ecosystem and WhiteWind blogging platform.

I'm particularly pleased with how the dark pastel green theme turned out—it creates a calm, focused reading environment that suits my writing style. Looking ahead, I'm excited about the possibilities for further refinements, perhaps incorporating more interactive elements or expanding media handling capabilities. As the AT Protocol continues to evolve, so will this corner of the internet I now call home.