Introduction
Most Claude Code tutorials stop the moment the local dev server lights up. That’s the easy half. The harder half — the part beginners actually need help with — is taking that local app and putting it on a real domain that other people can visit, with version control, deploys triggered from plain English, and the option to redeploy by typing one sentence.
This is a complete beginner walkthrough of building and deploying a full web application using Claude Code, with Cursor as the editor and Hostinger as the host. No prior coding knowledge assumed. You’ll come out the other side with a Next.js site at your own domain, a Git history of your work, and a Claude Code session that can push new deploys without you ever leaving the chat.
📚 Table of contents
- What you need before you start
- Installing Claude Code and Cursor
- Adding the Claude Code and Hostinger extensions
- Spec-first prompting — the step beginners skip
- Picking a tech stack (and why Next.js is the safe default)
- Building the site in two prompts
- Setting up Git so you can roll back
- Buying a domain on Hostinger and the first manual deploy
- Connecting Hostinger’s MCP server to Claude Code
- Redeploying with one sentence
- Common mistakes
- Frequently asked questions
🧰 What you need before you start
Three things. None of them are scary.
- A Claude Pro or Max subscription. Claude Code requires a paid Anthropic plan.
- Cursor (or any VS Code fork). Free editor with built-in AI features. Works on Mac, Windows, and Linux.
- A Hostinger account. $3.99/month for the cheapest hosting plan, with a free domain included for a year.
Skip the desktop “Claude Code” app that comes bundled with Claude itself — we’re going to use the version that runs inside Cursor because it makes the deploy step a lot smoother.
⬇️ Installing Claude Code and Cursor
Claude Code
- Open the Claude Code download page.
- Copy the install command (curl-based on Mac/Linux, an installer on Windows).
- Paste into a terminal and run it.
- Type
claudeto launch and sign in.
Cursor
- Download Cursor from cursor.com.
- Install it like any other application.
- Open Cursor and create a new folder for your site: File → Open folder, then make a folder called
my-site. - Close the default agent tab that pops up — you won’t need it.
🧩 Adding the Claude Code and Hostinger extensions
Find the puzzle-piece Extensions icon in Cursor’s sidebar. Install two extensions:
Claude Code
Search “Claude Code,” click Install. This adds a Claude Code icon to the bottom toolbar — click it and pick New session to open a chat panel beside your files.
Hostinger
Search “Hostinger,” click Install, trust the publisher. You’ll use this later to feed Claude Code an API token so it can deploy on your behalf.
Inside the Claude Code panel, set edit automatically as the mode and pick medium effort. Then click the slash menu and pick the model — Opus 4.7 is the default; switch to Sonnet if you’re on a smaller Claude plan and want to stretch credits.
📝 Spec-first prompting — the step beginners skip
The single biggest determinant of project quality is whether you wrote a spec before you wrote a line of code. Skip this and the agent will guess, you’ll iterate forever, and the project will sprawl.
Prompt template
“I want to make a [site type] for [purpose]. I don’t fully know what should be on it.
Ask me a bunch of questions about the design, the pages, the content, and the tech stack.
Then create a spec.md file in the
project root with everything I’ve decided. Don’t write any code yet.”
Claude Code asks targeted questions about visual style, structure (single landing page vs multi-page), color palette, and required sections. Answer them honestly — vague answers produce vague output. Result: a clean spec.md file you (and Claude) can refer back to forever.
📌 If you ever come back to this project a week later and Claude has “forgotten” the design, point it at spec.md and the context comes right back.
🧱 Picking a tech stack
Claude will usually suggest one based on your description. For most beginner-friendly sites the right answer is Next.js with Tailwind CSS. Three reasons:
- Easiest to deploy. Every host on the planet supports Next.js builds.
- Scales without rewrite. The simple site you build today can grow into a real product.
- Best Claude support. The model has seen more Next.js code than anything else — quality is higher.
If you eventually need user accounts, a database, or a real backend, Next.js still works — you just add a database layer later. For pure visual / informational sites, you don’t need a backend at all.
🏗️ Building the site in two prompts
Once the spec exists, building is the easy part. One prompt to build, one prompt to iterate.
Build prompt
“The spec looks great. Build out the full website now. Keep it MVP — don’t make it too complicated. Run the site so I can view it on my computer.”
Approve commands as they come up. Five to ten minutes later Claude Code returns a localhost URL. Click it — the site opens inside Cursor (or paste the URL into Chrome). Review the result, then iterate with one-sentence prompts: “Make the hero darker,” “Add a contact section at the bottom,” “Swap the project cards for a grid layout.”
Why “MVP first” matters
- AI is better at small, discrete tasks than huge multi-feature builds
- You catch design issues earlier when the surface is small
- You build a working baseline you can roll back to if a later change breaks something
- Iteration in plain English replaces what would have been hours of manual code editing
🗂️ Setting up Git so you can roll back
Version control sounds advanced; with Claude Code it’s one prompt. Setting this up means every future change creates a checkpoint you can return to if anything breaks.
Prompt
“This is great. Now create a Git repo and save all the work as a commit. Keep creating commits anytime we make a change so I can roll back if something breaks in the future.”
Claude initializes the repo, makes the first commit, and then quietly commits after every meaningful change. If a later edit wrecks the site, say “roll back to the last working commit” and the code returns to its previous state. No GitHub account required for this part — everything stays local until you decide to share.
🌐 Buying a domain on Hostinger and the first manual deploy
- Go to Hostinger, click View plans, pick the cheapest cloud plan ($3.99/month).
- Choose a duration. 12+ months unlocks promo codes if you have one.
- Pick a free domain —
yourname.comif available. - Complete the registration details (required for any domain purchase).
- When prompted, choose Upload files over GitHub.
- Compress your
my-sitefolder to a zip. - Upload it on Hostinger’s deploy page and click Deploy.
Within a minute or two, your site is live at the domain you picked. This first deploy is manual on purpose — you only do it once. After this, Hostinger’s MCP server takes over and Claude Code handles every future deploy.
🔗 Connecting Hostinger’s MCP to Claude Code
Two pieces to wire up — an API token from Hostinger, and a small MCP config inside Claude Code.
Generate the API token
- In the Hostinger sidebar, open the API section and click Generate token.
- Name it “Claude Code,” set never expires, click Generate.
- Copy the token. Treat it like a password — don’t paste it into chats or commits.
Wire it into the extension
- In Cursor, click the Hostinger extension icon, paste the token, click Connect.
- If Claude Code can’t see the MCP server (occasional Cursor quirk), copy the MCP config block from Hostinger’s API page.
- Paste the config into Claude Code and ask it to register the server, swapping in your token.
- Start a new Claude Code session, type
/mcp, and confirm hostinger shows up under MCP servers.
🚀 Redeploying with one sentence
This is where the workflow pays off. From now on, deploying a change looks like this:
“Deploy my project now. Change the site name from Tim Reseka to Tim Tech.”
Claude Code edits the code, commits, and pushes the new build to Hostinger using the MCP connector. Refresh the public URL and the change is live. No FTP, no Vercel dashboard, no rebuild button — just plain English.
You can also ask “what websites and domains do I have on Hostinger?”, “create a new site for project-x.com”, or “roll back the last deploy” — anything the MCP surface supports.
❌ Common mistakes
- Skipping the spec and asking Claude to “just build the website” — you’ll iterate forever
- Picking the wrong stack for the project — if you need a database, say so up front
- Going straight to multi-page complex builds — start MVP, iterate
- Skipping Git setup and losing work when a later change breaks something
- Pasting the Hostinger API token into a chat that gets logged or shared
- Forgetting to start a new Claude Code session after adding the MCP config — existing sessions don’t see new servers
- Hand-editing files in Cursor instead of asking Claude — the agent loses track of changes it didn’t make
Conclusion
The full beginner-to-deploy path with Claude Code is shorter than it looks. Install Claude Code, install Cursor, install two extensions, write a spec, build MVP-first, set up Git, buy a Hostinger plan, do one manual deploy, then wire up the MCP. After that, every future change is a one-sentence prompt away from being live.
The pattern generalizes. Once you’ve done it for a portfolio site, the same loop ships landing pages, internal tools, side-project marketing sites, and small SaaS frontends. Spec, build, commit, deploy — in plain English.
Related reading
-
Claude Code: Hands-On Deep Dive
Core Claude Code workflows, CLAUDE.md setup, and the project context model—go deeper after completing the beginner build.
-
The 9-Stage Roadmap to Build an AI App
The structured plan behind the spec-build-deploy loop—from idea and stack choice through CI/CD and post-launch monitoring.
-
Ghost.build: AI-Native Database for Claude Code
When the Next.js app needs a database—Ghost gives Claude Code instant fork-based Postgres environments with zero config.