How to Build and Launch a Website With Claude

TL;DR

Build a live website by following five stages: set up Claude Code and its connectors, plan the site in detail, let the AI build it, review the result visually, and deploy through Hostinger. Beginners can avoid writing code, but they must give precise requirements, inspect the output carefully, protect account tokens, and save project versions through GitHub.

Transcript

This is a real website. [music] It's live on the internet right now on a real domain. You can type this into your phone and it loads for you the same way it loads for me. I built the whole thing in one afternoon. [music] And here's the part that should get your attention. I have never written a line of code in my life. I built a 100 person writing ... Read More

Key Insights

• Vibe coding is a process in which a user describes a desired product in plain English, an AI writes the code, and the user judges the visible result. The presenter organizes that process into five stages: setup, planning, building, review, and deployment.
• GitHub is the project’s version-saving layer, preserving successive versions in the cloud so an unwanted AI change can be rolled back. The setup requires creating a free GitHub account, installing its Claude connector, connecting the account, and approving access.
• The Hostinger connector links Claude to hosting, allowing the agent to push code, connect the selected domain, and handle the security certificate during deployment. The demonstrated setup uses a Node.js web application, a chosen server location, an MCP configuration, and an API token.
• API tokens are sensitive account keys that should not be exposed during screen sharing or left sitting in a chat. After adding the Hostinger configuration and token, Claude Code must be restarted so the connection loads, then both external connections should be verified.
• Detailed planning is the main defense against generic or unsuitable AI output. The user should explain the intended audience, problem, desired feeling, location, story, and design direction, then ask Claude to continue asking clarifying questions until the project contains no ambiguity.
• Next.js is the presenter’s recommended stack for a beginner website because it covers both the visual and behind-the-scenes parts of the project. If a later idea requires logins, user accounts, or saved data, the user should ask Claude to suggest a backend.
• Visual review is the beginner’s central responsibility after Claude generates the site. The built-in browser supports annotations for broad feedback and element selection for precise changes, such as replacing a displayed name or changing the color of a particular button.
• Deployment is triggered by asking Claude to deploy the finished site through Hostinger. In the demonstration, the process pushes the code, connects the domain, handles the security certificate, and produces a live page that loads on a phone with a browser lock icon.

Questions & Answers

Q: What is vibe coding for complete beginners?

Vibe coding means describing what you want in plain English and allowing an AI to write the code. The user does not need to read the generated code in the demonstrated workflow. Instead, the user examines the visible result, identifies problems, and requests revisions. Because an AI can create something strange, unattractive, or insecure when given weak direction, the process still requires careful planning and review.

Q: How do you set up Claude Code for a website project?

Open the Claude desktop app, select the code tab, and begin a new session. Create and open a clearly named folder where every project file will live. Leave the model setting on the best available option and use high thinking effort. If usage runs out during the build, the presenter suggests dropping to a lower model tier because the difference is small for this type of project.

Q: Why should a beginner connect GitHub to Claude Code?

GitHub acts as unlimited undo for the project by saving versions in the cloud. When Claude produces a change the user dislikes, those saved versions make rollback possible. The demonstrated setup is to create a free GitHub account, open Claude’s connector customization area, find and install the GitHub connector, connect the account, and approve the requested access before building the site.

Q: How do you connect Hostinger to Claude Code?

Create a new site in the Hostinger panel, choose a Node.js web application, select the claimed domain, and pick the server location closest to you. Choose the option to build with the Hostinger connector and select Claude Code as the coding agent. Copy the supplied configuration into Claude, request that it be added to the MCP configuration, create an API token, and restart Claude Code.

Q: How should you plan an AI-built website before coding?

Ask Claude to draft a detailed website plan before building anything and to keep asking clarifying questions until there is no ambiguity. Describe who the site serves, what problem it solves, how it should feel, where it will live, and the story it should communicate. Speaking through a voice-to-text tool can help provide more detail, which reduces the number of decisions left to the AI’s imagination.

Q: What website stack does the presenter recommend for beginners?

The presenter recommends answering Next.js when Claude asks which technology stack to use for a website. She describes it as a reliable choice that covers both the visual side and the behind-the-scenes side. The demonstrated project remains visual only. If a future project needs logins, user accounts, or saved data, the user should ask Claude to recommend a backend, with Supabase identified as the usual answer.

Q: How do you review and improve a website built by Claude?

Open the completed site in Claude’s built-in browser and treat reviewing as the core user skill. Use annotations to circle an area, draw an arrow, and attach broad change instructions to the chat. For precise edits, select an individual page element and request a specific modification. The presenter also suggests installing a free front-end design skill and asking it to review and improve the site’s design.

Q: How do you deploy a Claude-built website to a real domain?

After the site has been planned, built, and reviewed, ask Claude to deploy it through Hostinger. The demonstrated connector pushes the code, connects the selected domain, and handles the security certificate. The result is a live website that loads from the real domain on a phone and displays a lock icon in the browser. The same server can also be used for additional projects.

Summary & Key Takeaways

• The workflow begins with Claude Code, a dedicated project folder, and connections to GitHub and Hostinger. GitHub preserves project versions for rollback, while Hostinger connects hosting and deployment to Claude. The presenter recommends verifying both connections before starting and treating the Hostinger API token as a sensitive account key.

• Planning reduces the poor decisions caused by vague prompts. The recommended approach is to describe the audience, problem, desired feeling, personal story, domain, and design direction, then let Claude ask questions until ambiguity is removed. For this visual one-page business site, the presenter selects Next.js and avoids accounts or saved data.

• Claude builds the planned site and displays it in a built-in browser, where the user reviews rather than writes code. Annotations and element selection enable targeted revisions, while a front-end design skill can improve the appearance. The completed project is then deployed to its domain through the Hostinger connector with one instruction.