I vibe-coded my website

Until recently, I’ve used Webflow to build and maintain my personal website (this one!). And while I love Webflow, it’s overkill for a small site like this. And it ain’t exactly cheap. I’ve been wanting to hand-code my site to get it off Webflow but never seemed to get around to it. And I’ve been wanting to put Claude Code through its paces for almost as long. So I thought, “why not see how Claude does at recreating my site in plain html/css/js?”

Over the course of about a week, with me sending a prompt and then turning my attention back to the other projects I was working on, my coding partner and I not only rebuilt this site and deployed it on my own server, but we made some small improvements along the way.

It’s now built using Astro and plain ol’ Markdown files on my hard drive for all of the content. When I commit an update, Astro turns everything into plain HTML/CSS/JS, which makes for a lightning-fast website. No frameworks to call. (Okay, there is a little bit of React being used, but not much.)

The /now page used to be just a simple bulleted list. Now it’s a masonry grid with cool 3D art for the now reading, now watching, and now listening sections.

Clicking on an album cover on my music page now brings up an audio player and starts a preview track playing.

My gig archive is now filterable by band. Probably not something anyone but me would want to do, but now I can.

All of this was easily coded up by Claude. All of this I would never have bothered to spend time wiring up on my own.

I know enough html, css, and javascript to get around in a repo, but I don’t know enough to code a website like this completely from scratch without a lot of effort. But my coding knowledge definitely helped me communicate with Claude. For instance, I could tell Claude, “put the button in a div with justify-content:flex-end” and it would do exactly that. But I could have just as easily told it “right-align the button” and I probably wouldn’t have gotten the same result. It also helped me check Claude’s work and look for efficiencies. Without specific instruction, Claude tends to spit out verbose code and sprinkle CSS all over the place, making it really difficult to update myself.

I used Claude Design to quickly test out some different layout ideas. I’m a friggin’ designer, so I could have easily done it myself in Figma, but I wanted to test out Claude Design to see how it would handle the task. About what you’d expect: pretty generic-looking designs. But with some iteration I was able to get some decent results to use as a starting point. And it gave me some ideas I might not have come up with otherwise.

It’s easy enough to update my site now; it’s just text files on my computer. But I also crafted some handy Claude skills for updating some of the content. I can just tell Claude that I booked a new gig, tell it where and when, and it does all the necessary work in the background to add it to the “database” (really just a folder of .md files on my hard drive) and get it up on the site. No more hunting down urls and addresses and everything.

And because it’s just text files on my computer, I’m not beholden to any third party for storing my content anymore.

It ain’t perfect. And I certainly wouldn’t do this for a client’s e-commerce site or a production app (yet). But for prototypes or a low-traffic, personal site like this I think it’s totally fine. And it allowed me to cancel my Webflow plan, saving me a bunch of dough.

So that’s cool.