How to deploy a website with Devin: step-by-step guide

To deploy a website pinch Devin, create a caller task aliases unfastened an existing 1 successful Devin Desktop, past hole and trial it earlier starting the deployment.

You tin usage Devin App Deploys for a speedy Netlify deployment. For a accumulation workflow, you tin push your task to a GitHub repository, link the repository to your hosting provider, and fto the supplier deploy it from there.

Previously known arsenic Windsurf, Devin Desktop is an AI-powered IDE that lets you create, edit, test, and deploy projects pinch AI assistance. It’s a Visual Studio (VS) Code fork, truthful its interface and workflow will consciousness acquainted to VS Code users.

Follow these steps to deploy your website pinch Devin:

1. Choose really you want to deploy your website pinch Devin.
2. Prepare the website for deployment.
3. Ask Devin to build and trial your project.
4. Push your task to a GitHub repository.
5. Connect the GitHub repository to your hosting provider.
6. Add situation variables and different deployment settings.
7. Deploy the website from your hosting provider’s dashboard.
8. Verify the unrecorded website and its cardinal functionality.

If you’re a Hostinger customer, you tin besides instal the Hostinger Connector hold successful Devin Desktop. It connects Devin to your Hostinger account, truthful you tin deploy websites and negociate hosting resources straight from the IDE.

1. Choose really Devin will deploy the website

Choose really you want to big your website erstwhile utilizing Devin by first deciding really the task gets into Devin Desktop, past choosing the deployment way that will people it.

If you don’t person a task yet, spell to the Agent tab → New Session and picture the website you want Devin to build. Continue prompting Devin until you’re happy pinch the result.

If you already person a project, unfastened the Editor, past usage Explorer to unfastened the task folder.

Once your task is ready, take 1 of these deployment methods:

• App Deploys. Ask Devin to deploy the website straight pinch its App Deploys feature, past fto it grip the build and deployment process. Note that App Deploys is presently successful beta and is intended chiefly for preview deployments alternatively than accumulation websites.
• GitHub and your hosting provider. Push the task to a GitHub repository, past link that repository to your hosting provider. This attack is amended suited for accumulation websites because it gives you a version-controlled deployment workflow and makes early updates easier to manage.

If you’ve ever deployed a website utilizing different integrated improvement situation (IDE), the remaining process will consciousness acquainted because the steps beneath usage the GitHub and hosting provider method.

2. Prepare the website for deployment

Prepare the website for deployment by checking for configuration that useful only connected your section computer.

This measurement is particularly applicable for dynamic websites that usage APIs, databases, situation variables, aliases different outer services.

If you’re deploying a simpler static website built pinch HTML, CSS, and JavaScript, you whitethorn request small aliases nary further configuration earlier deployment.

Ask Devin to reappraisal the task and make basal changes earlier you build and trial it. For example:

Prepare this task for accumulation deployment, but don't deploy it aliases push it to GitHub yet. Check the task configuration, dependencies, situation variables, and immoderate URLs aliases settings that only activity locally. Fix immoderate clear deployment issues and show maine what you changed. Don't adhd passwords, API keys, aliases different secrets to the task files.

Review Devin’s changes earlier continuing. In particular, cheque for:

• Local URLs, specified arsenic localhost, that won’t activity connected the unrecorded website.
• Passwords, API keys, aliases different credentials stored straight successful task files.
• Environment variables that you’ll request to configure pinch your hosting provider.
• Development-only settings that shouldn’t beryllium utilized successful production.

If the task uses situation variables, statement which ones it needs, but don’t adhd their accumulation values to files you’ll push to GitHub. You’ll configure those values later pinch your hosting provider.

3. Ask Devin to build and trial the project

Ask Devin to build and trial the task locally earlier pushing it to GitHub. The nonstop checks dangle connected really your website is built.

Framework-based projects whitethorn person a accumulation build, automated tests, linting (automated codification value checks), aliases type checks. A elemental HTML, CSS, and JavaScript website whitethorn only request to tally locally truthful you tin corroborate that it works.

Ask Devin to tally the checks that already beryllium successful the task and hole immoderate errors it finds. For example:

Use the project's existing package head and scripts. Run the accumulation build and immoderate existing tests, linting, aliases type checks that apply. If the task doesn't require a build aliases doesn't person automated checks, tally it locally and make judge it works. If you find an error, place the cause, hole it, and rerun the affected checks. Don't deploy the website aliases push it to GitHub yet. Tell maine what you tested and whether immoderate issues remain.

