How to deploy a website from Claude Code in 8 steps

To deploy a website from Claude Code, review and test the project on your computer, prepare the files, connect them to a hosting provider, and publish the site to a public address that anyone can open in a browser.

Claude Code, Anthropic’s artificial intelligence (AI) coding assistant, builds and edits websites inside your project folder, but it doesn’t host them. Until you deploy the project, other people can’t reach it through a public website address. Deployment puts the required site files or application on a hosting service that keeps it available online.

Before you start, you need access to Claude Code through a paid Claude plan or a Claude Console account, Anthropic’s pay-as-you-go option for developers, plus a hosting plan that fits your project. Then there are eight steps to deploy a Claude Code website:

1. Check the code Claude Code wrote for leftover files and exposed keys.
2. Preview every page in your browser before going live.
3. Find out whether the site needs extra preparation or a server to run.
4. Send the code to GitHub or package it as a ZIP file.
5. Link the project to your host through GitHub, a ZIP upload, or a connection tool.
6. Enter the passwords, keys, and settings the server needs.
7. Start the deployment from your host or from Claude Code.
8. Open the live address and confirm everything works.

Hostinger Connector, included with Hostinger plans, shortens this process by linking Claude Code to your Hostinger account. After a one-time setup, Claude Code creates the website, uploads the files, and returns the live web address from a single request. In our test, that took about 3 minutes.

Failed deployments trace back to specific problems, such as missing environment variables, incorrect server settings, or missing private keys, and each has a fix. Once the site is live, add a custom domain and a note telling Claude Code which site to deploy to, making every later update simpler.

What you need before deploying a Claude Code website

You need four things to deploy a Claude Code website, plus two that depend on your project:

• Your project folder. The folder where Claude Code saved your site. A plain HTML site’s core files are HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript files, with index.html as the homepage. A framework project also has a package.json file that lists its tools and commands.
• Claude Code in a terminal. The terminal is the app where you type text commands, like Terminal on macOS. You start Claude Code there by typing claude. Claude Code also runs as an extension in code editors like Visual Studio Code (an integrated development environment, or IDE), and deploying from an IDE follows the same eight steps.
• Claude Code access. Claude Code requires a Pro, Max, Team, or Enterprise plan, or a Claude Console account with pay-as-you-go credits. The free Claude plan doesn’t include Claude Code.
• A hosting plan. To host a website, you need a plan that matches its type. Static sites need a service that can serve HTML, CSS, and JavaScript files, while sites that run code on the server need support for their language, like Node.js for JavaScript server apps or PHP (Hypertext Preprocessor) for PHP apps.
• Node.js for framework projects. JavaScript framework projects need Node.js to preview and prepare the site on your computer, while plain HTML sites don’t. Run node –version in the terminal to check whether it’s installed.
• A GitHub account (optional). GitHub stores an online copy of your code, which some hosting providers use to automatically publish and update your site.

Use Anthropic’s official install command for your system if Claude Code isn’t installed yet. On macOS or Linux, run this in the terminal:

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

On Windows, run this command in PowerShell, the Windows app for typing commands:

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

Then open a new terminal window and run claude –version. A working installation prints a version number. Type claude to start Claude Code and sign in with your Claude account.

Claude Code’s permission mode controls which actions need your approval. Current terminal versions can start in auto mode, which reviews actions automatically.

For your first deployment, press Shift+Tab until the bottom line reads “manual mode on,” so Claude Code asks before most actions that change files, run commands, or use external services.

1. Review the project Claude Code generated

Review the project by checking four things: the file your site opens first, leftover test files, addresses that only work on your computer, and secret keys that shouldn’t be public.

A plain static HTML site typically needs an index.html in the directory published as the document root. Framework projects instead use the entry points and build/start scripts specified in their configuration files, such as package.json.

Leftover test files, like sample pages or unused drafts, make the live site look unfinished and sometimes expose work you didn’t mean to publish.

Addresses that start with localhost, like http://localhost:3000, point to your own computer. Visitors can’t open them.

Secret keys include application programming interface (API) keys and the passwords that connect your site to external services like payment or email tools. Secret keys must stay out of the files you publish.

This review matters most when you’re vibe coding a website: you describe what you want in plain language, and Claude Code writes code you won’t read line by line. Leftover test files or exposed keys then go unnoticed.

Hand the whole review to Claude Code with a prompt or request like this:

Review this project before I deploy it. Check that it has the right entry point, list any leftover test or temporary files, and look for localhost addresses or secrets like API keys. Don't change anything yet.

We ran this prompt on a two-file coffee shop site. Claude Code confirmed that index.html was at the top of the folder and that it loaded the design file, style.css, via a relative link. The review found no leftover files, local addresses, or keys.

