Ads

How to build a website with Claude Code (step by step)

Step-by-step guide to building and deploying a real website with Claude Code, even without coding experience. From first prompt to live domain with Hostinger.

⏱ 17min 👁 857 views 📅 September 30, 2026

Summary

### What the Video Demonstrates The video follows a hands-on experiment designed to answer a practical question: can someone with no coding background build a real, functional website using Claude Code from scratch? The creator starts with an empty folder and works entirely within the Claude Code terminal environment, never leaving the tool to write HTML, CSS, or JavaScript. The result is a complete journey from initial setup to a live website on a custom domain. The demonstration is structured as an honest assessment of what works well, what feels generic without guidance, and how to correct course using better prompting strategies.

The core narrative is built around two distinct approaches to website generation. First, the creator tests how quickly a single prompt can produce a website, revealing both the speed of AI-generated code and its tendency to create generic, template-like output. Then, the video shifts to a more refined method: having Claude conduct an interactive interview to create a creative brief. This second approach produces a website that actually reflects business identity and purpose. Along the way, the video covers practical infrastructure concerns like hosting setup, deployment pipelines, staging environments, and email deliverability.

### Hosting Setup with Hostinger The demonstration begins with setting up a hosting account on Hostinger, which serves as the deployment target for the Claude Code project. The creator walks through account creation, plan selection, and initial configuration steps. Hostinger is positioned as a budget-friendly option that integrates well with AI-driven workflows, particularly for users who are not comfortable managing complex server infrastructure on their own. The video also promotes an affiliate discount code, but the technical steps remain relevant regardless of whether the viewer uses that specific code.

Hosting setup is treated as a prerequisite rather than the main focus. The creator moves quickly through the dashboard, explaining only what is necessary to establish a connection between Hostinger and Claude Code later. This section is useful for beginners who have never purchased hosting before, but it does not dwell on advanced server settings or performance optimization. The emphasis is on getting from zero to a deployable environment as fast as possible.

### Connecting Claude Code to Hostinger One of the most valuable sections of the video covers how to connect Claude Code directly to Hostinger so that the AI can deploy files without manual uploads. The creator demonstrates the API credentials, environment variables, and terminal commands required to establish this connection. The setup enables a workflow where Claude Code can push changes to a staging server, preview the result, and then promote the site to production on a custom domain.

This integration is a key differentiator from simply asking Claude to generate code in a chat window. By connecting Claude Code to the actual deployment target, the creator removes the friction of downloading files, using FTP clients, or configuring CI/CD pipelines manually. The video shows how the AI can handle these operational tasks as part of the same conversation, reinforcing the premise that a non-developer can manage the full lifecycle of a website. The connection process is presented clearly enough that a viewer with minimal technical experience could replicate it.

### Building with One Prompt After the infrastructure is ready, the creator tests the simplest possible path: asking Claude Code to build a website with a single, open-ended prompt. The AI responds quickly, generating a multi-page site with generic sections like a hero banner, an about page, and a contact form. The speed is impressive, but the creator is honest about the limitations. The result looks like thousands of other AI-generated websites: functional but anonymous, lacking any distinctive brand identity or tailored messaging.

The one-prompt approach is framed as a useful proof of concept rather than a recommended final product. It demonstrates that Claude Code can understand the request, scaffold a project, write the necessary files, and even preview the result locally. However, the generic output highlights a fundamental issue with AI-assisted website creation: without specific input from the business owner, Claude defaults to safe, predictable design patterns. The creator uses this result as a baseline to contrast with the more thoughtful creative brief method that follows.

### The Creative Brief Interview The second half of the video introduces a smarter approach: having Claude Code interview the website owner before generating anything. Instead of guessing what the site should say or look like, Claude asks a series of questions about the business, target audience, brand personality, desired calls to action, and preferred visual style. The creator answers in natural language, and Claude uses these answers to compile a structured creative brief.

This interview process dramatically changes the quality of the output. The resulting website feels intentional, with copy that speaks directly to the business audience and design choices that reflect the owner's preferences. The video makes a strong case that the key to better AI-generated websites is not a more powerful model or a longer prompt, but a structured discovery phase. The creative brief acts as a reusable reference document that keeps Claude aligned with the business goals throughout the rest of the build. This section is the most educational part of the video, offering a repeatable methodology rather than just a tool demonstration.

### Deploying to Staging and Going Live Once the revised website is ready, the creator walks through the deployment process in detail. The first step is pushing the site to a staging environment, where it can be reviewed privately before anyone else sees it. This is presented as an essential safety step, allowing the owner to catch errors or make final adjustments without risking the live domain. The staging environment is directly accessible through the Claude Code workflow, eliminating the need for separate preview tools.

After reviewing the staging version, the creator promotes the site to production and connects it to a custom domain. The video shows the DNS configuration steps, the domain mapping inside Hostinger, and the moment the site becomes publicly accessible. This section demystifies a process that many beginners find intimidating, showing how Claude Code can guide the owner through each step in plain language. The deployment is framed as the natural endpoint of the AI-driven workflow, confirming that the entire process can be completed without manually editing code or navigating complex server panels.

### Fixing Contact Form Email Deliverability The final technical challenge in the video addresses a common problem: contact form submissions landing in spam folders. The creator shows how to resolve this by setting up a free business email address through Hostinger and configuring the form to send through that authenticated address. This step improves email deliverability significantly, ensuring that customer inquiries actually reach the website owner's inbox.

This section is a valuable bonus for anyone building a real business website. It acknowledges that going live is not the final step; the site must also function reliably for its intended purpose. The solution is practical and low-cost, relying on the free business email included with the Hostinger plan. The creator explains the reasoning behind the fix in simple terms, connecting the technical configuration to the tangible outcome of receiving customer messages without manually checking a spam folder. It also reinforces the broader theme of the video: Claude Code can guide a non-developer through both common and edge-case website tasks.

### Who Should Use This Approach The video closes with an honest assessment of who should consider building a website with Claude Code. The creator identifies the ideal user as a small business owner, freelancer, or individual who needs a simple but professional online presence without the overhead of hiring a developer or learning to code from scratch. Claude Code is presented as a middle path between drag-and-drop website builders and custom development, offering more flexibility than the former and far less complexity than the latter.

The creator also notes the limitations. Complex web applications, highly customized designs, or projects requiring ongoing maintenance may still benefit from professional development. The video does not overpromise; it positions Claude Code as a powerful tool within a specific niche. For the right user, however, it can replace the traditional process of commissioning a basic website, reducing both cost and time while producing a result that genuinely reflects the business. This balanced conclusion strengthens the credibility of the entire demonstration.

What you will learn

  • Set up a hosting account on Hostinger and connect it to Claude Code
  • Use a single prompt to generate a basic website and identify its limitations
  • Have Claude conduct an interview-style creative brief for tailored website output
  • Deploy a website to a staging environment and promote it to a live custom domain
  • Configure contact form emails to avoid spam through authenticated business email
  • Evaluate whether Claude Code is suitable for a specific website project

Concepts covered

Technologies used

Chapters 8 markers

  1. Can you build a website with Claude Code?
  2. Set up your hosting account
  3. Connect Hostinger to Claude Code
  4. Build a website with one prompt
  5. Get a better site with a creative brief
  6. Deploy to staging and go live
  7. Fix contact form emails
  8. Who should build with Claude Code?

Next suggested video

Reviews

Student rating 0.0
★★★★★ 0 reviews
Rate this lesson

Help other students decide if this lesson is useful.

No reviews yet. Be the first to rate this lesson.