Review immoderate changes Devin makes while fixing errors, particularly changes to dependencies, build scripts, aliases task configuration. Check that the fixes don’t present unexpected behavior.

If your task has a accumulation build, corroborate that it completes successfully and generates the expected output earlier continuing.

For projects without a build process, corroborate that the website runs locally and that its pages and functionality activity arsenic expected.

4. Push the task to GitHub

Push your tested task to a GitHub repository, which will service arsenic the root for deployment.

You tin inquire Devin to grip the Git workflow aliases usage Devin Desktop’s built-in Source Control panel. Asking Devin is simpler because it tin tally the required Git commands for you.

To do this, unfastened the Agent tab and inquire Devin to push the task to GitHub. For example:

Push this task to GitHub. If it's already connected to a GitHub repository, perpetrate and push the latest changes to it. Otherwise, initialize Git, create a .gitignore record for this project, perpetrate the files, and thief maine people them to a caller GitHub repository named my-new-website. Ask maine for immoderate repository specifications aliases GitHub authorization you request earlier continuing.

Devin will grip the required Git commands. It whitethorn inquire you to o.k. actions aliases motion successful to GitHub on the way.

Once Devin finishes, unfastened the repository connected GitHub and corroborate that your task files are there.

You tin besides push the task manually done Source Control. If you’ve antecedently deployed a website from VS Code done GitHub, the process is astir identical:

1. Open Source Control successful the sidebar, aliases property Ctrl+Shift+G. Select Initialize Repository if the task isn’t already utilizing Git.
2. Stage the task files by selecting the + icon adjacent to Changes.
3. Enter a perpetrate message, specified arsenic Initial commit, past prime Commit.

4. Select Publish Branch → Publish to GitHub, past take whether to make the repository nationalist aliases private. Sign successful to GitHub and authorize entree if prompted.

5. Connect GitHub to your hosting provider

Connect your GitHub repository to your hosting supplier truthful it tin entree and deploy your project.

On astir web app hosting providers, the process is similar, though the nonstop paper names and deployment settings whitethorn vary. Here’s how:

1. Open your hosting dashboard and find the Git aliases GitHub integration.
2. Authorize entree to your GitHub account.
3. Select the repository that contains your project.

On Hostinger Unlimited web hosting plan and above, usage the setup way that matches your project:

• For Node.js-based projects, including React, Next.js, and Express.js, spell to hPanel → Websites → Add Website → Deploy Web App → Import Git Repository. Authorize GitHub erstwhile prompted, past prime your repository. Hostinger will analyse the task and propose the remaining build settings earlier deployment.

• For fixed HTML and civilization PHP projects, navigate to hPanel → Websites → prime your website → Dashboard → Advanced → Git. Select Continue pinch GitHub, authorize Hostinger to entree your GitHub relationship aliases repository, past take the repository and branch you want to deploy.

6. Add situation variables and deployment settings

After connecting the repository, adhd immoderate situation variables your website needs and reappraisal the settings your hosting supplier will usage to build and tally it.

If you’re deploying a elemental fixed HTML, CSS, and JavaScript website without situation variables aliases a build process, you tin usually skip this step.

For framework-based and move projects, configure these settings erstwhile your hosting supplier asks for them:

• Build command. The bid your supplier runs to create the accumulation type of the website, specified arsenic npm tally build.
• Output directory. The files that contains the files generated by the build, specified arsenic dist aliases build.
• Start bid aliases introduction file. Some server-side applications request a bid aliases record that tells the big really to commencement the application.
• Environment variables. Add the accumulation values you identified earlier, specified arsenic API keys, database URLs, and different configuration.

Some hosting providers tin observe respective of these settings automatically.

Hostinger, for example, tin observe the framework, build command, and output directory. You’ll still request to adhd immoderate required situation variables yourself, though.

It’s still a bully thought to double-check the detected settings and set them if needed. If you’re not judge which values to use, inquire Devin to inspect the project:

Check this task and show maine which accumulation situation variables, build command, output directory, and commencement bid aliases introduction record I should usage pinch my hosting provider.

Only see settings that this task really needs.

7. Deploy the website from your hosting provider

Once the repository, situation variables, and build settings are ready, commencement the deployment from your hosting dashboard.

Depending connected the provider, prime Deploy, Create deployment, aliases an balanced option, past hold for the process to finish. The level will propulsion your task from GitHub and tally the build process you configured earlier.

On Hostinger, click Deploy to commencement the deployment. When the process finishes successfully, you’ll get a nexus to the unrecorded website and its deployment details.

