To deploy a website from Claude Code, review and test the project on your computer, prepared the files, nexus them to a hosting provider, and publish the site to a community location that anyone can open in a browser.
Claude Code, Anthropic’s synthetic intellect (AI) coding assistant, builds and edits websites inner your project folder, but it doesn’t presenter them. Until you deploy the project, another group can’t attain it through a community website address. Deployment puts the required location records or use on a hosting assistance that keeps it accessible online.
Before you start, you need admission to Claude Code through a paid Claude scheme or a Claude Console account, Anthropic’s pay-as-you-go choice for developers, affirmative a hosting scheme that fits your project. Then there are eight steps to deploy a Claude Code website:
- Check the code Claude Code wrote for leftover records and exposed keys.
- Preview all leaf in your browser before going live.
- Find out whether the location needs additional preparedness or a server to run.
- Send the code to GitHub or bundle it as a ZIP file.
- Link the project to your presenter through GitHub, a ZIP upload, or a association tool.
- Enter the passwords, keys, and settings the server needs.
- Start the deployment from your presenter or from Claude Code.
- Open the live location and verify everything works.
Hostinger Connector, included alongside Hostinger plans, shortens this procedure 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 location from a sole request. In our test, that took concerning 3 minutes.
Failed deployments trace rear to particular problems, specified as missing surroundings variables, incorrect server settings, or missing personal keys, and all has a fix. Once the location is live, add a tradition domain and a note telling Claude Code which location to deploy to, making all afterward update simpler.
What you need before deploying a Claude Code website
You need four things to deploy a Claude Code website, affirmative two that depend on your project:
- Your project folder. The directory anywhere Claude Code saved your site. A plain HTML site’s center records are HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript files, alongside index.html as the homepage. A example project additionally has a package.json document that lists its tools and commands.
- Claude Code in a terminal. The terminal is the app anywhere you category content commands, akin Terminal on macOS. You commencement Claude Code there by typing claude. Claude Code additionally runs as an expansion in code editors akin Visual Studio Code (an unified betterment environment, or IDE), and deploying from an IDE follows the identical eight steps.
- Claude Code access. Claude Code requires a Pro, Max, Team, or Enterprise plan, or a Claude Console document alongside pay-as-you-go credits. The liberated Claude scheme doesn’t contain Claude Code.
- A hosting plan. To host a website, you need a scheme that matches its type. Static sites need a assistance that can assist HTML, CSS, and JavaScript files, during sites that run code on the server need assistance for their language, akin Node.js for JavaScript server apps or PHP (Hypertext Preprocessor) for PHP apps.
- Node.js for example projects. JavaScript example projects need Node.js to preview and prepared the location on your computer, during plain HTML sites don’t. Run node –version in the terminal to inspect whether it’s installed.
- A GitHub document (optional). GitHub stores an online copy of your code, which several hosting providers use to automatically publish and update your site.
Use Anthropic’s official instal command for your scheme 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 opening and run claude –version. A operating facility prints a type number. Type claude to commencement Claude Code and sign in alongside your Claude account.
Important
On several Macs, the installer warns that ~/.local/bin isn’t in your PATH. That directory holds Claude Code, and PATH is the catalog of folders the terminal searches for commands. Until you fix it, typing claude returns a “command not found” error. Run the one-line fix the installer prints, afterward inspect claude –version again.
Claude Code’s approval manner controls which actions need your approval. Current terminal versions can commencement in car mode, which reviews actions automatically.
For your archetypal deployment, media Shift+Tab until the base row says “manual manner on,” so Claude Code asks before most actions that alter files, run commands, or use external services.
1. Review the project Claude Code generated
Review the project by checking four things: the document your location opens first, leftover test files, addresses that lone activity on your computer, and concealed keys that shouldn’t be public.
A plain fixed HTML location typically needs an index.html in the directory published as the document root. Framework projects alternatively use the admission points and build/start scripts stated in their configuration files, specified as package.json.
Leftover test files, akin example pages or unused drafts, create the live location appearance unfinished and sometimes disclose activity you didn’t average to publish.
Addresses that commencement alongside localhost, akin http://localhost:3000, item to your own computer. Visitors can’t open them.
Secret keys contain use programming interface (API) keys and the passwords that nexus your location to external services akin fee or email tools. Secret keys must remain out of the records you publish.
This assessment matters most whenever you’re vibe coding a website: you depict what you desire in plain language, and Claude Code writes code you won’t peruse row by line. Leftover test records or exposed keys afterward go unnoticed.
Hand the entire assessment to Claude Code alongside a immediate or petition akin this:
Review this project before I deploy it. Check that it has the correct admission point, catalog any leftover test or impermanent files, and appearance for localhost addresses or secrets akin API keys. Don't alter item yet.
We ran this immediate on a two-file coffee shop site. Claude Code confirmed that index.html was at the top of the directory and that it loaded the scheme file, style.css, via a related link. The assessment established no leftover files, local addresses, or keys.
A related nexus finds records by their stance in the project folder, so it keeps operating following upload as lengthy as the directory construction stays the same.
The assessment additionally flagged two things to regard before going live: the communication email would be apparent to spam bots, and the copyright twelvemonth in the footer was entered by hand, so it won’t update automatically.
Claude Code fixes what it finds whenever you ask it to. Read all projected alter before you endorse it, since all fix is a new edit to test in the next step.
2. Test the website locally
To test the website locally, open its homepage document in a browser, or commencement the local betterment server required by its framework, afterward inspect the pages and key functions before deployment.
For a plain HTML site, open the index.html document 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 burden JavaScript modules or fetch local records frequently need a local betterment server since browsers restrict several requests from pages opened immediately alongside a file:// address.
A example project frequently needs a betterment server, which provides a preview during you edit. In the project folder, run the following commands separately: the archetypal installs required packages, and the second starts the betterment server.
npm instal npm run dev
The terminal afterward prints a local location to open in your browser. Projects made alongside Vite, a tool for creating React and Vue sites, use http://localhost:5173 by default.
Check these parts of the location before moving on:
- Every leaf opens from the navigation menu.
- Images, fonts, and styles burden correctly.
- Forms and buttons react the way they should.
- The layout plant in a narrow browser window, which shows how the location looks on phones.
- No red errors appear in the browser console, the panel that lists problems on the page. Open it alongside Cmd+Option+J in Chrome on macOS or Ctrl+Shift+J on Windows.
Describe the issue to Claude Code or paste the error communication if item breaks, afterward test again until the location works.
3. Check the example and build requirements
Check which example your project uses, since it decides whether the location needs a build step, which turns your code into the final records browsers load, and whether it needs a server that keeps running.
Static sites dispatch the identical ready-made records to all visitor. Server apps run code on the server, for example, to log users in. Static sites built alongside a example motionless need a build before they go online.
Project type | Examples | Build step | Hosting it needs |
Plain HTML site | A homepage document alongside its manner and manuscript files | None | A assistance that accepts and serves uploaded fixed files |
Static example site | React or Vue sites made alongside Vite, Astro, or Next.js configured for fixed export | npm run build creates the final files | Static-file hosting for the built output, or a presenter that runs the build |
Server app | Express apps, Next.js apps alongside server features | Depends on the framework; plain Express apps need none | A scheme that supports the app’s language, akin Node.js |
To discover out which category 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 alongside a build step, run the build command and inspect that it finishes without errors:
npm run build
The build saves the final records to an output folder. These are the representative default folders, which a project’s settings can change:
- React, Vue, and another Vite projects use dist, and so does Astro.
- Next.js uses .next for server apps and out for fixed exports.
- Create React App uses build.
- Angular uses dist/your-project-name/browser in latest versions.
Choose a Node.js type supported by the project and the hosting provider. Different versions can logic requirements to build locally but neglect online. Add a compatible type range to the engines.node site in package.json whenever appropriate, and verify the type really 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 records for upload
To prepared your project records for upload, dispatch them to a GitHub repository, an online directory for your code, or bundle them as a ZIP document for a one-time upload.
A repository keeps the former of all change. With automatic deployment enabled, the presenter rebuilds or republishes your location whenever you shove 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 immediate akin this:
Set up Git for this project, create a .gitignore document that excludes node_modules and .env, commit all files, and shove the project to a new personal GitHub repository called your-repository-name.
The .gitignore document lists records Git should skip. Leave out node_modules, the directory of downloaded packages, since the presenter reinstalls them. Leave out .env too, since it holds your concealed keys.
Your archetypal shove prompts you to sign in to GitHub if Git isn’t already connected to your account. Run gh auth login, afterward endorse the sign-in in your browser if Claude Code prompts you to use GitHub’s terminal tool.
To shove the project manually, create an bare repository on GitHub. Check that .gitignore excludes node_modules and all document alongside genuine keys, akin .env or .env.local, afterward run these commands in the project folder:
git init git add . git position git commit -m "Initial commit" git branch -M chief git distant add base https://github.com/your-username/your-repository.git git shove -u base main
Replace your-username and your-repository alongside your GitHub username and the repository name. The git status command lists the records concerning to be saved, so halt and fix .gitignore if a concealed document shows up.
To deploy without Git, ask Claude Code to bundle the project as a ZIP document instead. Hosts that build the project for you need your first code without node_modules, during hosts that lone shop and display records need the contents of the output folder.
Warning
Don't upload your .env document or add it to your repository. Anyone alongside admission to the repository or the ZIP document can peruse the keys stored in it. Deleting the document doesn't create an already committed key safe, so substitute that key alongside a new one.
5. Connect the project to a hosting provider
Connect your project to a hosting provider in one of three ways: from a connected GitHub repository, as a ZIP document uploaded to the provider’s dashboard, or immediately from Claude Code via the provider’s association tool.
Some haze hosting services can be controlled from Claude Code through provider command-line tools, integrations, or Model Context Protocol (MCP) servers. MCP is a norm that helps AI coding assistants admission external tools through defined interfaces; preparedness and permissions depend on the provider.
This array compares these methods, alongside Hostinger’s association tool listed separately:
Method | How it works | Best for | Cost |
GitHub-connected hosting | The presenter pulls code from the connected GitHub branch and publishes updates whenever automatic deployment is enabled | Projects you’ll keep updating | Depends on the host |
ZIP upload | You upload a ZIP document in the host’s dashboard | One-time launches without Git | Depends on the host |
Cloud phase terminal tool or MCP server | Claude Code runs the platform’s tools to deploy for you | Developers who already use that platform | Depends on the phase and its use limits |
Hostinger Connector | Claude Code uses Hostinger’s add-on, or plugin, to create the location and upload the files | Hostinger users who desire to deploy from the chat | Connector is free; deployment needs compatible energetic hosting |
Hostinger users skip most of this manual activity whenever they connect Claude Code to Hostinger alongside Hostinger Connector, which packages, uploads, and publishes the location from the chat. To nexus a project manually instead, use the Hostinger dashboard.
On Hostinger, example projects akin React, Vue, or Next.js apps run on hosting for web apps, which recognizes the example and fills in the setup particulars for you. The dashboard calls these projects Web Apps.
To deploy a example project from GitHub in the Hostinger dashboard:
- Go to Websites → Create site → Web App.
- Enter your domain, or click Use impermanent domain to commencement alongside a liberated location ending in hostingersite.com.
- Click Connect alongside GitHub, afterward sign in to aid Hostinger admission to your repositories, including personal ones.
- Select your repository, assessment the settings Hostinger detected, and click Deploy.
To upload a ZIP document instead, click Upload your files → Continue on the identical screen. The uploader additionally accepts two another compressed formats: .tar.gz and .tgz.
Plain HTML sites use Websites → Create site → PHP/HTML website instead. The PHP/HTML website choice covers sites made of ready-made records or written in PHP, a programming tongue for websites.
After you choose a domain for a PHP/HTML website, open Manage site → Advanced → GIT to nexus a repository, or Files → File Manager to upload the files.
6. Configure surroundings variables and deployment settings
Add required surroundings variables in the hosting provider’s deployment settings, and verify the build command, output directory, runtime version, and admission document anywhere applicable. Plain HTML sites alongside no secrets or build steps may not need these settings.
Local surroundings values frequently live in a .env file, which should remain out of Git and uploaded fixed assets. Define server secrets in your hosting surroundings instead. Remember that surroundings variables embedded into a browser build can be community equal 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 all surroundings changeable this project uses, what all one is for, and whether it's needed during construction or during the location runs. Don't display their values.
Add all changeable in your host’s settings. On Hostinger, the Web App deploy settings display has a Set surroundings variables section, anywhere you add values one by one or upload your .env document alongside Import .env. Hostinger stores the values encrypted.
Important
Don’t put secrets in variables that commencement alongside VITE_ or NEXT_PUBLIC_, since those values end up in the code visitors’ browsers download. Keep secrets in server-only variables, and ask Claude Code to inspect that no concealed reaches browser code.
Deployment settings are frequently referred to as build settings. On Hostinger, they’re on the identical display as the surroundings variables:
| Setting | What it does | Example |
| Build command | Runs the build | npm run build |
| Output directory | Holds the final records from the build | dist |
| Node.js version | Builds and runs the project | 22 |
| Entry file | The document that starts a server app | server.js |
Hostinger attempts to detect the framework, build settings, and Node.js type from the project. Always assessment the result. If the example is not recognized, choose Other and provision the needed build command, output directory, or server admission document according to the project.
7. Publish the website
To publish the website, click the host’s Deploy button, shove your latest changes to GitHub, or ask Claude Code to deploy, depending on the method you chose.
For a source-based example deployment, the presenter installs dependencies, runs the configured build, and publishes the result. The build log records advancement and errors. Uploading ready-made fixed records skips dependency facility and the build.
On Hostinger, the site’s Deployments division displays logs for the final 10 builds. Installing packages and operating the build all have a 15-minute limit.
The location goes live on a liberated location ending in hostingersite.com if you chose a impermanent domain, and it stays there until you nexus your own domain.
8. Verify the live site
To verify the live site, open its community URL in a browser and inspect that everything plant as it did on your computer.
Go through this checklist on the live site:
- Every leaf opens, and links item to the live location alternatively of localhost.
- Images, fonts, and styles load.
- Forms submit, and features that depend on API keys respond.
- The location loads complete HTTPS (Hypertext Transfer Protocol Secure), the encrypted connection, alongside no safety warnings. Click the icon next to the location to see the association details.
- The layout plant on a genuine phone, since a narrow browser opening doesn’t display all mobile issue.
On our test site, HTTPS worked from the instant the location went live, and the mobile layout looked correct on an Android phone.
Paste the error communication or a screenshot into Claude Code if item doesn’t work, afterward endorse the fix and redeploy.
Hard-refresh the leaf alongside Cmd+Shift+R on macOS or Ctrl+Shift+R on Windows following all redeploy to justify the browser loads the new type alternatively of a cached copy.
Each consequent update repeats this cycle: edit the location in Claude Code, shove the changes or upload a new ZIP file, delay for the build to complete in the hosting dashboard, and inspect the live location again.
How to deploy a website from Claude Code alongside Hostinger Connector
To deploy a website from Claude Code alongside Hostinger Connector, install Hostinger’s plugin, sign in to your Hostinger account, and ask Claude Code to deploy the project. Claude Code afterward creates the site, uploads the files, and returns the live web address.
With Connector, the edit, upload, and publish sequence happens in the Claude Code chat, without switching between Claude Code, GitHub, the terminal, and the Hostinger dashboard.
You can petition deployment in plain tongue during Claude Code runs the supported tools. You motionless need to assessment the mark 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 location runs depends on the project. Node.js apps deploy as Web Apps, accessible on the Unlimited and Cloud hosting plans. Static sites, including the built records of React, Vue, or Astro projects, deploy as regular websites.
Important
Connector uploads fixed sites as ready-made files, alongside no build stage on the server. For Node.js apps, the uploaded ZIP document can’t exceed 50 megabytes (MB) and should exclude node_modules and build folders, as Hostinger installs packages and runs the build itself.
We tested this stream in October 2026 using Claude Code v2.1.304 on macOS, the authoritative Hostinger plugin, and a two-file site. Connector set it up as a PHP/HTML website since the location was plain HTML.
Our test didn’t shield example projects, GitHub-based deployment, or Windows. The steps for those prosecute Anthropic’s and Hostinger’s authoritative records instead.
Slash commands akin /plugin and /mcp lone activity whenever the slash is the archetypal character you type. Claude Code treats the command as a normal conversation communication if there's a area before it.
To set up Hostinger Connector and deploy your site:
- Install the authoritative Hostinger plugin. Type this command in Claude Code, afterward choose Install for you (user scope) so the plugin plant in all project:
/plugin instal hostinger@claude-plugins-official
Alternatively, category /plugin and hunt for hostinger in the Discover tab, or run claude plugin instal hostinger@claude-plugins-official in the terminal, exterior Claude Code. With person scope, the plugin additionally plant in the Claude desktop app’s Code tab and in VS Code, since all three portion the identical settings on your computer. - Load the plugin. Run /reload-plugins if the instal 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.
- Sign in to your Hostinger account. Run /mcp, choose plugin:hostinger:hostinger, and media Enter. Sign in to Hostinger in the browser opening that opens. Once the association works, the position shows a green check.
- Confirm the connected account. Ask Claude Code to display what it can see:
Which Hostinger document are you connected to? List my energetic hosting plans and websites. Don't alter anything.
When we tried this, the plugin listed the account’s plans and websites but not its email address. Compare the catalog alongside your Hostinger dashboard to be sure. - Ask Claude Code to deploy. Name a new website or a particular domain in the prompt, and ask for a scheme first:
Deploy this location to Hostinger as a brand-new website on a liberated impermanent subdomain. Don't deploy to or modify any of my existing websites. Before you create or upload anything, inform me your scheme stage by stage and delay for my OK. - Review the scheme and endorse all action. Our scheme had seven stages: reserve a liberated address, create an bare website, delay 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 directory holds the records visitors see.
This is the regulation we propose for all deployment: plan first, endorse second. Ask Claude Code for its deployment scheme before it touches your hosting, afterward inspect the mark domain in the scheme before you endorse anything. In our test, the scheme named the new location up front.
About 3 minutes following we approved the plan, the location was live on its new hostingersite.com address, and HTTPS already worked.
Claude Code afterward checked the live page, removed the uploaded ZIP document from the server, and reported that the account’s 12 existing websites were untouched.
Expect multiple endorsement prompts alongside the way. In our test, manual manner asked before all Hostinger act and terminal command, including the zip and upload steps. Manual manner takes a few additional clicks, but you see all alter before it reaches your hosting account.
Warning
Claude Code sometimes suggests your next immediate in gray text, which you obtain by pressing Tab. In our test, the recommendation was to deploy the location to among the account's existing websites, thereby replacing that site's files. Don't obtain suggestions akin this. Type your own immediate alongside a new website or the exact domain you want.
How to fix average Claude Code deployment errors
To fix average Claude Code deployment errors, identify differences between your computer and the server and accurate them, specified as a missing file, an incorrect setting, or a distinct application version.
| Error | Likely cause | How to fix it |
| The build plant on your device but fails on the server | A distinct Node.js version, or a bundle missing from package.json | Match the Node.js type in the engines.node site and ask Claude Code to add missing packages to package.json |
| The build stops before finishing | Installing packages or operating the build takes longer than the presenter allows, which is 15 minutes all on Hostinger | Remove unused packages and inspect the build log for the dilatory stage |
| A fixed location shows a 404 (page not found) error or a blank page | Files missing or uploaded to the incorrect folder | Check that index.html or the build output sits at the top of the location folder, which is public_html on Hostinger |
| Pages another than the homepage display a 404 error whenever refreshed | A single-page app, a location that loads all leaf through index.html, without a fallback rule | Ask Claude Code to add a regulation that sends unidentified addresses to index.html, for example, in the site’s .htaccess settings file |
| A server app shows an error page | Wrong deployment settings or a collision whenever the app starts | Check the build settings and the app’s logs, afterward portion the error alongside Claude Code |
| The leaf loads without styles or images | A incorrect output folder, or document paths that lone activity on your computer | Set the output directory to the framework’s output folder, and ask Claude Code to toggle to document paths that activity on any server |
| Features that use API keys neglect lone on the live site | Missing surroundings variables, or code that motionless points to localhost | Add all changeable in the host’s settings and substitute local addresses alongside live web addresses |
| The Hostinger plugin shows that it needs authentication in /mcp | An expired or missing Hostinger sign-in | Select plugin:hostinger:hostinger in /mcp and sign in again |
| A Connector upload of a Node.js app fails | The ZIP document is complete 50 MB, for example, since it includes node_modules or build folders | Exclude node_modules and build folders from the ZIP file |
For any unsuccessful build, copy the build log into Claude Code and ask what went wrong. Claude Code says the error and suggests a fix to test on your device before redeploying. Web Apps on Hostinger additionally have an AI troubleshooter for unsuccessful builds.
What to do following deploying your Claude Code website
After your Claude Code website goes live, nexus a tradition domain, redeploy as the project changes, preserve which location Claude Code should deploy to, and detect all new deployment.
Connect a tradition domain to substitute the impermanent address, either in the Hostinger dashboard or through a supported Connector action. Point the domain to the accurate location and authorize its liberated Secure Sockets Layer (SSL) certificate to complete issuing before checking HTTPS on the new address.
Redeploy whenever you alter the location by asking Claude Code to update the identical address. In our test, this immediate 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 location to domain.tld only.
Pushes to the connected branch automatically commencement a new deployment if your project is connected to GitHub and automatic deployment is enabled.
Save the location Claude Code should deploy to in a CLAUDE.md file in the project folder, so forthcoming sessions have that context. Claude Code says the document at the commencement of all session, which reduces the chance of deploying to the incorrect site. A abbreviated regulation is enough:
Deploy this project to domain.tld only. Don't deploy to or modify any another website in the Hostinger account.
The regulation guides Claude Code, but doesn’t obstacle another sites, so motionless inspect the domain in the deployment scheme before you endorse it.
All of the tutorial satisfied on this website is topic to Hostinger's rigorous editorial standards and values.
Bruno is a Content Writer at Hostinger, focused on creating and optimizing helpful, engaging articles concerning web betterment and marketing. With a backdrop in journalism, he combines storytelling alongside applicable insights to create complex topics easier to understand. He has additionally contributed to publications akin MacMagazine and Jornal A Tarde. Outside of work, Bruno enjoys exploring art, cooking, and technology.
.png)
