Build a simple website with Claude and put it online with Netlify

At the end of this guide you’ll have a small website (a one-page portfolio, event page or menu) live at a public netlify.app address, plus a repeatable way to update it by asking Claude. Claude Code writes the files on your computer; Netlify hosts them.

Netlify is a hosting service that puts website files on the internet. Netlify’s MCP server is a plug-in that lets Claude talk to your Netlify account: create projects and deploy them.

What you’ll have at the end

• A folder on your computer with your site’s files (HTML, CSS, images).
• A live URL you can share.
• Netlify connected to Claude Code, so “deploy my latest changes” works as a prompt.

What you need

• Claude Code, signed in with a Pro, Max, Team or Enterprise plan or a Console account.
• Node.js 24 or newer. Netlify’s Claude Code guide asks for Node 24+. Check with node --version.
• A Netlify account. You can start without one; Netlify says Claude Code can prompt you to log in or sign up when needed.
• About 30 minutes, most of it spent deciding what the page should say.

Pick your publishing route

Route	Command or place	Updates later	Good for
Netlify MCP in Claude Code	Ask Claude to deploy	Ask again	Most people following this guide
Netlify CLI (Claude can run it)	netlify deploy --prod	Run again	If you prefer to see the command
Netlify Drop	app.netlify.com/drop	Drag the folder again	No setup at all
Anonymous deploy	netlify deploy --allow-anonymous	Must claim within 1 hour	A quick, throwaway preview

Step-by-step

1. Install Claude Code and make a project folder

On macOS, Linux or WSL:

curl -fsSL https://claude.ai/install.sh | bash

On Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Open a new terminal, run claude --version to confirm, then make a folder and start Claude in it:

mkdir my-site
cd my-site
claude

Claude Code asks you to sign in the first time.

2. Ask Claude to build the site

Be specific about content and keep it static (plain HTML and CSS) for your first site. Static sites need no build step, which removes the most common deploy errors. A first prompt is under “Make it useful” below.

When Claude proposes creating files, it may ask for approval. Read the file list, then approve. Ask Claude how to preview it; for a plain HTML site, opening index.html in your browser is enough.

3. Connect Netlify’s MCP server to Claude Code

Exit Claude Code (/exit) and run Netlify’s documented command:

claude mcp add --transport http netlify https://netlify-mcp.netlify.app/mcp

If your company network blocks remote MCP servers, Netlify gives a local alternative:

claude mcp add netlify -- npx -y @netlify/mcp

Start claude again and type /mcp to confirm netlify is listed and connected.

Optional: Netlify also publishes “agent skills” (instruction packs that teach Claude Netlify’s features). For Claude Code:

npx -y skills add netlify/context-and-tools --skill '*' --yes --agent claude-code

4. Log in to Netlify

If the Netlify command-line tool isn’t installed yet, ask Claude to install it or run npm install -g netlify-cli. Then ask Claude to help you log in, or run netlify login yourself. If your company uses Netlify single sign-on, Netlify warns you may need your work login rather than a personal one.

5. Deploy a draft first, then production

Netlify separates two kinds of deploy:

• Draft deploy (netlify deploy): a test URL that isn’t your main site.
• Production deploy (netlify deploy --prod): your live site.

Ask Claude for a draft deploy, open the URL it gives you, check the page on your phone too, then ask for production. Claude should tell you the live URL when it’s done.

6. Update the site later

Open the folder, run claude, describe the change, review it locally, then ask Claude to deploy again (draft first if the change is big). You can see your deploys on the project’s Deploys page in Netlify.

No-terminal fallback: Netlify Drop

If you already have a folder of site files (for example one Claude Code made earlier), go to app.netlify.com/drop and drag the folder into the deploy zone. Netlify’s docs say to drop the built output folder (often dist, build or public for frameworks, or just your folder for plain HTML), unzip zip files first, and log in to the right team before dropping. To update a Drop site, drag the new folder onto the dropzone at the bottom of the site’s Deploys page.

Using Claude Desktop or claude.ai instead

Netlify is in Claude’s connector directory (made by Netlify). In Claude Desktop, Netlify’s guide says to go to Settings > Connectors, select Add, search for Netlify, then Connect and sign in. Newer app versions call the page Customize > Connectors. Netlify suggests setting read-only tools to Always allow and write or delete tools to Needs approval.

The connector is good for “Show me my Netlify projects” or “What’s the status of my latest deploy?”. Netlify’s Desktop guide says Claude Desktop can help you deploy too. For building a new site from files on your computer, Claude Code is the more direct route, because it works with those files directly.

Make it useful: prompts to try

Build a one-page website in this folder using only HTML and CSS, no frameworks. It's for my weekend pottery classes: a headline, a short "about me" paragraph, three class options with prices (Beginner wheel 45 USD, Glazing 35 USD, Private lesson 80 USD), a contact email of hello@example.com, and a footer. It must look good on a phone. Put everything in index.html and styles.css, then tell me how to preview it.

Use the Netlify MCP server to create a new Netlify project for this folder and do a draft deploy. Give me the draft URL and wait. Don't deploy to production until I say "go live".

Change the Glazing price to 40 USD, add a "Gift vouchers" section under the classes, check the page still works at phone width, then deploy to production on Netlify and tell me the live URL.

Troubleshooting

• claude: command not found after install. Open a new terminal window. If it still fails, the install folder isn’t on your PATH; Claude Code’s “Troubleshoot installation” page covers the fix.
• Netlify tools missing in Claude Code. Run /mcp and re-authenticate, or remove and re-add the server with claude mcp remove netlify.
• Login or “wrong account” errors. Run netlify status to see which account you’re on, then netlify login. If the CLI itself is broken, reinstall with npm install -g netlify-cli and check netlify --help.
• Node errors. Run node --version. With nvm: nvm install 24 then nvm use 24.
• The site deployed but looks unstyled. Usually a wrong file path for styles.css. Ask Claude to check that every link in index.html points to a file that exists.

Watch out for

• Don’t use anonymous deploys for anything sensitive. They create a temporary site that is removed if you don’t claim it within one hour.
• Netlify says never to commit Netlify CLI config files or personal access tokens to a repository.
• Approve production deploys yourself. Asking Claude to stop at a draft (prompt 2) gives you a review step.

Next steps

• Have Claude click through and test your web app before each production deploy.
• Turn a Figma design into working code for a site that matches a design.