The easiest way to build and host a website with Claude Code

Most AI website tutorials stop the moment the design looks good on your laptop. The site lives on localhost, nowhere near a real domain, and you’re left wondering what to do with all those files. This guide walks through the entire journey—from setting up a server and domain to using Claude Code to build a complete portfolio and putting it live on your own URL.

What you’ll build and how it works

The goal is a real, production-ready personal portfolio website on your own domain. You won’t need to write HTML, CSS, or JavaScript by hand. Instead, you’ll describe what you want in plain English and let Claude Code handle the coding.

Behind the scenes, there are two big pieces:

First, the hosting and infrastructure: a VPS (virtual private server), DNS, SSL, and cPanel. This is what makes your site reachable at a real URL 24/7. Second, the website itself: a modern, responsive portfolio built locally with Claude Code and then uploaded to your server.

Setting up hosting with an unmanaged Linux VPS

A website built on your computer stays on your computer until it’s uploaded to a server. Hosting is what gives your site a public URL and keeps it online all the time.

In this workflow, you use an unmanaged Linux VPS plan. A VPS is a dedicated slice of a physical server with its own resources and full root access. It sits between cheap shared hosting and a full dedicated server, giving you more control without enterprise-level costs.

“Unmanaged” means the provider keeps the physical machine running, but you’re responsible for everything on the software side: setup, configuration, updates, and maintenance. The tradeoff is more work for much more flexibility. You can install exactly what you need, including WHM, cPanel, and custom DNS settings.

Understanding WHM and cPanel

Two key tools make managing your VPS much easier:

WHM (WebHost Manager) operates at the server level. You use it to create hosting accounts, set the server hostname, manage SSL, and adjust global settings.

cPanel sits underneath WHM and is where you manage individual websites: uploading files, setting up email, managing databases, and configuring domain-specific settings.

Think of WHM as the control panel for the entire server, and cPanel as the control panel for each individual site. One cPanel account can host multiple domains, though if you want a separate cPanel account per site, you’ll need a higher-tier cPanel license.

Creating your VPS and logging into WHM

Once you’ve chosen your unmanaged Linux VPS plan and completed checkout, the provider will ask for a hostname. Initially you can use your main domain (for example, nocodemikey.com) and adjust it later once everything is configured.

After the server is provisioned, you’ll see its IP address in your hosting dashboard. To access WHM:

1. Copy the server IP address.
2. Paste it into your browser and add :2087 at the end (for example, 123.45.67.89:2087).
3. Log in with the username root and the password from your hosting dashboard’s secret or credentials section.
4. Accept the WHM terms and complete the initial setup wizard.

At this point, the server is running and WHM is ready, but your domain still doesn’t know where to point.

Buying your domain and connecting it with Cloudflare

Next, register the domain you want to use for your portfolio (for example, nocodemikey.com) through your hosting provider or any registrar. Once you own the domain, you need to point it to your VPS.

By default, the domain may be using your host’s shared DNS name servers. That won’t work for an unmanaged VPS, because your server isn’t part of that shared DNS cluster. Instead, you’ll use Cloudflare as your authoritative DNS host.

Here’s the high-level process:

1. Create a Cloudflare account and add your domain.
2. Choose the free plan—this is enough for this setup.
3. Add two DNS records in Cloudflare:
– An A record for the root domain with name @ pointing to your VPS IP address.
– A wildcard A record with name * pointing to the same VPS IP.

The wildcard record covers www and various service subdomains that cPanel creates automatically. For now, set the proxy status for both records to “DNS only” so traffic goes directly to your VPS.

Cloudflare will then give you two name servers. Go back to your domain settings at your registrar, replace the existing name servers with the two from Cloudflare, and remove any extras. Mixing old and new name servers can cause intermittent, hard-to-debug issues.

Aligning WHM with your DNS setup

Once Cloudflare is in charge of DNS, you should turn off WHM’s own name server service so they don’t conflict.

In WHM:

1. Search for “Name Server Selection”.
2. Disable the name server service and save.

Next, set a proper server hostname:

1. Go to “Networking Setup” → “Change Hostname”.
2. Use a subdomain such as server.yourdomain.com (for example, server.nocodemikey.com).

cPanel expects the server hostname to be a subdomain that isn’t also used as a regular website on the same server. Since you’ll host the main site on yourdomain.com inside cPanel, using the bare domain as the server hostname would cause conflicts.

Creating a cPanel account and enabling SSL

With DNS and WHM configured, you’re ready to create the actual hosting space for your site.

In WHM:

1. Search for “Create a New Account”.
2. Enter your domain (for example, nocodemikey.com) and the required account details.
3. Create the account and wait for WHM to finish provisioning it.

This new cPanel account is your website’s home. It has its own file space, settings, and SSL configuration.

Now you can enable SSL using AutoSSL:

1. In WHM, search for “AutoSSL”.
2. Run AutoSSL so it can detect the new cPanel account and issue a valid certificate for your domain.

Right after account creation, cPanel installs a temporary self-signed certificate. If you visit the site before AutoSSL finishes, your browser may show a warning. That’s normal and will disappear once AutoSSL replaces it with a trusted certificate.

Finally, log into the new cPanel account and enforce HTTPS:

1. Open the “Domains” section in cPanel.
2. Enable “Force HTTPS Redirect” for your domain.

Now visitors will automatically be redirected to the secure version of your site, even if they type the URL without https://.

Don’t forget ongoing server maintenance

Because this is an unmanaged VPS, you’re responsible for keeping it secure and healthy. After the initial setup, you should:

