How to deploy a website from your IDE: Four methods

You can deploy a website from your integrated development environment (IDE) to a live server using a hosting provider extension, Git repository integration, an FTP/SFTP connection, or GitHub Pages.

Each deployment method transfers files and configures your server differently, so the best option depends on your project and hosting provider.

If you want to deploy your website from your IDE using a hosting provider extension, follow these four steps:

1. Gather the prerequisites for deployment.
2. Install the extension in your IDE and authenticate with your hosting provider.
3. Deploy your website using an AI chat prompt or extension commands.
4. Verify the live site to make sure everything works correctly.

Alternatively, if your hosting provider supports auto-deployment, push your code to a GitHub repository. Your hosting provider will automatically build and deploy your website.

You can also upload your project files directly to your hosting server using File Transfer Protocol (FTP), or publish a static website to GitHub Pages if your project doesn’t use a database or backend.

How to deploy a website from your IDE using a hosting provider extension

To deploy a website from your IDE using a hosting provider extension, install the extension, connect it to your hosting account, and deploy your website using AI prompts or deployment commands.

A hosting provider extension connects your IDE directly to your hosting account. This connection lets you deploy websites, manage hosting, and monitor projects without switching between your editor, browser, and hosting dashboard.

The steps below use Antigravity as the featured IDE and Hostinger Connector as the extension. Connector is free to install, but you’ll need an active hosting plan to deploy your website to Hostinger.

The process should be similar when deploying websites with Visual Studio (VS) Code or other IDEs, though the layout, button names, keyboard shortcuts, and menu paths may vary slightly.

1. Gather the prerequisites

Before deploying your website from an IDE using an extension, prepare these things: a deployable website project, an active web hosting plan, and Node.js and Git installed on your computer.

• A website project that’s ready to deploy. Make sure your project works on your computer before deploying it. The root folder should contain an index.html or index.php file, which acts as your website’s entry point.
• An active web hosting plan. Web hosting stores your project files on a server and makes your website accessible through a domain name. If you don’t have a web hosting plan yet, purchase one from a reputable provider like Hostinger.
• Node.js installed. Run node –version in your terminal to check whether Node.js is installed. If you see the error message “Command not found,” download Node.js from nodejs.org and follow the installation instructions.
• Git installed. Run git –version in your terminal to confirm that Git is installed. If your terminal doesn’t recognize the command, download Git from git-scm.com and install it before setting up the extension.

Hostinger Connector requires both Node.js and Git. Other deployment extensions may have different requirements, so check your extension’s documentation before installing and configuring it.

2. Install the deployment extension

Some web app hosting providers, including Hostinger, Vercel, and Netlify, offer extensions through the IDE’s Extensions panel. Open that panel, search for your provider’s extension, install it, and follow the authentication prompts to connect your hosting account.

Here’s how to install and connect Hostinger Connector:

1. Open your IDE and access the Extensions panel.
2. Search for Hostinger Connector, then click Install.

3. Click the Hostinger icon in the Activity Bar.
4. Hit 1-Click Connect.

5. Sign in to your Hostinger account in the browser window, then authorize the connection.
6. Return to your IDE and confirm that the status badge has turned green.

Alternatively, go to hPanel → Dev tools → API, select your editor’s tab, and click Install. This option opens the extension page directly in your IDE.

If browser authentication doesn’t work, navigate to hPanel → Dev tools → API, then click Generate API token and follow the on-screen instructions.

Copy the token, return to Hostinger Connector in your IDE’s Activity Bar, and expand Advanced: use API token instead. Paste the token, then hit Connect with API token.

3. Deploy the website through the extension

To deploy your website with Hostinger Connector, open the project in your IDE. Then, open the AI chat and confirm that your project name appears at the top of the chat panel.

Prompt the agent to deploy your project by specifying the hosting plan and domain you want to use. For example:

Deploy this project to my Hostinger hosting plan at domain.tld.

Alternatively, ask the agent to choose any active plan and use a temporary domain:

Deploy this static site to any of my active Hostinger plans using a temporary domain.

Hostinger Connector then scans your project, runs the build process if needed, and uploads the files to the selected hosting plan and domain. Once the deployment finishes, the chat will display the status and live URL.

You can also use the same chat to check previous deployment statuses and build logs:

Show me the build logs for my last deployment.

If the deployment fails, paste the error output into the chat. The AI will analyze the error and suggest a fix or update the affected file. Once you’ve fixed the issue, ask the agent to redeploy the project.

4. Verify your live website

