After months of iterative customisation and refinement, I'm pleased to share the release of my website template - a generalised version of the frontend that powers ewancroft.uk. This project transforms what began as a highly personal website into a flexible starting point for others interested in building an AT Protocol-powered blog or personal site.
A Journey of Adaptation and Reuse
The starting point for this project was hugeblank's WhiteBreeze, which, when I first forked it, was a clean, SvelteKit-based frontend for WhiteWind - a Markdown blog service that operates atop the AT Protocol. WhiteBreeze later migrated to ReactJS, but my version remained SvelteKit-based throughout. I never adopted the ReactJS rewrite.
Initially, my fork remained close to upstream, but over time, it evolved into a more complete and expressive personal website. It now incorporates blog functionality, professional details, real-time status updates, dynamic styling, and various integrations, all built with SvelteKit and tailored to my needs.
This process marked a shift from simply using open-source projects to contributing back. The project has moved from a fork of an individual-use blog frontend to a comprehensive site - and now, to a reusable template intended to serve a broader community.
WhiteBreeze and Beyond: Comparing Approaches
The Original WhiteBreeze: Lightweight and Focused
At its core, WhiteBreeze was conceived as "a small frontend for WhiteWind, a Markdown blog service using ATProto." When I originally forked it, the project used SvelteKit and prioritised minimalism - a single-user blog frontend with straightforward configuration and limited scope.
- Technology: SvelteKit (at the time of my fork)
- Functionality: Focused on blog post rendering and basic routing
- Configuration: Minimal - a few environment variables for blog setup
- Design: Simple and uncluttered, ideal for single-user self-hosted blogs
After my fork, WhiteBreeze moved to ReactJS, introducing a different stack and architectural style. I chose to continue building with SvelteKit, which offered a more productive environment for the type of dynamic, extensible site I envisioned.
My Website: A Personal Platform
My version of the site retained WhiteBreeze's original simplicity but expanded its role considerably. It became not just a blog, but a hub for personal and professional content - designed to grow with my needs.
- Technology: SvelteKit with modern tooling (Vite, Tailwind CSS, TypeScript)
- Features: Blog with filtering and archive support, real-time status updates, dynamic theming, and more
- Data Sources: Multiple AT Protocol collections, including custom lexicons for extended functionality
- Customisation: Highly tailored, with bespoke components and a design language suited to my personal identity
The Template: Generalised and Ready to Build
The newly released template is a general-purpose version of my site. It retains the capabilities of my live website, but with the flexibility to support a range of use-cases.
- Technology: SvelteKit (not ReactJS) - retaining the performance and developer ergonomics that shaped my workflow
- Structure: Modular and easy to extend, with clean separation of concerns
- Functionality: Includes rich content support, custom lexicon integration, RSS, dynamic metadata, and theme toggling
- Configuration: Accessible via
.envsetup and clear documentation - Documentation: Comprehensive guidance on deployment, customisation, and extension
Technical Highlights
The template incorporates lessons learned from building and maintaining my own site:
- SvelteKit offers excellent SSR, routing, and performance out of the box
- TypeScript-first development ensures safety and maintainability
- Modular architecture supports deep customisation without sacrificing clarity
- Custom lexicon support allows you to extend the AT Protocol with your own data types and metadata
In addition, the template supports Markdown with enhanced features like GFM, embedded HTML, and flexible media handling. There's first-class Docker support for containerised deployments, and it's built with modern tools such as ESLint, Prettier, and Tailwind CSS.
Why Publish a Template?
This project is a contribution back to the open-source ecosystem that enabled it. By sharing a clean, extensible starting point, I hope to lower the barrier for others who wish to build on the AT Protocol.
Not everyone wants to start from a deeply personalised project - and by generalising my site into a template, I've been able to create something more broadly useful, while documenting the decisions along the way.
Getting Started
The repository includes everything needed to deploy your own version:
git clone https://github.com/ewanc26/website-template.git
cd website-template
npm install
# Configure your .env file
npm run dev
You'll also find documentation on:
- Configuration via environment variables
- Creating and referencing custom lexicons
- Docker deployment
- Guidelines for further customisation
Looking Ahead
This template represents a snapshot of my current approach - but both the template and my personal site will continue to evolve. I'm especially interested in expanding AT Protocol integrations, refining the developer experience, and gathering community feedback to shape future directions.
Build with Me
If you're building a blog, personal site, portfolio, or just want to explore the AT Protocol in a frontend context, this template offers a well-considered foundation. It's shaped by months of development and personal use, but open enough to support your vision.
Every new site built on AT Protocol helps broaden the ecosystem. I hope this template makes that process a bit easier - and a bit more fun.
Links:
The template is open-source and licensed under the same terms as the original WhiteBreeze. Contributions, feedback, and forks are welcome.