Build and Deploy a Website Using Claude Code (From Zero to Live)

Table of Contents

• What you'll need
• Why Claude Code instead of a no-code builder?
• Step 1: Scaffold the site
• Step 2: Iterate locally
• Step 3: Push to GitHub
• Step 4: Connect lowcloud and deploy
• What does this cost?
• When this stack is the wrong choice

Vibe coding feels great until the moment you have to ship. You've sat in a Claude Code session for two hours, the site looks good on localhost:3000, and now you need a real URL with HTTPS, a real server, and a deploy pipeline that doesn't break the second you close your laptop. This guide walks you through the full path: from an empty folder to a live website on sovereign German infrastructure, using Claude Code, GitHub, lowcloud, and Hetzner. No DevOps background required, but you should be comfortable opening a terminal.

Key Takeaways

• Claude Code can scaffold, edit, and ship a complete Astro project from natural-language prompts, while you keep full control of the codebase.
• GitHub stays the single source of truth, so a repo move or a new collaborator never breaks anything.
• lowcloud connects your repo to a Hetzner server (CX22, around €4 per month) and handles SSL, build, and push-to-deploy automatically.
• The full stack costs roughly €20 to €30 per month, hosted in Germany under GDPR.

What you'll need before you start

The list is short. If you've ever opened a terminal, you have most of it.

• Claude Code: Anthropic's CLI. It runs locally, edits files, runs commands, and explains what it's doing. Free with a Claude Pro plan, or pay-per-use via the API.
• GitHub: Hosts the code. The free plan is enough.
• lowcloud: Connects your GitHub repo to a server and handles the deployment. No Kubernetes knowledge needed.
• Hetzner: A German cloud provider with strong price-to-performance and EU data residency. Through this referral link you get €20 starting credit, which covers your first months.
• A terminal and Node.js 20+ installed. That's it.

Why Claude Code instead of a no-code builder?

If you've followed our Lovable tutorial, you already know the no-code path: chat with an AI in a browser, get a live preview, export to Git. That works beautifully for landing pages and simple SaaS UIs. So why pick the terminal?

Claude Code gives you the codebase. Every file, every dependency, every config. You're not abstracted behind a UI, which means three things matter more here than with Lovable:

1. You can use any framework. Astro, Nuxt, Next.js, SvelteKit, plain HTML. Claude Code doesn't lock you in.
2. You can refactor without limits. Ask Claude to migrate from Tailwind v3 to v4, swap your CMS, or split a monolith into a monorepo. A no-code builder typically can't.
3. You own the developer loop. git, pnpm, eslint, your editor, your CI: all of it works the way it normally does.

The tradeoff is honest: Claude Code is a developer tool. If you've never touched a terminal and just want a five-minute landing page, start with Lovable. If you want to grow the project past a one-pager, Claude Code scales further.

Step 1: Scaffold the site with Claude Code

Install Claude Code once with a single command from the official docs:

npm install -g @anthropic-ai/claude-code

Then create a fresh project folder and start a session:

mkdir my-site && cd my-site
claude

You're now in a Claude Code session inside an empty directory. Tell it what you want. The prompt below works as a starting point. Adapt the description to your actual project.

Scaffold a static website with Astro 5, TypeScript, and Tailwind v4.
The site is for a small productivity SaaS called "Focusly".
Sections: a hero with a headline, three feature cards, a pricing
table with two tiers, an FAQ block, and a footer with contact info.
Use a dark theme with a green accent color. Add a clean SEO setup
(meta tags, OpenGraph, sitemap, robots.txt). Configure pnpm as the
package manager. Use Astro's built-in islands only when needed.

Claude Code will run pnpm create astro@latest, install dependencies, write the components, and tell you exactly what it changed. When it's done, it'll suggest:

pnpm dev

Open http://localhost:4321 and you have a working site. If something's off, describe it in plain English ("the hero feels too tight on mobile, add more vertical padding"), and Claude Code edits the right file.

Practical tip: Run /init early in your session. Claude Code creates a CLAUDE.md at the repo root that captures your stack, conventions, and commands. Future sessions read this automatically and stay consistent with the choices you made.

Step 2: Iterate locally

Now the loop starts. You write what you want, Claude Code implements it, you check the result in the browser. A few habits keep this productive:

• Commit often. After each meaningful change, ask Claude to run git add and git commit with a clear message. Each commit is a checkpoint you can roll back to.
• Keep pnpm build green. Before you push, run pnpm build (or ask Claude to). Vercel, Netlify, lowcloud, every host runs the build. If it fails locally, it fails in production.
• Use the Plan mode for bigger changes. When you're about to refactor, type /plan. Claude proposes an approach first, you approve, and only then it touches files. Saves a lot of "wait, why did you delete that?" moments.

Claude Code is also good at the un-glamorous parts: writing alt text, generating an og-image, adding a humans.txt, fixing the LCP score. Ask it. It'll grep through the project, find the relevant files, and patch them in place.

