[ ]

0. It started with envy (call it inspiration).

Recently I found myself noticing how nice other personal blogs were, and how much I hated my own.

After a few seconds on https://julian.digital/, I felt that “wow” feeling and became insanely jealous. Playing with my Ghost blog, there was no easy way to get a great custom design live.

SO it felt like time to bite the bullet and build my own. Also a good chance to try out a non-CMS option like Hugo, Jekyll, Eleventy.

I started by riffing design ideas in Lovable.

1. Finding a lovable structure.

This is often where I’ll start projects, just because I’m more familiar and practiced with it than bolt, replit et al – and I know I’m not planning to keep whatever I build there afterwards.

Lovable Step 1

Lovable Step 2

We had a kind of skeleton now but I wanted this to have something distinct to it. So I asked Lovable to just try something crazy.

This is how we went ASCII!

Lovable Step 3

Hmmmm much better. Lovable Step 4

Once I was happy with the concept, I took some screenshots, and jumped to my good friend Claude. C. Code.

2. Moved to Claude, iterated on design

You’ll notice I haven’t bothered to write a complex plan with a good reasoning model. This project just isn’t messy enough to warrant it.

I just asked Claude to /init and get its bearings, then

Here’s my whole Claude Code conversation from the day I launched (unfortunately this doesn’t include the day 1)

It set up Hugo, got everything in place and took a first crack.

I tried lots of different looks and feel for the home page. One option was replacing the rough ASCII headings with a really modern refined look on hover. Didn’t work. I also tried just a simple transformation on the ASCII. Not quite right.

Somewhere along the line I thought of trying colour. Together we ended up at the nice watercolour effect I have now.

Claude Code Step 2

I moved onto the Single page design, asking it to generate ASCII style headings. Then Further posts at the bottom.

The next substantial bit was the “about” bar. Initially it was a black drawer, sort of like I had on my old website. A click would expand it and tell you more about me. Claude Code Step 1

(Thinking about this now, it might have been fun to push this further and make it like a terminal, complete with Claude Code style…)

The next day I decided to replace this with something based on Liquid Glass.

Claude Code Step 3

Hosting, analytics etc.

I have my domains saved in Cloudflare, because I read somewhere that it sells them basically at cost. So that’s where I set up the hosting through a simple Cloudflare Pages route, connected to my repository in GitHub. I couldn’t be bothered to remember how to do it myself, so just asked Claude Code for instructions.

ChatGPT recommended GoatCounter, which was new to me, free – and is working brilliantly so far.

And the rest, as they say, is history.

As I write this, I’m asking Claude Code to look at the whole blog and find ways to improve it technically. It says we have achieved some amazing results. I suspect it will have destroyed everything, and especially that it has forgotten we are using Hugo, which has certain expectations and requirements.

So the building never ends – but I hope this might at least be of interest to a couple of you thinking about doing your own thing.

Let me know any questions, always happy to help.