How I Vibecoded My Website and Moved It Out of Lovable

Before I start

This is my real website, but it started out as a vibecoding project. A large part of the site's design and features came from AI, so it doesn't strictly reflect my actual life, work, or activities.

What I was really interested in was whether I could get my real website online as cheaply as possible: no WordPress, no monthly hosting fees, no other subscriptions. The plan is simple: I'll keep using this site until it breaks or until I can be bothered to rebuild it from scratch.

The real story is how the site was made: first with an AI tool called Lovable, then moved out of it and onto my own server with Claude's help, along with a tool that lets me edit the site myself.

How it started

It all started with my bank. Through my bank I got 100 Lovable credits, and I thought it would be a shame to let them go to waste. Vibecoding was being talked about everywhere anyway, so it seemed like the perfect chance to see how far you can get with prompts alone.

Lovable got the site built quickly. But the next question came up right away: how do I host it myself, without paying anyone a monthly hosting fee?

What is Lovable?

Lovable is an AI-powered web app builder: you type what you want into a chat window, and it writes the code for you. A live preview sits right next to the chat, so you can say "make the button bigger" or "add a blog page" and watch what happens.

Under the hood, it isn't a closed site builder like Wix. Lovable generates real code (React, TypeScript, Vite) that you can take with you through GitHub. Every message and change costs credits, and by default the finished app lives on Lovable's own hosting.

That last point became important later: I didn't want my site to depend on Lovable's platform.

Building the site in Lovable

In Lovable, I ended up with a site that has a homepage, a blog with articles, and a CV-style page. The workflow was simple: describe, check the preview, fix, describe again. The code was built on the TanStack Start framework (React 19 + Vite), and I never had to touch it by hand.

The fun part of vibecoding is how fast something appears. The tricky part is that you don't always know exactly what was built for you. I only found that out when I tried to take the site out of Lovable.

In total, I used about 60 of the 100 credits I got to build the site.

Getting out of Lovable: how much had to change?

Short answer: almost nothing in the site's own code, but quite a lot had to be built around it. I did this part together with Claude.

The first obstacle was hidden in the configuration. The Lovable project was set up to build its server for a cloud environment (Cloudflare), which simply won't start on a regular server. The fix was to switch the Nitro build target to node-server in vite.config.ts. After that, the build produces a regular server file that can run with Bun.

All the other changes were around the site, not inside it:

• Docker: a two-part Dockerfile. One container runs the site's server with Bun, the other is the Caddy web server.
• docker-compose: starts both containers together.
• Caddy: takes care of the HTTPS certificate automatically and redirects raunopeets.ee to www.raunopeets.ee.
• Router: forwards web traffic to the server in a way that doesn't clash with the server's own admin panel.
• Analytics: my own Umami instance, running in a separate container.

A fun detail: the first plan was to make the site fully static and put it behind Nginx Proxy Manager. We dropped that idea because the Caddy-based setup turned out simpler and cleaner.

How the site works now

The site runs in my own home, on an Unraid server, in two Docker containers. When someone opens www.raunopeets.ee, roughly this happens:

1. The request reaches my home router, which sends it on to the Unraid server.
2. Caddy receives the request, handles HTTPS, and serves images and other files directly.
3. Everything else goes on to the Bun server, which puts the page together.
4. Umami counts the visits. Its script loads through my own domain, so ad blockers don't hide it.

Content-wise, the site is static: articles and images are baked into the site when it's built, not read from a database. That means every content change requires a new build. Technically it isn't a pure static-file site, since a server puts the pages together, but there's no database or admin panel exposed to the internet.

My own editor: editing the site from my laptop

The coolest part is the editor Claude programmed for me. I no longer have to go back to Lovable or dig through code to add a blog post.

The workflow looks like this:

1. I double-click the Edit Site app on my Mac's desktop.
2. A visual block editor opens in the browser, built on a library called Puck.
3. I edit the blog and CV pages or write a new article by dragging blocks around, like in a regular page builder.
4. I click Publish.

Publish first saves the changes on my laptop and then runs a deploy script. It copies the project over Tailscale to my home server and rebuilds the containers there. A few moments later the new content is live.

The editor runs only on my laptop, not on the internet. So the site has no public login page for anyone to try to break into, and yet I can edit it from anywhere I have my laptop and an internet connection.

What I learned

100 free credits ended up taking me much further than just building one website. Lovable is great for getting something up quickly, but the site only truly became mine once it moved to my own server.

The biggest surprise was how little of the site's own code needed to change. Almost all of the work was the infrastructure around it: Docker, Caddy, the router, analytics, and the editor. Vibecoding gets you a result fast, but owning that result means understanding a bit of what's going on under the hood.

And once more: the content here is an experiment. The real me is the one who put all of this together.