A relative link finds files by their position in the project folder, so it keeps working after upload as long as the folder structure stays the same.

The review also flagged two things to consider before going live: the contact email would be visible to spam bots, and the copyright year in the footer was entered by hand, so it won’t update automatically.

Claude Code fixes what it finds when you ask it to. Read each proposed change before you approve it, because every fix is a new edit to test in the next step.

2. Test the website locally

To test the website locally, open its homepage file in a browser, or start the local development server required by its framework, then check the pages and key functions before deployment.

For a plain HTML site, open the index.html file in your browser, or ask Claude Code to open it for you:

Open index.html in my browser so I can preview the site.

Sites that load JavaScript modules or fetch local files often need a local development server because browsers restrict some requests from pages opened directly with a file:// address.

A framework project often needs a development server, which provides a preview while you edit. In the project folder, run the following commands separately: the first installs required packages, and the second starts the development server.

npm install 

npm run dev

The terminal then prints a local address to open in your browser. Projects made with Vite, a tool for creating React and Vue sites, use http://localhost:5173 by default.

Check these parts of the site before moving on:

• Every page opens from the navigation menu.
• Images, fonts, and styles load correctly.
• Forms and buttons respond the way they should.
• The layout works in a narrow browser window, which shows how the site looks on phones.
• No red errors appear in the browser console, the panel that lists problems on the page. Open it with Cmd+Option+J in Chrome on macOS or Ctrl+Shift+J on Windows.

Describe the problem to Claude Code or paste the error message if something breaks, then test again until the site works.

3. Check the framework and build requirements

Check which framework your project uses, because it decides whether the site needs a build step, which turns your code into the final files browsers load, and whether it needs a server that keeps running.

Static sites send the same ready-made files to every visitor. Server apps run code on the server, for example, to log users in. Static sites built with a framework still need a build before they go online.

To find out which type you have, ask Claude Code:

Is this project static, or does it need a server to run? Tell me the build command and the output folder.

For projects with a build step, run the build command and check that it finishes without errors:

npm run build

The build saves the final files to an output folder. These are the typical default folders, which a project’s settings can change:

• React, Vue, and other Vite projects use dist, and so does Astro.
• Next.js uses .next for server apps and out for static exports.
• Create React App uses build.
• Angular uses dist/your-project-name/browser in recent versions.

Choose a Node.js version supported by the project and the hosting provider. Different versions can cause dependencies to build locally but fail online. Add a compatible version range to the engines.node field in package.json when appropriate, and verify the version actually selected by the host.

Hostinger supports Node.js 18, 20, 22, and 24, and uses 22 by default. Hostinger installs the packages and runs the build on the server for Node.js apps. Plain HTML sites skip the build entirely.

4. Prepare your project files for upload

To prepare your project files for upload, send them to a GitHub repository, an online folder for your code, or package them as a ZIP file for a one-time upload.

A repository keeps the history of every change. With automatic deployment enabled, the host rebuilds or republishes your site when you push changes to the connected branch.

Claude Code sets up Git and pushes the project for you. Git is the tool that saves snapshots of your code, called commits, and sends them to GitHub. Try a prompt like this:

Set up Git for this project, create a .gitignore file that excludes node_modules and .env, commit all files, and push the project to a new private GitHub repository called your-repository-name.

The .gitignore file lists files Git should skip. Leave out node_modules, the folder of downloaded packages, because the host reinstalls them. Leave out .env too, because it holds your secret keys.

Your first push prompts you to sign in to GitHub if Git isn’t already connected to your account. Run gh auth login, then approve the sign-in in your browser if Claude Code prompts you to use GitHub’s terminal tool.

To push the project manually, create an empty repository on GitHub. Check that .gitignore excludes node_modules and every file with real keys, like .env or .env.local, then run these commands in the project folder:

git init 

git add . 

git status 

git commit -m "Initial commit" 

git branch -M main 

git remote add origin https://github.com/your-username/your-repository.git 

git push -u origin main

Replace your-username and your-repository with your GitHub username and the repository name. The git status command lists the files about to be saved, so stop and fix .gitignore if a secret file shows up.

To deploy without Git, ask Claude Code to package the project as a ZIP file instead. Hosts that build the project for you need your original code without node_modules, while hosts that only store and display files need the contents of the output folder.

5. Connect the project to a hosting provider

Connect your project to a hosting provider in one of three ways: from a linked GitHub repository, as a ZIP file uploaded to the provider’s dashboard, or directly from Claude Code via the provider’s connection tool.

Some cloud hosting services can be controlled from Claude Code through provider command-line tools, integrations, or Model Context Protocol (MCP) servers. MCP is a standard that helps AI coding assistants access external tools through defined interfaces; availability and permissions depend on the provider.