Step 3: Push to GitHub

Once the site looks the way you want, GitHub takes over as the single source of truth. Claude Code can do this end to end if you have the GitHub CLI (gh) installed and authenticated.

Tell Claude:

Initialize git, create a private GitHub repo named "focusly-site"
under my user account, and push the main branch.

Behind the scenes that's:

git init
git add .
git commit -m "Initial scaffold"
gh repo create focusly-site --private --source=. --push

Two minutes later you have a private repo with a working Astro site. From this point on, every git push to main is a release candidate.

If you prefer a manual flow, create the repo in the GitHub UI and run the three commands yourself. The result is identical.

Step 4: Connect lowcloud and deploy to Hetzner

This is the part most tutorials skip. Vercel and Netlify are excellent, but they host your site outside of the EU and bind you to their proprietary build pipeline. lowcloud takes a different approach: it deploys to your own Hetzner server, runs the build inside a container, and gives you a live URL with auto-renewing SSL via Let's Encrypt.

The setup is a one-time process and looks like this.

1. Create a Hetzner account through the referral link. You get €20 of credit, enough for several months of a CX22 instance.
2. Sign up at lowcloud.de and connect your Hetzner project (lowcloud uses a Hetzner API token, scoped to the project you choose).
3. Connect your GitHub account. lowcloud installs a small GitHub App so it can read your repos and listen for pushes.
4. Create a new app. Pick the focusly-site repo, choose the main branch, and select "Static site / Astro" as the template. lowcloud detects the build command (pnpm build) and the output folder (dist) automatically.
5. Pick a server. Either use an existing Hetzner instance or let lowcloud provision a new CX22. The first deploy takes about three minutes.
6. Add your domain. Point a CNAME or A record to the lowcloud-provided address. SSL is requested and renewed automatically.

From now on every git push to main triggers a build and a zero-downtime rollout. If something breaks, you can roll back to the previous version in the lowcloud dashboard with a single click.

For a deeper look at why the cloud-agnostic architecture underneath this matters, the long version is in our pillar article. The short version: your code is portable, your data lives in Germany, and you can leave any time without rewrites.

What does this cost?

Real numbers, no asterisks.

You land between €20 and €35 per month for a small project, and most of that is the Claude Code subscription you'd pay anyway. There's no per-seat pricing, no surprise egress bill, no dyno math.

When this stack is the wrong choice

Honest section. This setup is great for marketing sites, portfolios, small SaaS frontends, internal tools, and side projects. It's a poor fit if any of these apply:

• You need a managed Postgres with automated point-in-time recovery and a 99.99% SLA out of the box. lowcloud can run Postgres for you, but if you want a SOC 2-audited DBaaS without thinking about it, look at AWS RDS or Neon.
• You need multi-region failover. Hetzner runs in Germany and Finland. If your audience expects sub-100ms latency in Singapore, this stack isn't the right fit.
• You expect massive, spiky traffic and want a global edge network with autoscaling. A CDN-first PaaS will serve you better there.

For everyone else, the combination of Claude Code, GitHub, lowcloud, and Hetzner is a quietly powerful default. You get speed, ownership, and a sane bill.

Frequently Asked Questions

Do I need to know how to code to use Claude Code?

You need enough comfort with a terminal to type commands and read error messages. You don't need to know a specific language. Claude Code explains its changes, suggests fixes, and runs the build for you. People migrate from Lovable to Claude Code roughly when they start wanting things the no-code UI can't express.

Can I use Claude Code with Vercel or Netlify instead of lowcloud?

Yes, that works fine. Claude Code is framework-agnostic and host-agnostic. The reason this guide uses lowcloud is data sovereignty and cost predictability. If your priority is the global edge network or a tight Next.js integration, Vercel is a strong choice and the rest of the workflow stays identical.

Where exactly is my data hosted with this setup?

Your code lives on GitHub (US-hosted, but encrypted in transit and at rest). Your built site and any data it stores live on Hetzner servers in Germany or Finland, both inside the EU. lowcloud itself is a German company. For most projects this lines up cleanly with the digital sovereignty principles we've written about elsewhere.

How is this different from Lovable, v0, or Bolt?

Those tools generate a project for you and host the working copy in their browser UI. Claude Code edits files on your local machine, in any framework, for any project size. The exports from Lovable and v0 are normal Git repos, so you can absolutely combine them: scaffold in Lovable, then continue with Claude Code once the no-code UI gets in your way.

What's next

You have a live site, push-to-deploy, HTTPS, and a build pipeline that costs less than a dinner out. The interesting part starts here. Add a database, a contact form backed by Resend, an analytics setup, a blog. Claude Code handles each of those in one or two sessions if you describe what you want.

If you'd rather start the no-code way and migrate later, our Lovable build-and-deploy guide covers the same destination from a different starting point. And when your project outgrows a single static site, the cloud-agnostic architecture article covers what to do next.

Sign up for lowcloud and ship your first deploy this afternoon.