After deploying your website, open the live URL from the chat output in your browser and complete these checks:

• Pages and navigation. Visit every page and confirm that all links lead to the correct destinations.
• Images, styles, and scripts. Make sure images, CSS styles, and JavaScript features load correctly across the site.
• Forms and interactions. Test contact forms, sign-up fields, buttons, and other interactive elements to confirm they work as expected.
• Mobile and tablet layouts. Open the site on a phone and tablet, as layouts can behave differently on smaller screens.
• SSL certificate. Confirm that the site loads over HTTPS and shows the Connection is secure status in the address bar, meaning the SSL certificate is active.

If something looks wrong, describe the issue in the AI chat and attach a screenshot if needed. The agent can then analyze the problem and suggest a fix. Once you’ve applied the changes, ask the agent to redeploy your website.

For dynamic projects, consider running more thorough web app tests, including database, performance, and security testing. These checks can help you find issues that may not appear during a basic review.

How to deploy a website from your IDE using GitHub auto-deployment

To deploy a website from your IDE using GitHub auto-deployment, push your project to a GitHub repository and connect the repository to your hosting provider. Your provider will then pull the code, run the build process, and publish the website.

This method includes version control, so you can track changes, compare earlier versions, and roll back updates when needed.

Before you begin, make sure you have a GitHub account. The free plan is enough for this process. If you haven’t hosted a website before, you’ll also need a web hosting plan and domain name.

Here’s how to deploy your website using GitHub auto-deployment:

1. Open the Source Control panel in your IDE and initialize a Git repository for your project. Stage all files, enter a commit message such as “Initial commit,” and commit the changes.

2. Push the commit to a new GitHub repository. Most IDEs let you publish a repository directly from the Source Control panel. If your IDE asks you to sign in to GitHub, follow the browser prompts to authorize access.
3. Sign in to your hosting dashboard and open the Git or GitHub integration settings. Authorize access to your GitHub account, then select the repository you want to deploy.

4. Follow the on-screen instructions to configure the build settings. Then, deploy your project and wait for the build process to finish.
5. Open the live URL in your browser and confirm that the website loads correctly.

If you prefer to use your IDE’s built-in terminal instead of the Source Control panel, open the terminal and run:

git init

git add .

git commit -m "Initial commit"

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

git push -u origin main

Replace your-username with your GitHub username and your-repo with your repository name.

Some hosting providers, including Hostinger, support automatic redeployment. With this feature, each push to GitHub triggers a new build and updates your live website without requiring you to open the hosting dashboard.

Check your provider’s documentation or contact its support team to confirm whether your hosting plan supports automatic redeployment.

How to upload website files via FTP/SFTP from your IDE

To upload your website files via FTP/SFTP from your IDE, install an SFTP extension and connect it to your hosting server using the credentials from your hosting dashboard.

This method works well for quick updates when a hosting provider extension or GitHub integration isn’t available or necessary. However, FTP doesn’t provide version control, so you can’t track changes or restore earlier versions.

Make sure you get your SFTP hostname, username, and port from your hosting dashboard. Hostinger users can find these details under hPanel → Websites → Dashboard → Files → FTP Accounts.

As an example, here’s how to set up SFTP deployment using SFTP by Natizyskunk, a free extension available for VS Code, Cursor, and Antigravity:

1. Open your IDE’s Extensions panel, search for SFTP by Natizyskunk, and install it.

2. Open your IDE’s Command Palette and run SFTP: config. This command creates an sftp.json file in your project.
3. Enter your hosting server credentials in sftp.json:

Enter your hosting server credentials in sftp.json:

{

   "name": "My Server",

   "host": "your-server-hostname",

   "protocol": "sftp",

   "port": 22,

   "username": "your-ftp-username",

   "remotePath": "/home/username/public_html",

   "uploadOnSave": true

}

Replace your-server-hostname and your-ftp-username with the values from your hosting dashboard. Set remotePath to the directory your provider uses to serve your website files, such as /home/username/public_html. Keep protocol set to sftp and port set to 22.

4. Right-click your project folder in your IDE’s file explorer, then select Upload Folder to upload all files to your server.

You can also set uploadOnSave to true to sync your changes whenever you save a file. Use this option carefully on production websites because every saved change goes live immediately.

How to publish a static site to GitHub Pages from your IDE

To publish a static site made with HTML, CSS, and JavaScript to GitHub Pages from your IDE, push the project to a GitHub repository and enable Pages in the repository settings.