This table compares these methods, with Hostinger’s connection tool listed separately:

Hostinger users skip most of this manual work when they connect Claude Code to Hostinger with Hostinger Connector, which packages, uploads, and publishes the site from the chat. To connect a project manually instead, use the Hostinger dashboard.

On Hostinger, framework projects like React, Vue, or Next.js apps run on hosting for web apps, which recognizes the framework and fills in the setup details for you. The dashboard calls these projects Web Apps.

To deploy a framework project from GitHub in the Hostinger dashboard:

1. Go to Websites → Create site → Web App.
2. Enter your domain, or click Use temporary domain to start with a free address ending in hostingersite.com.
3. Click Connect with GitHub, then sign in to grant Hostinger access to your repositories, including private ones.
4. Select your repository, review the settings Hostinger detected, and click Deploy.

To upload a ZIP file instead, click Upload your files → Continue on the same screen. The uploader also accepts two other compressed formats: .tar.gz and .tgz.

Plain HTML sites use Websites → Create site → PHP/HTML website instead. The PHP/HTML website option covers sites made of ready-made files or written in PHP, a programming language for websites.

After you choose a domain for a PHP/HTML website, open Manage site → Advanced → GIT to connect a repository, or Files → File Manager to upload the files.

6. Configure environment variables and deployment settings

Add required environment variables in the hosting provider’s deployment settings, and confirm the build command, output directory, runtime version, and entry file where applicable. Plain HTML sites with no secrets or build steps may not need these settings.

Local environment values often live in a .env file, which should stay out of Git and uploaded static assets. Define server secrets in your hosting environment instead. Remember that environment variables embedded into a browser build can be public even if you did not commit the .env file.

Ask Claude Code which variables the project expects, so none are missing on the live site:

List every environment variable this project uses, what each one is for, and whether it's needed while building or while the site runs. Don't show their values.

Add each variable in your host’s settings. On Hostinger, the Web App deploy settings screen has a Set environment variables section, where you add values one by one or upload your .env file with Import .env. Hostinger stores the values encrypted.

Deployment settings are often referred to as build settings. On Hostinger, they’re on the same screen as the environment variables:

Hostinger attempts to detect the framework, build settings, and Node.js version from the project. Always review the result. If the framework is not recognized, select Other and supply the needed build command, output directory, or server entry file based on the project.

7. Publish the website

To publish the website, click the host’s Deploy button, push your latest changes to GitHub, or ask Claude Code to deploy, depending on the method you chose.

For a source-based framework deployment, the host installs dependencies, runs the configured build, and publishes the result. The build log records progress and errors. Uploading ready-made static files skips dependency installation and the build.

On Hostinger, the site’s Deployments section displays logs for the last 10 builds. Installing packages and running the build each have a 15-minute limit.

The site goes live on a free address ending in hostingersite.com if you chose a temporary domain, and it stays there until you connect your own domain.

8. Verify the live site

To verify the live site, open its public URL in a browser and check that everything works as it did on your computer.

Go through this checklist on the live site:

• Every page opens, and links point to the live address instead of localhost.
• Images, fonts, and styles load.
• Forms submit, and features that depend on API keys respond.
• The site loads over HTTPS (Hypertext Transfer Protocol Secure), the encrypted connection, with no security warnings. Click the icon next to the address to see the connection details.
• The layout works on a real phone, since a narrow browser window doesn’t show every mobile issue.

On our test site, HTTPS worked from the moment the site went live, and the mobile layout looked right on an Android phone.

Paste the error message or a screenshot into Claude Code if something doesn’t work, then approve the fix and redeploy.

Hard-refresh the page with Cmd+Shift+R on macOS or Ctrl+Shift+R on Windows after each redeploy to ensure the browser loads the new version instead of a cached copy.

Each subsequent update repeats this cycle: edit the site in Claude Code, push the changes or upload a new ZIP file, wait for the build to complete in the hosting dashboard, and check the live site again.

How to deploy a website from Claude Code with Hostinger Connector

To deploy a website from Claude Code with Hostinger Connector, install Hostinger’s plugin, sign in to your Hostinger account, and ask Claude Code to deploy the project. Claude Code then creates the site, uploads the files, and returns the live web address.

With Connector, the edit, upload, and publish cycle happens in the Claude Code chat, without switching between Claude Code, GitHub, the terminal, and the Hostinger dashboard.

You can request deployment in plain language while Claude Code runs the supported tools. You still need to review the target website, requested permissions, and deployment settings.

Connector is built on MCP, and Hostinger lists Claude Code as an officially supported way to deploy websites and Node.js apps.

Where the site runs depends on the project. Node.js apps deploy as Web Apps, available on the Unlimited and Cloud hosting plans. Static sites, including the built files of React, Vue, or Astro projects, deploy as regular websites.