If the deployment fails, unfastened the build log and look for the error. You tin springiness the correction to Devin and inquire it to investigate:

My website grounded to deploy. Here's the build correction from my hosting provider: [paste the correction here] Find the origin and hole the project. Then tally the applicable build and tests again. Don't deploy aliases push thing until the checks pass.

After reviewing Devin’s fix, push the updated task to GitHub and redeploy it from your hosting provider.

8. Verify the unrecorded website

After deployment, trial the unrecorded website to corroborate that it useful correctly extracurricular your section improvement environment.

Open the website URL and cheque the parts visitors are astir apt to use:

• Visit the main pages and corroborate that the content, images, and styles load correctly.
• Follow the navigation and important links.
• Test interactive features specified arsenic forms, buttons, login, and hunt if your website has them.
• For move websites, cheque that features connected to APIs aliases databases return the expected data.
• Open the tract connected a mobile telephone and different smaller-screen devices to spot responsive layout issues.
• If you’re utilizing a civilization domain, corroborate that it opens the correct website complete HTTPS.

If thing breaks connected the unrecorded website, springiness Devin a clear explanation of the problem. You tin besides connect a screenshot if it helps explicate the issue.

For example:

My website deployed successfully, but the interaction shape doesn't activity connected the unrecorded site. Help maine find the origin and hole it without changing unrelated parts of the project.

After Devin fixes the problem, trial the task again, push the changes to GitHub, and redeploy it.

Some hosting providers, including Hostinger, support automatic deployments. After you link a GitHub branch, early pushes to that branch tin trigger a caller deployment automatically.

This intends you tin make changes successful Devin, trial them, and push them to GitHub. Hostinger will past build and deploy the updated type automatically, truthful you won’t request to return to hPanel and redeploy it manually.

How to deploy a Devin-built website pinch Hostinger Connector

You tin deploy a website straight from Devin Desktop pinch the Hostinger Connector extension without pushing the task to GitHub aliases mounting up the deployment manually successful hPanel.

Hostinger Connector connects Devin to your Hostinger account, truthful you tin deploy websites and negociate supported hosting resources – including domains, DNS records, and VPS instances – done prompts.

Hostinger Connector requires Node.js 18 aliases later connected your machine and an progressive Hostinger account. If Node.js is missing aliases outdated, Hostinger Connector tin instal aliases update it for you.

To deploy a website, you’ll besides request an progressive Hostinger hosting scheme that supports your task type.

Compared pinch deploying a website from Cursor, the process is astir identical. The main differences are wherever each editor places its extensions and AI chat controls.

1. Open the Editor tab and prime Extensions successful Devin Desktop. Search for Hostinger Connector, past prime Install.
2. Select the Hostinger icon successful the Activity Bar → 1-Click Connect. Sign successful to your Hostinger relationship successful the browser and authorize the connection.
3. Return to Devin Desktop and unfastened the Hostinger extension again. You should spot it’s connected now.

4. Ask Devin to deploy the project. For example:

Deploy this task to my Hostinger Unlimited hosting scheme connected domain.tld. Ask maine for immoderate hosting aliases domain specifications you need.

If you don’t want to link a civilization domain yet, you tin usage a impermanent domain:

Deploy this task to 1 of my progressive Hostinger hosting plans utilizing a impermanent domain.

Devin will usage Hostinger Connector to grip the deployment and return the deployment position and unrecorded URL successful the chat.

Open the unrecorded URL and verify that the website useful correctly. If the deployment fails, inquire Devin to inspect the deployment correction aliases build logs, hole the issue, and deploy the task again.

Common errors erstwhile deploying a website pinch Devin

Common errors erstwhile deploying a website pinch Devin see missing accumulation configuration, incorrect build settings, incompatible runtime versions, branch mismatches, and entree issues.

Many of these problems hap because the accumulation situation doesn’t lucifer the task configuration you tested locally.