– Change the provider-generated root password.
– Keep the operating system and cPanel/WHM updated.
– Put a backup strategy in place for both the server and your website files.

These tasks aren’t handled for you, but they’re essential if you plan to host multiple sites or client projects on the same server.

What Claude Code is and why it’s different

With the hosting side ready, you can finally build the website itself—and this is where Claude Code comes in.

Claude Code is Anthropic’s AI coding agent. Unlike a normal chat where the model just outputs code for you to copy, Claude Code works directly inside your project. It can:

– Create and edit files and folders.
– Organize your project structure.
– Run terminal commands and install dependencies (when used via CLI or editor integrations).
– Incrementally build and refactor your codebase.

You describe what you want in natural language, and Claude Code turns that into real files on your machine. You’re not locked into a proprietary platform—once the project is generated, the code is yours to host anywhere.

If you want a deeper dive into Claude Code workflows, you can also check out this full Claude Code desktop workflow guide or this tutorial on building a high-value website with Claude Code.

Installing Claude Code on your computer

There are three main ways to use Claude Code:

– The desktop app (macOS and Windows).
– The command-line interface (CLI).
– Editor extensions (for tools like VS Code and JetBrains IDEs).

For beginners, the desktop app is the simplest option because Claude Code is built in—no need to install Node.js or configure extra tools.

To get started:

1. Go to claude.ai/download.
2. Download the installer for your operating system.
3. Run the installer and open the Claude desktop app.
4. Sign in with your Claude account.

Claude Code requires a paid plan (Pro, Max, Team, Enterprise, or console access). You can check and upgrade your subscription in your Claude account settings. For more advanced setups, the official documentation at docs.claude.com covers the CLI and editor integrations.

Designing your portfolio with a four-prompt workflow

Instead of dumping one massive prompt on Claude Code and hoping for the best, this workflow builds the site in four focused stages. Each prompt has a clear job and builds on the previous one, which keeps the project organized and easier to control.

Prompt 1: Create the hero section and visual identity

Start by asking Claude Code to create a personal portfolio website using separate HTML, CSS, and JavaScript files. For the first step, focus only on the hero section and the overall look and feel.

Your prompt might include details like:

– A bold name and title.
– A short tagline.
– Two call-to-action buttons.
– An animated particle and gradient background.
– A dark navy color palette with electric blue accents.
– A clean, modern sans-serif font.

Claude Code will scaffold the project, create the core files, and implement the hero section. When you open the site in your browser, you’ll already see a modern, animated hero that sets the tone for the rest of the page.

This first step establishes your design system—colors, typography, spacing, and overall vibe. Getting this right early saves a lot of rework later.

Prompt 2: Add about and skills sections

Next, extend the page with more content while preserving the hero exactly as it is. Ask Claude Code to:

– Add an “About” section with a two-paragraph bio for a web developer.
– Add a “Skills” section showing technical skills as labeled cards in a grid.
– Match the existing design and not modify the hero.

Claude Code reads the existing files, understands the current structure and styles, and appends the new sections to the same page. When you refresh the browser, you should see an about section and a skills grid that visually match the hero—same colors, fonts, and spacing.

Prompt 3: Add projects and contact sections

A portfolio needs real work examples and a way for people to reach you. For the third prompt, ask Claude Code to:

– Create a “Projects” section with three cards in a grid, each including:
– A project title.
– A short description.
– A tech stack label.
– A “View project” button.
– Add a “Contact” section with a simple form: name, email, and message fields.
– Match the existing design and keep previous sections unchanged.
– Connect the hero buttons to their respective sections (for example, “View my work” scrolls to projects, “Get in touch” scrolls to contact).

After this step, scrolling through your site should feel like a complete journey: hero → about → skills → projects → contact.

Prompt 4: Navigation, footer, and responsive polish

The final prompt is all about usability and finishing touches. Ask Claude Code to:

– Add a sticky navigation bar with smooth-scrolling links to each section (hero, about, skills, projects, contact).
– Add a clean footer with copyright text.
– Refine spacing and typography for better readability.
– Add hover effects to buttons and cards.
– Make the entire page responsive on mobile, without changing any existing content.

Once this is done, test the site on desktop and mobile:

– Click each nav link and hero button to confirm they scroll to the correct section.
– Check that the layout adapts on smaller screens without overlapping or overflowing.
– Hover over buttons and project cards to see the interactive states.

At this point, you have a fully designed, responsive portfolio ready to go live.

Uploading your site to cPanel and going live

Building locally is only half the journey. To make the site accessible on your domain, you need to upload the project files to your server.

In your hosting account:

1. Log into cPanel for your domain.
2. Open “File Manager”.
3. Navigate to the public_html folder. This is the web root for your main domain.

On your computer, open the folder where Claude Code created your project. Select all the files (including index.html, your CSS and JS files, and any assets) and drag them into the public_html window in File Manager.

Make sure index.html sits directly inside public_html, not in a subfolder. This is the default file the server looks for when someone visits your domain.

After the upload completes, visit your live domain in a browser. You should see your full portfolio—hero, about, skills, projects, contact, and footer—served over HTTPS on your own URL.

What you can do next

Having a site live on a real domain instantly makes your work feel more tangible and professional. You can:

– Share the URL with potential clients or employers.
– Add it to your social profiles and email signature.
– Use the same workflow to build client sites, product landing pages, or new AI projects.

The combination of Claude Code and an unmanaged VPS gives you a powerful, flexible setup. You can host multiple domains on the same server, customize the environment, and keep full ownership of your code. And because you built the site in clear stages, it’s easy to come back later to update content, tweak the design, or expand the layout as your portfolio grows.