{"id":145667,"date":"2026-07-11T14:47:08","date_gmt":"2026-07-11T14:47:08","guid":{"rendered":"\/au\/tutorials\/how-to-deploy-a-website-from-vs-code"},"modified":"2026-08-20T18:31:57","modified_gmt":"2026-08-20T18:31:57","slug":"how-to-deploy-a-website-from-vs-code","status":"publish","type":"post","link":"\/au\/tutorials\/how-to-deploy-a-website-from-vs-code\/","title":{"rendered":"How to deploy a website from VS Code"},"content":{"rendered":"<p class=\"wp-block-paragraph\">To deploy a website from Visual Studio Code (VS Code), <strong>you push your project from your computer to a hosting provider so it goes live at a public URL<\/strong>.<\/p><p class=\"wp-block-paragraph\">The two main ways to deploy a website from VS Code are connecting a GitHub repository to your hosting provider for automatic deployments or using your web host&rsquo;s VS Code extension, like Hostinger Connector, to deploy directly from your editor.<\/p><p class=\"wp-block-paragraph\">Both approaches have similar prerequisites, such as Git installed on your computer, a GitHub account for storing your project in a repository, and a hosting plan to host your website on a live server.<\/p><p class=\"wp-block-paragraph\">Alternatively, you can deploy your website from VS Code using file transfer protocol (FTP), GitHub Pages, or cloud platform extensions, depending on your project&rsquo;s needs.<\/p><h2 class=\"wp-block-heading\" id=\"h-what-to-do-before-deploying-a-website-from-vs-code\"><strong>What to do before deploying a website from VS Code<\/strong><\/h2><p class=\"wp-block-paragraph\">Deploying a website from VS Code requires similar tools as <a href=\"\/au\/tutorials\/how-to-deploy-a-website-from-your-ide\/\" data-type=\"link\" data-id=\"\/tutorials\/how-to-deploy-a-website-from-your-ide\">deploying sites with other integrated development environments (IDEs)<\/a>. You need <strong>Git, a GitHub account, an active web hosting plan, and VS Code itself<\/strong>.<\/p><p class=\"wp-block-paragraph\">Each tool serves a different purpose in the deployment process:<\/p><ul class=\"wp-block-list\">\n<li><strong>Visual Studio Code<\/strong>. Download it from the official site for Windows, macOS, or Linux.<\/li>\n\n\n\n<li><strong>Your website project<\/strong>. You need an entry point file like <strong>index.html<\/strong>, <strong>app.js<\/strong>, or <strong>index.php<\/strong>. If you use a framework like React or Vue, run <strong>npm run build<\/strong> first to generate the files your hosting provider will serve.<\/li>\n\n\n\n<li><strong>Git<\/strong>. <a href=\"\/au\/tutorials\/how-to-install-git-on-ubuntu\/\">Install Git<\/a> on your computer so you can push code from VS Code to GitHub using commands.<\/li>\n\n\n\n<li><strong>GitHub account<\/strong>. A free account supports both public and private repositories and connects to hosting providers, so it&rsquo;s enough to store your project and set up deployments.<\/li>\n\n\n\n<li><strong>Web hosting plan<\/strong>. <a href=\"\/au\/tutorials\/how-to-choose-web-hosting-plan\/\">Pick a web hosting plan<\/a> that supports automatic deployments from a GitHub repository, so you can publish updates by pushing code instead of uploading files manually.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Note that if you only want to preview your website, you can use a VS Code extension like Live Server. It opens your site in your computer&rsquo;s browser at <strong>localhost:5000<\/strong>, but only you can see it.<\/p><p class=\"wp-block-paragraph\">Deploying your website to a live server lets anyone with your domain access your site.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-deploy-a-website-from-vs-code-using-github\"><strong>How to deploy a website from VS Code using GitHub<\/strong><\/h2><p class=\"wp-block-paragraph\">To deploy a website from <a href=\"\/au\/tutorials\/what-is-vs-code\/\">VS Code<\/a> using GitHub, <strong>prepare your project, push your code to the GitHub repository, connect the repository to your hosting provider, and verify the live site<\/strong>.<\/p><p class=\"wp-block-paragraph\">This method works for both static and <a href=\"\/au\/tutorials\/dynamic-website\/\">dynamic sites<\/a>. It also gives you version control, so you can track changes, compare previous versions, and undo updates when needed.<\/p><h3 class=\"wp-block-heading\"><strong>1. Create or open your project in VS Code<\/strong><\/h3><p class=\"wp-block-paragraph\">Open an existing project in VS Code by going to <strong>File<\/strong> &rarr; <strong>Open Folder<\/strong> and selecting the directory that contains your website files.<\/p><p class=\"wp-block-paragraph\">Your project needs at least one entry point file, such as <strong>index.html<\/strong> for static sites, <strong>app.js<\/strong> for Node.js apps, or <strong>index.php<\/strong> for PHP projects.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a8e3c035dec4\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c035dec4\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/vs-code-editor-demo-website-project-explorer-sidebar.png\/w=1024,h=1024,fit=scale-down\" alt=\"VS Code editor with demo-website project open showing index.html and style.css in Explorer\" class=\"wp-image-152610\" title=\"vs-code-editor-demo-website-project-explorer-sidebar\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">If you&rsquo;ve never built a project before, try <a href=\"\/au\/tutorials\/making-website-with-html\/\">creating a simple HTML website<\/a>. Create a new folder on your computer and open it in VS Code. Then, add files directly in the editor by right-clicking the <strong>Explorer<\/strong> sidebar &rarr; <strong>New File<\/strong>.<\/p><p class=\"wp-block-paragraph\">Start with your entry point, which is <strong>index.html<\/strong>, then add stylesheets, scripts, images, and other files as your website grows.<\/p><h3 class=\"wp-block-heading\"><strong>2. Initialize Git and push to GitHub<\/strong><\/h3><p class=\"wp-block-paragraph\">You can push your code to GitHub through VS Code&rsquo;s built-in <strong>Source Control<\/strong> panel. The process takes four steps:<\/p><ol class=\"wp-block-list\">\n<li>Open the <strong>Source Control<\/strong> panel in the sidebar, or press <strong>Ctrl+Shift+G<\/strong>, and click <strong>Initialize Repository<\/strong>. This turns your project folder into a local Git repository so VS Code can track your changes.<\/li>\n\n\n\n<li>Stage your files by clicking the <strong>+<\/strong> icon next to each one, or click <strong>+<\/strong> next to <strong>Changes<\/strong> to stage everything. Staging marks the files you want to include in the next save point.<\/li>\n\n\n\n<li>Type a short commit message, like &ldquo;Initial commit&rdquo;, in the message field and click <strong>Commit<\/strong>. This saves a snapshot of your staged files.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a8e3c0361e38\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c0361e38\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/vs-code-source-control-staged-changes-commit-button-highlighted.png\/public\" alt=\"VS Code Source Control panel with two staged files and Commit button\" class=\"wp-image-152614\" title=\"vs-code-source-control-staged-changes-commit-button-highlighted\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Click <strong>Publish Branch &rarr; Publish to GitHub<\/strong>, and choose whether you want a public or private repository. If this is your first time, VS Code opens a browser window so you can sign in to GitHub and authorize access.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">VS Code creates the repository on GitHub and pushes your code automatically.<\/p><p class=\"wp-block-paragraph\">If you prefer the command line, open VS Code&rsquo;s integrated terminal by selecting <strong>View &rarr; Terminal <\/strong>or pressing <strong>&#8963;+`<\/strong> and run these commands one at a time:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">git init\ngit add .\ngit commit -m \"Initial commit\"\ngit remote add origin https:\/\/github.com\/your-username\/your-repo.git\ngit push -u origin main<\/pre><p class=\"wp-block-paragraph\">Replace <strong>your-username<\/strong> with your GitHub username and <strong>your-repo<\/strong> with your GitHub repository name.<\/p><p class=\"wp-block-paragraph\">Whichever approach you use, your project is now on GitHub and ready to connect to your hosting provider.<\/p><h3 class=\"wp-block-heading\"><strong>3. Connect your GitHub repository to a hosting provider<\/strong><\/h3><p class=\"wp-block-paragraph\">Connecting GitHub to your hosting provider means signing in to your hosting dashboard, finding the Git or deployment settings, authorizing GitHub access, and selecting the repository you want to deploy.<\/p><p class=\"wp-block-paragraph\">After that, your hosting provider can pull your code and publish your site. The exact steps vary across <a href=\"\/au\/tutorials\/best-hosting-providers-for-web-apps\/\">web app hosting providers<\/a> and deployment platforms like Vercel and Netlify.<\/p><p class=\"wp-block-paragraph\">On Hostinger, there are two ways to connect your GitHub repository. If you have a PHP, WordPress, or <a href=\"\/au\/tutorials\/static-website\/\">static site<\/a> built with HTML, CSS, and JavaScript, follow these steps:<\/p><ol class=\"wp-block-list\">\n<li>Go to <strong>hPanel<\/strong> &rarr; <strong>Websites<\/strong> &rarr; select the site &rarr; <strong>Dashboard<\/strong> &rarr; <strong>Advanced<\/strong> &rarr; <strong>Git<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Continue with GitHub<\/strong>. GitHub opens an authorization page where you can install and authorize the Hostinger integration on your GitHub account.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a8e3c0366142\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c0366142\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-advanced-git-deploy-from-github.png\/w=1024,h=1024,fit=scale-down\" alt=\"hPanel Git settings page with Deploy from GitHub and Continue with GitHub button\" class=\"wp-image-152607\" title=\"hpanel-advanced-git-deploy-from-github\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Select the repository and branch you want to deploy.<\/li>\n\n\n\n<li>Set the root directory, which is the folder your hosting provider serves files from. This defaults to <strong>public_html<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Deploy<\/strong>.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">If you&rsquo;re <a href=\"\/au\/tutorials\/deploy-node-js-application\/\">deploying a Node.js web app<\/a>, including projects built with frameworks like React, Express, or Next.js, go to <strong>hPanel<\/strong> &rarr; <strong>Websites<\/strong> &rarr; <strong>Add Website<\/strong> &rarr; <strong>Node.js Web App<\/strong>.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a8e3c036fc71\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c036fc71\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-websites-add-website-nodejs-web-app-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"hPanel Websites page with Add website menu showing Node.js Web App option\" class=\"wp-image-152249\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">Choose whether you want to use a custom domain or a temporary one, then click <strong>Connect with GitHub<\/strong>. Follow the on-screen instructions to configure build settings, such as the start command and output directory, before deploying.<\/p><h3 class=\"wp-block-heading\"><strong>4. Deploy and verify your live website<\/strong><\/h3><p class=\"wp-block-paragraph\">Most hosting providers start the deployment from the same page where you connected your GitHub repository. Click <strong>Deploy<\/strong>, or follow the remaining prompts if your provider uses a multi-step wizard, and wait for the process to finish.<\/p><p class=\"wp-block-paragraph\">You should see a success message once the deployment finishes. Here&rsquo;s an example from Hostinger:<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a8e3c03739ee\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c03739ee\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/hpanel-deployment-completed-react-deploy-preview.png\/w=1024,h=1024,fit=scale-down\" alt=\"Deployment completed screen with app preview and Go to dashboard button\" class=\"wp-image-152243\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">After that, verify that everything works by running through a few checks:<\/p><ul class=\"wp-block-list\">\n<li>Check the build status and logs in your hosting dashboard to confirm the deployment is complete.<\/li>\n\n\n\n<li>Visit your domain in a browser to make sure that every page loads.<\/li>\n\n\n\n<li>Look for the <strong>Connection is secure <\/strong>status in the address bar to verify that your <a href=\"\/au\/tutorials\/how-to-get-ssl-certificate\/\">SSL certificate<\/a> is active.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">From this point on, you can edit your code in VS Code as usual, then commit and push your changes to GitHub.<\/p><p class=\"wp-block-paragraph\">Some hosting providers support automatic redeployment. On Hostinger, this feature is available on the Business <a href=\"\/au\/web-hosting\">web hosting plan<\/a> or higher. This means every push you make to GitHub triggers a new deployment without requiring you to open hPanel.<\/p><p class=\"wp-block-paragraph\">If your provider doesn&rsquo;t mention this feature, check their documentation or contact support to confirm whether automatic redeployment is available.<\/p><figure class=\"wp-block-image size-full\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-web-hosting\" href=\"\/au\/web-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/public\" alt=\"Hostinger web hosting banner\" class=\"wp-image-98604\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-how-to-deploy-a-website-from-vs-code-with-hostinger-connector\"><strong>How to deploy a website from VS Code with Hostinger Connector<\/strong><\/h2><p class=\"wp-block-paragraph\">To deploy a website using Hostinger Connector, you install the extension, connect your Hostinger account, and type a deployment prompt in VS Code&rsquo;s Copilot Chat.<\/p><p class=\"wp-block-paragraph\"><a href=\"\/au\/connector\">Hostinger Connector<\/a> is a free extension that gives AI coding assistants in IDEs like VS Code, Cursor, Devin, and Antigravity direct access to more than 100 Hostinger tools through Model Context Protocol (MCP).<\/p><p class=\"wp-block-paragraph\">With it, you can deploy sites, manage domains, configure DNS, and monitor servers from a single interface inside your preferred IDE. The same prompt-based workflow applies in other supported editors, so the steps are nearly identical if you&rsquo;d rather <a href=\"\/au\/tutorials\/how-to-deploy-a-website-from-antigravity\/\" data-type=\"link\" data-id=\"\/tutorials\/how-to-deploy-a-website-from-antigravity\/\">deploy a website from Antigravity<\/a>.<\/p><p class=\"wp-block-paragraph\">You only need an active Hostinger account to get started. However, for tasks like deployments and server configurations, you&rsquo;ll also need an active hosting plan.<\/p><h3 class=\"wp-block-heading\"><strong>1. Install Hostinger Connector in VS Code<\/strong><\/h3><p class=\"wp-block-paragraph\">To install Hostinger Connector in VS Code, open the <strong>Extensions<\/strong> panel (press <strong>Ctrl+Shift+X)<\/strong>, search for <strong>Hostinger Connector<\/strong>, and click <strong>Install<\/strong>. You&rsquo;ll see the Hostinger icon in the <strong>Activity Bar<\/strong> on the left once it&rsquo;s ready.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a8e3c037b002\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c037b002\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/open-vsx-hostinger-connector-extension-details.png\/w=1024,h=1024,fit=scale-down\" alt=\"Hostinger Connector extension page on Open VSX showing supported IDEs and version\" class=\"wp-image-152608\" title=\"open-vsx-hostinger-connector-extension-details\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">You can also start from hPanel by going to <strong>Dev tools<\/strong> &rarr; <strong>API<\/strong> &rarr; <strong>VS Code<\/strong> &rarr; <strong>Install in VS Code<\/strong>. This opens a direct link to the extension page in your editor.<\/p><p class=\"wp-block-paragraph\">After installation, the extension checks whether Node.js is installed on your computer. If it isn&rsquo;t, Hostinger Connector will prompt you to install the required Node.js version. Follow the on-screen instructions to complete the setup.<\/p><h3 class=\"wp-block-heading\"><strong>2. Connect your Hostinger account<\/strong><\/h3><p class=\"wp-block-paragraph\">Once you&rsquo;ve installed the Hostinger Connector extension, connect it to your Hostinger account by following these steps:<\/p><ol class=\"wp-block-list\">\n<li>Click the Hostinger icon in the <strong>Activity Bar<\/strong>.<\/li>\n\n\n\n<li>Hit <strong>1-Click Connect<\/strong>.<\/li>\n\n\n\n<li>Sign in to your Hostinger account in the browser window if you haven&rsquo;t already, then authorize the connection.<\/li>\n\n\n\n<li>Return to VS Code and check that the status badge has turned green.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a8e3c037f687\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c037f687\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/vs-code-hostinger-connector-connected-via-oauth.png\/public\" alt=\"Hostinger Connector sidebar in VS Code showing Connected via OAuth with green status\" class=\"wp-image-152611\" title=\"vs-code-hostinger-connector-connected-via-oauth\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">If browser authentication doesn&rsquo;t work or you prefer manual setup, go to <strong>hPanel<\/strong> &rarr; <strong>Dev tools<\/strong> &rarr; <strong>API<\/strong> and click <strong>Generate API token<\/strong>. Enter your preferred token name and expiration duration.<\/p><p class=\"wp-block-paragraph\">Then, click <strong>Generate<\/strong> and copy the API token. Return to <strong>VS Code<\/strong> &rarr; <strong>Hostinger Connector<\/strong> and expand <strong>Advanced: use API token instead<\/strong>. Paste the token you copied earlier and click <strong>Connect with API token<\/strong>.<\/p><h3 class=\"wp-block-heading\"><strong>3. Deploy your website to Hostinger<\/strong><\/h3><p class=\"wp-block-paragraph\">To deploy your website using Hostinger Connector, open <strong>Copilot Chat<\/strong> by going to <strong>View<\/strong> &rarr; <strong>Chat<\/strong> or pressing <strong>Ctrl+Alt+I<\/strong> on Windows and Linux or <strong>Ctrl+Cmd+I<\/strong> on macOS. Then, make sure the Hostinger tools are enabled:<\/p><ol class=\"wp-block-list\">\n<li>Click the <strong>Configure Tools<\/strong> button at the bottom of the chat input.<\/li>\n\n\n\n<li>Confirm that <strong>Hostinger<\/strong> is listed and enabled in the tools menu.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a8e3c0383452\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c0383452\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/vs-code-configure-tools-hostinger-mcp-servers-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"VS Code Configure Tools dialog with Hostinger MCP Server tools enabled\" class=\"wp-image-152609\" title=\"vs-code-configure-tools-hostinger-mcp-servers-highlighted\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Type a deployment prompt, such as &ldquo;Deploy my Node.js app to Hostinger&rdquo; or &ldquo;Deploy this static site to my Hostinger account.&rdquo;<\/li>\n<\/ol><p class=\"wp-block-paragraph\">The extension picks up your prompt, runs the deployment, and shows the progress directly in the chat window. Once it&rsquo;s finished, you&rsquo;ll see the deployment status and a link to your live site.<\/p><p class=\"wp-block-paragraph\">You can also check previous deployment statuses and build logs by asking for them in the same chat.<\/p><p>\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    &#128161; What else can you do with Hostinger Connector?                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Hostinger Connector can do much more than deploy websites. Try these prompts to manage your Hostinger account directly from VS Code:\n<\/p><li>\"List all my Hostinger domains\"\n<\/li><li>\"Show me the DNS records for <strong>domain.tld<\/strong>\"\n<\/li><li>\"What VPS servers do I have and are they running?\"\n<\/li><li>\"Restart my VPS server\"\n<\/li><li>\"What Hostinger subscriptions are active on my account?\"<\/p>\n                    <\/div>\n        <br>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-other-ways-to-deploy-a-website-from-vs-code\"><strong>Other ways to deploy a website from VS Code<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Besides using a GitHub repository or a hosting provider extension like Hostinger Connector, you can also <a href=\"\/au\/tutorials\/how-to-host-a-website\/\">host a website<\/a> from VS Code <strong>using FTP, GitHub Pages, or cloud platform extensions<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each method works best for a specific scenario, so you can choose the one that fits your project best.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to deploy a website from VS Code using FTP or SFTP<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Using FTP or SFTP, you can <a href=\"\/au\/tutorials\/how-to-upload-your-website\/\">upload your website files<\/a> directly from VS Code to your hosting server. A popular extension for this deployment method is <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Natizyskunk.sftp\" target=\"_blank\" rel=\"noopener\">SFTP by Natizyskunk<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a8e3c0387632\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c0387632\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/vs-code-marketplace-sftp-extension-natizyskunk.png\/w=1024,h=1024,fit=scale-down\" alt=\"SFTP extension by Natizyskunk on VS Code Marketplace with Install button\" class=\"wp-image-152613\" title=\"vs-code-marketplace-sftp-extension-natizyskunk\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Once you add your server details, such as the hostname, username, password, and remote path (typically <strong>public_html\/your-project<\/strong>) to the <strong>sftp.json<\/strong> configuration file, the extension syncs your local changes to the specified path every time you save.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"\/au\/tutorials\/what-is-ftp\/\">FTP<\/a> method doesn&rsquo;t include version control though, so you can&rsquo;t track changes or revert to earlier versions of your files. That said, it works well for quick updates to traditional hosting accounts where GitHub integration isn&rsquo;t available or necessary.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to deploy a static site to GitHub Pages from VS Code<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">GitHub Pages is a free hosting service built into GitHub. It serves static HTML, CSS, and JavaScript sites directly from a repository.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To deploy a static site to GitHub Pages, open your repository on GitHub and go to <strong>Settings<\/strong> &rarr; <strong>Code and automation<\/strong> &rarr; <strong>Pages<\/strong>. Then, choose your branch and folder under <strong>Build and deployment<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After that, commit and push changes to your repository from VS Code as usual. To view the published site, go back to <strong>Pages<\/strong> and click <strong>Visit site<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a8e3c038b6e4\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c038b6e4\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/github-pages-settings-live-site-visit-site-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"GitHub Pages settings showing live site URL and Visit site button\" class=\"wp-image-152606\" title=\"github-pages-settings-live-site-visit-site-highlighted\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Note that GitHub Pages only supports static content with no server-side code or database access. It&rsquo;s a good fit for deploying portfolios, documentation sites, simple landing pages, and anything that doesn&rsquo;t need a backend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to deploy from VS Code using cloud platform extensions<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Similar to Hostinger Connector, some cloud platforms offer VS Code extensions that let you deploy directly from the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-azuretools.vscode-azureappservice\" target=\"_blank\" rel=\"noopener\">Azure App Service<\/a> extension, for example, supports full-stack app deployment for projects built with Node.js, Python, or Java on Microsoft Azure.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a8e3c038f6b9\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a8e3c038f6b9\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/07\/vs-code-marketplace-azure-app-service-extension.png\/w=1024,h=1024,fit=scale-down\" alt=\"Azure App Service extension on VS Code Marketplace with Install button\" class=\"wp-image-152612\" title=\"vs-code-marketplace-azure-app-service-extension\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The process is similar to other extension-based deployment methods. Install the Azure App Service extension, then sign in to your Azure account through the browser prompt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After that, follow the on-screen instructions in VS Code to select your subscription, configure your app, and deploy your project to an Azure App Service instance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since this extension connects Microsoft Azure, it requires a separate Azure account and billing setup. It&rsquo;s better suited for complex dynamic apps that need dedicated cloud infrastructure.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-to-do-after-deploying-your-website\"><strong>What to do after deploying your website<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After deploying your website from VS Code, <strong>set up a custom domain, test the site further, and configure backups as a safety net for future changes<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Set up a custom domain<\/strong>. <a href=\"\/au\/domain-name-search\">Buy a domain name<\/a>, then point its DNS records to your hosting provider if your site is still on a temporary URL or default subdomain.<\/li>\n\n\n\n<li><strong>Test further across devices and browsers<\/strong>. Open your site on a phone, tablet, and desktop to check that layouts, images, navigation, and forms work as expected in major browsers like Chrome, Firefox, and Safari.<\/li>\n\n\n\n<li><strong>Set up backups and monitoring<\/strong>. Enable automated backups through your hosting dashboard. Consider setting up uptime monitoring as well, so you&rsquo;ll know if the site goes down.<\/li>\n\n\n\n<li><strong>Plan for ongoing changes<\/strong>. As your site grows, you&rsquo;ll make updates like editing content, adding new pages, or building new features. Make sure you test every change locally before pushing it to your live site.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/li>\n","protected":false},"excerpt":{"rendered":"<p>To deploy a website from Visual Studio Code (VS Code), you push your project from your computer to a hosting provider so it goes live at a public URL. The two main ways to deploy a website from VS Code are connecting a GitHub repository to your hosting provider for automatic deployments or using your [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/au\/tutorials\/how-to-deploy-a-website-from-vs-code\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":411,"featured_media":146829,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to deploy a website from VS Code","rank_math_description":"Deploy a website from VS Code by connecting a GitHub repository to your hosting provider or using the Hostinger Connector extension.","rank_math_focus_keyword":"how to deploy a website from vs code","footnotes":""},"categories":[22667],"tags":[],"class_list":["post-145667","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hosting"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-deploy-a-website-from-vs-code","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-deploy-a-website-from-vs-code","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-deploy-a-website-from-vs-code","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-deploy-a-website-from-vs-code","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-deploy-a-website-from-vs-code","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-deploy-a-website-from-vs-code","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-deploy-a-website-from-vs-code","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-deploy-a-website-from-vs-code","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/posts\/145667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/comments?post=145667"}],"version-history":[{"count":3,"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/posts\/145667\/revisions"}],"predecessor-version":[{"id":146828,"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/posts\/145667\/revisions\/146828"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/media\/146829"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/media?parent=145667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/categories?post=145667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/au\/tutorials\/wp-json\/wp\/v2\/tags?post=145667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}