GitHub Pages is a good option if you want to host your first website, practice deployment without paying for a hosting plan, or showcase a personal project. However, it doesn’t support projects that use server-side code or a database.

If you haven’t pushed your project to a GitHub repository yet, do that from your IDE first. Then, follow these steps:

1. Open the GitHub repository in your browser and go to Settings → Code and automation → Pages.
2. Under Build and deployment, select your branch, usually main, and your folder, usually / (root).
3. Click Save, then wait for the build to finish.
4. Return to Pages and click Visit site to open your live website.

Your project is now live at https://username.github.io/repository-name. Each time you push changes to the same branch from your IDE, GitHub Pages automatically updates your website.

How to choose the right deployment method for your project

The right deployment method depends on your project type, your deployment workflow, and how much control you need over the process.

Choosing a web hosting plan with an IDE extension is the best option for most projects if your provider offers one. It gives you the fastest path from your IDE to a live website with the fewest manual steps.

Opt for GitHub auto-deployment if your team needs version control and automatic deployments with every push. Use FTP/SFTP for quick uploads when a hosting provider extension or GitHub auto-deployment isn’t available. Choose GitHub Pages if you need a free way to host a simple static website.

Best practices for deploying a website from your IDE

Deploying a website from your IDE goes smoothly when you keep sensitive data out of your repository, confirm that everything works locally before pushing, leave a clear trail of what changed and why, and use a non-production URL before going live.

• Protect environment files before pushing. .env files store sensitive data, such as database passwords and API keys. This information may become publicly visible on GitHub if you don’t exclude the files. Add .env and any other credential files to .gitignore before your first commit.
• Test locally before deploying. In an auto-deployment setup, broken code can go live immediately, and visitors will see errors until you notice and fix it. Open the project on your computer, visit every page, and confirm that all features work before pushing your changes.
• Write descriptive commit messages. Vague messages like “Update” or “Fix” make it difficult to identify which change caused a problem when reviewing your deployment history. Write messages that describe the specific change, such as “Fix contact form validation on mobile.”
• Use a temporary domain for testing. If you deploy directly to your production domain, visitors may see mistakes in real time. Deploy to a temporary or staging URL first, confirm that everything works, and then connect your production domain.

Troubleshooting common IDE deployment errors

Common IDE deployment errors include SFTP rejections from wrong credentials or permissions, connection failures from mismatched server settings, and build crashes from missing dependencies or incompatible runtime versions.

• “Permission denied” during an SFTP upload. This error appears when the server rejects the upload because of an incorrect username, invalid file permissions, or an incompatible SSH key format. Verify the credentials in sftp.json, confirm that directories use 755 permissions and files use 644, and convert your SSH key to PEM format if the error includes DECODE_ERROR.
• “Failed to connect to remote server” in SFTP. This error usually appears when the host, port, or protocol in sftp.json doesn’t match the values in your hosting dashboard. A server firewall may also block port 22. Check all three values against your dashboard, then contact your hosting provider’s support team if port 22 is blocked.
• Build failure during GitHub auto-deployment. Your hosting provider may fail to build the project because of missing dependencies, an unsupported runtime version, or an incorrect build command. Check the build logs in your repository’s Actions tab. Then, confirm that the scripts in package.json and the Node.js version match your hosting provider’s requirements.

Next steps after deploying from your IDE

After your first deployment, make your site easier to find with a custom domain, extend what you can manage from the IDE beyond deployment, and add safety nets like automated backups and uptime alerts.

• Set up a custom domain. A default hosting URL or github.io address works for testing, but a custom domain makes your site easier to find and share. If you buy a domain through Hostinger, you can connect it to your website in hPanel. Hostinger will also activate an SSL certificate automatically.
• Explore extension features beyond deployment. Hostinger Connector, for example, can also manage domains, configure DNS records, set up email, and monitor server performance. Try prompts like “List my domains” or “Show DNS records for domain.tld” to manage your hosting without leaving the IDE.
• Enable automated backups. A failed deployment can break a working website. Without a backup, you may need to fix the code and redeploy the site manually. Some web hosts, such as Hostinger, let you enable automated backups so you can restore a working version quickly.
• Add uptime monitoring. Your website can go offline without you noticing. Use a website uptime monitoring service such as UptimeRobot to monitor your URL every few minutes and send alerts by email or Slack when the site stops responding.

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

The author

Ariffud Muhammad

Ariffud is a Technical Content Writer with an educational background in Informatics. He has extensive expertise in Linux and VPS, authoring over 200 articles on server management and web development. Follow him on LinkedIn.

More from Ariffud Muhammad