Introducing My Website Template: From Personal Site to Community Resource

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 .env setup 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:

Template Repository

My Personal Website

WhiteBreeze (Original)

Live Site

The template is open-source and licensed under the same terms as the original WhiteBreeze. Contributions, feedback, and forks are welcome.