We tested this flow in October 2026 using Claude Code v2.1.304 on macOS, the official Hostinger plugin, and a two-file site. Connector set it up as a PHP/HTML website because the site was plain HTML.

Our test didn’t cover framework projects, GitHub-based deployment, or Windows. The steps for those follow Anthropic’s and Hostinger’s official documentation instead.

To set up Hostinger Connector and deploy your site:

1. Install the official Hostinger plugin. Type this command in Claude Code, then choose Install for you (user scope) so the plugin works in every project:
   /plugin install hostinger@claude-plugins-official
   Alternatively, type /plugin and search for hostinger in the Discover tab, or run claude plugin install hostinger@claude-plugins-official in the terminal, outside Claude Code. With user scope, the plugin also works in the Claude desktop app’s Code tab and in VS Code, since all three share the same settings on your computer.
2. Load the plugin. Run /reload-plugins if the install summary asks you to. Claude Code confirms that it loaded one plugin and one MCP server. That server is what connects Claude Code to Hostinger.
3. Sign in to your Hostinger account. Run /mcp, select plugin:hostinger:hostinger, and press Enter. Sign in to Hostinger in the browser window that opens. Once the connection works, the status shows a green check.

4. Confirm the connected account. Ask Claude Code to show what it can see:
   Which Hostinger account are you connected to? List my active hosting plans and websites. Don't change anything.
   When we tried this, the plugin listed the account’s plans and websites but not its email address. Compare the list with your Hostinger dashboard to be sure.
5. Ask Claude Code to deploy. Name a new website or a specific domain in the prompt, and ask for a plan first:
   Deploy this site to Hostinger as a brand-new website on a free temporary subdomain. Don't deploy to or modify any of my existing websites. Before you create or upload anything, tell me your plan step by step and wait for my OK.
6. Review the plan and approve each action. Our plan had seven stages: reserve a free address, create an empty website, wait for setup, zip the files, upload them through a one-time link, unpack them into the site’s public_html folder, and verify the live page. The public_html folder holds the files visitors see.

This is the rule we recommend for every deployment: plan first, approve second. Ask Claude Code for its deployment plan before it touches your hosting, then check the target domain in the plan before you approve anything. In our test, the plan named the new address up front.

About 3 minutes after we approved the plan, the site was live on its new hostingersite.com address, and HTTPS already worked.

Claude Code then checked the live page, removed the uploaded ZIP file from the server, and reported that the account’s 12 existing websites were untouched.

Expect several approval prompts along the way. In our test, manual mode asked before each Hostinger action and terminal command, including the zip and upload steps. Manual mode takes a few extra clicks, but you see every change before it reaches your hosting account.

How to fix common Claude Code deployment errors

To fix common Claude Code deployment errors, identify differences between your computer and the server and correct them, such as a missing file, an incorrect setting, or a different software version.

For any failed build, copy the build log into Claude Code and ask what went wrong. Claude Code reads the error and suggests a fix to test on your computer before redeploying. Web Apps on Hostinger also have an AI troubleshooter for failed builds.

What to do after deploying your Claude Code website

After your Claude Code website goes live, connect a custom domain, redeploy as the project changes, save which site Claude Code should deploy to, and monitor each new deployment.

Connect a custom domain to replace the temporary address, either in the Hostinger dashboard or through a supported Connector action. Point the domain to the correct site and allow its free Secure Sockets Layer (SSL) certificate to finish issuing before checking HTTPS on the new address.

Redeploy whenever you change the site by asking Claude Code to update the same address. In our test, this prompt changed the site’s tagline and redeployed it in under a minute:

Change the tagline to "Small-batch coffee, roasted in Porto." and redeploy the site to domain.tld only. 

Pushes to the connected branch automatically start a new deployment if your project is connected to GitHub and automatic deployment is enabled.

Save the site Claude Code should deploy to in a CLAUDE.md file in the project folder, so future sessions have that context. Claude Code reads the file at the start of every session, which reduces the chance of deploying to the wrong site. A short rule is enough:

Deploy this project to domain.tld only. Don't deploy to or modify any other website in the Hostinger account.

The rule guides Claude Code, but doesn’t block other sites, so still check the domain in the deployment plan before you approve it.

All of the tutorial content on this website is subject to Hostinger's rigorous editorial standards and values.

The author

Bruno Santana

Add Hostinger as a preferred source on Google

Bruno is a Content Writer at Hostinger, focused on creating and optimizing helpful, engaging articles about web development and marketing. With a background in journalism, he combines storytelling with practical insights to make complex topics easier to understand. He has also contributed to publications like MacMagazine and Jornal A Tarde. Outside of work, Bruno enjoys exploring art, cooking, and technology.

More from Bruno Santana