• Missing situation variables. Some features whitethorn extremity moving aft deployment because the unrecorded server doesn’t person the API keys, database URLs, aliases different variables your task uses locally. Add the missing values to your hosting supplier utilizing the aforesaid adaptable names, past redeploy the website.
• Wrong build aliases commencement settings. The deployment whitethorn neglect if the build command, output directory, commencement command, aliases introduction record is incorrect. Check these values successful package.json and your task configuration, aliases inquire Devin to place the correct settings earlier trying again.
• Wrong Node.js version. A Node.js task whitethorn neglect if your hosting supplier uses a different type from the 1 your task requires. Check the required type successful your project, past prime the aforesaid type successful your hosting settings.
• Wrong deployment branch. Your latest changes won’t look connected the unrecorded website if your hosting supplier deploys a different GitHub branch. Check which branch Devin pushed the changes to, past corroborate that your hosting supplier uses the aforesaid branch.
• GitHub repository doesn’t appear. Your hosting supplier whitethorn not spot the repository if its GitHub integration doesn’t person entree to it. Update the integration permissions, past reconnect aliases refresh your GitHub account.
• Local URLs stay successful the project. Features whitethorn neglect aft deployment if the website still points to localhost aliases different improvement address. Replace those URLs pinch the correct accumulation URLs aliases situation variables, past rebuild and redeploy the project.
• “Cannot find binary path” successful Hostinger Connector. This correction intends Devin Desktop can’t find a programme that Hostinger Connector needs, usually npx. Run which npx connected macOS aliases Linux, aliases where npx connected Windows, to find its location. If the bid returns a way but Devin still shows the error, adhd the afloat way to Hostinger Connector’s MCP configuration, past afloat restart Devin Desktop.

Best practices for deploying a website pinch Devin

Best deployment practices pinch Devin attraction connected keeping the AI’s scope clear, reviewing what reaches production, limiting entree to only what’s needed, and testing higher-risk changes earlier launch.

• Give Devin 1 clear task astatine a time. A punctual that combines coding, testing, Git operations, and deployment gives Devin excessively galore actions to grip astatine once. Break the workflow into abstracted tasks and group clear boundaries, specified arsenic Don’t push to GitHub yet aliases Deploy only aft the build passes.
• Review important changes earlier publishing them. Changes to dependencies, build scripts, configuration files, and deployment settings tin impact really the website behaves successful production. Review Devin’s changes successful the editor earlier committing aliases deploying them, particularly erstwhile they impact really the task builds aliases runs.
• Limit Hostinger Connector entree to what you need. Hostinger Connector lets you take which Hostinger merchandise groups Devin tin use, specified arsenic Websites, Domains, and VPS. Keep only the applicable groups enabled, past move connected further ones erstwhile a task requires them.
• Be observant pinch branches that deploy automatically. When automatic deployment is active, pushing to the deployment branch tin people changes without different manual step. Keep unfinished activity connected a abstracted branch and update the deployment branch only aft the changes walk your checks.
• Use a staging tract for awesome changes. Authentication changes, database updates, and third-party integrations tin beryllium difficult to trial wholly connected your section computer. Deploy higher-risk changes to a staging tract aliases impermanent domain first, past people them to accumulation aft you’ve verified that they work.

What to do aft deploying a website pinch Devin

After your Devin-built website is live, attraction connected making judge it useful good for visitors and is easy to support arsenic it grows.

• Connect a civilization domain. A civilization domain gives visitors a accordant reside for your website. If you’re still utilizing a impermanent URL, buy a domain from your preferred registrar and link it to your hosting scheme by updating the DNS settings erstwhile needed. If your domain and hosting are nether the aforesaid Hostinger account, you won’t request to update the DNS settings manually.
• Plan early website changes. Your website will apt request caller content, creation updates, bug fixes, aliases features aft launch. Large batches of changes are harder to reappraisal and troubleshoot, truthful shape updates into manageable groups. Ask Devin to instrumentality and trial each batch, past people it done the aforesaid deployment workflow.
• Set up backups. Backups springiness you a transcript of your website that you tin reconstruct if an update, configuration change, aliases different rumor affects the unrecorded version. Hostinger includes regular website backups pinch Unlimited plans and higher, while lower-tier plans tin adhd them separately. You tin besides reconstruct aliases download disposable backups done hPanel.
• Monitor hosting resources and upgrade erstwhile needed. Your website uses CPU, memory, storage, and different hosting resources arsenic it receives postulation and runs applications. Check your hosting dashboard for precocious assets usage, particularly if the website becomes slow aliases starts returning errors. On Hostinger, you tin upgrade to a higher hosting plan if your existent resources nary longer meet the website’s needs.
• Add website analytics. Analytics shows really visitors find and usage your website, including which pages they sojourn and really postulation changes complete time. This information helps you determine which content, pages, aliases features to amended alternatively of relying connected assumptions. Set up a instrumentality specified arsenic Google Analytics 4 and commencement collecting information earlier making awesome changes, truthful you person a baseline for comparing capacity afterward.

All of the tutorial contented connected this website is taxable to Hostinger's rigorous editorial standards and values.