A theme that started as my own website
Astro Rocket is my free, open-source Astro theme — and it didn’t begin as a theme at all. It started as a clone of Hans Martens Dev, the site I’d already built up with a lot of features for myself. That origin matters: before it was ever a theme, the foundation had been proven on a real website in production. At some point I realised that foundation was good enough that other people might want to build on it too. So I cloned it, replaced my content with demo content, and turned it into a theme anyone can start from. It’s an Astro 7 starter, MIT-licensed, and running live at astrorocket.dev.
The colour system is the heart of it
Most themes give you an accent colour to change and leave it at that. Astro Rocket has twelve full colour themes and a properly designed, token-based colour system underneath them. The part I’m proudest of is what happens when you switch the default colour: the whole site adapts by itself — and I mean the whole site, not just buttons and links.
- The favicon regenerates. It isn’t a static file — it’s drawn from your settings, in the current brand colour, with the first letter of your site name as its monogram. Rename the site or change the colour and the favicon in the browser tab updates to match, with no image editor involved.
- The logo uses that exact same system, so your mark stays perfectly in sync with the favicon everywhere it appears.
- The blog cover images recolour. Every post’s cover is generated in the brand colour, so they all shift together the moment the theme changes.
- Every component in the theme follows the colour — cards, badges, forms, borders, gradients — because they all read from the same design tokens rather than hard-coded values.
- Even the LetterGlitch CTA at the foot of the pages repaints itself in the new colour on its own.
The reason this is unusual is worth saying plainly: in a lot of themes — including the boilerplate this one grew from — changing the palette means editing a CSS file and rebuilding the site. In Astro Rocket you change one setting and everything moves together, instantly, with nothing to hunt down by hand.
And because seeing is believing, I put a theme selector right in the header. Visitors — and you, while you’re building — can click through all twelve themes and watch the entire site transform live, then settle on the one you want, without ever opening a file. It’s the feature that surprises people the most.
Everything a real site needs, built in
Under the colour system, Astro Rocket is a complete starter, not a pretty shell. The pieces that usually take weeks to assemble are already here, each one designed to earn its place:
- Project heroes with a gallery — and video. A project can open with a swipeable, scroll-snapping image gallery or a demo video. The gallery lazy-loads everything after the first slide, and video slides use a poster frame with
preload="none"so no video bytes download until someone presses play — and a video pauses itself the moment you swipe away from it. - Static search, powered by Pagefind. The whole site is indexed at build time into a search index that runs entirely in the browser — real full-text search with no server, no database, and no third-party service to pay for or leak data to.
- Pluggable comments. Giscus, Cusdis, or Artalk, chosen with a single switch. They’re off by default — adding zero JavaScript — and when enabled they lazy-load only when a reader actually scrolls toward them, so people who never reach the comments pay nothing.
- YouTube embeds as a real component. Drop a video into any post or project without the usual performance tax — the player loads on demand instead of dragging the page down on first paint.
- A typewriter effect for the hero, plus a layer of tasteful motion — sections easing in, cards cascading into place — that makes the theme feel alive. All of it steps aside automatically for anyone who’s set reduced motion, so it’s a treat for people who want it and never a burden for those who don’t.
- A scroll progress bar along the header, and a back-to-top button that doubles as a progress ring, filling as you read so you always know where you are in a long page.
- Internationalisation. i18n grew into a genuinely solid multi-language system — locale-aware routes for every page, so a second language just works. That one I can’t take full credit for: it matured because users raised issues and pushed it forward. The theme is better because of the people using it.
The blog is the documentation
A theme is only as good as how easily someone can make it their own — so I wrote the docs as the blog. There are more than twenty how-to posts: a getting-started guide, a full configuration guide, and a walkthrough for essentially every feature above — the colour system, custom logo and site name, comments, search, i18n, animations, the scroll indicators, and the rest. Someone new to the theme can learn to bend it to their own site by reading, not by digging through source code. It doubles as a working showcase, too: every post is the theme’s own blog system in action.
Listed on the official Astro directory
I submitted Astro Rocket to astro.build, the official Astro themes directory — and it went through their review process and was accepted. That was a proud moment: it means developers anywhere in the world can find the theme in the place they’d naturally look for one, and start building on it in a couple of clicks.
Free, open, and growing
Astro Rocket is free and open source on GitHub — 85 stars and 42 forks from developers around the world, and still climbing. Every star is someone who liked it; every fork is someone building their own thing on top of it. That’s exactly what I hoped for when I turned my own site into something other people could use.
I’m proud of this one
Astro Rocket is one of three projects that grew out of Hans Martens Dev — alongside the Client Portal. Of the three, it’s the one that travelled furthest from where it started: a personal website that became a theme with a community around it. I’m very proud of what it’s become.