{"id":140153,"date":"2026-10-20T09:05:05","date_gmt":"2026-10-20T09:05:05","guid":{"rendered":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-deploy-from-github\/"},"modified":"2026-10-20T11:18:37","modified_gmt":"2026-10-20T11:18:37","slug":"how-to-deploy-from-github","status":"publish","type":"post","link":"\/in\/tutorials\/how-to-deploy-from-github\/","title":{"rendered":"How to deploy from GitHub"},"content":{"rendered":"<p class=\"wp-block-paragraph\">To deploy from GitHub, prepare your application repository for production, connect it to a hosting platform, select the branch you want to publish, and configure the platform&rsquo;s build settings for deployment.<\/p><p class=\"wp-block-paragraph\">We&rsquo;ll use Hostinger Web Apps Hosting to put this process into practice with a React and Vite application, from connecting the repository to getting the app live and keeping it updated through GitHub.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-1-prepare-your-github-repository\">1. Prepare your GitHub repository<\/h2><p class=\"wp-block-paragraph\">First, run the application locally and test its main functionality. A working local version makes deployment problems easier to isolate. An error that already appears locally isn&rsquo;t caused by the hosting environment.<\/p><p class=\"wp-block-paragraph\">Next, check that your project includes the configuration files required by its framework. Our React project uses Vite and includes a <code>package.json<\/code> file that defines its dependencies and available scripts.<\/p><p class=\"wp-block-paragraph\">Make sure <code>package.json<\/code> includes the production build script your application needs. Before pushing the project to GitHub, run the production build locally to check that the application compiles successfully. For our Vite project, use:<\/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=\"\">npm run build<\/pre><p class=\"wp-block-paragraph\">A successful build should generate a <code>dist<\/code> directory containing the production files. If the command fails, resolve the reported errors before continuing with deployment.<\/p><p class=\"wp-block-paragraph\">Hostinger doesn&rsquo;t let you type a build command. Instead, you select it from a dropdown of the scripts defined in this file, so you can&rsquo;t select a script that isn&rsquo;t there. <\/p><p class=\"wp-block-paragraph\">In our Vite project, the relevant script is:<\/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=\"\">\"scripts\": {\n  \"build\": \"vite build\"\n}<\/pre><p class=\"wp-block-paragraph\">This makes <code>npm run build<\/code> available as the build command when configuring the application on Hostinger.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d79f7a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d79f7a\" 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\/10\/image-6.png\/public\" alt='package.json in GitHub showing \"build\": \"vite build\" in the scripts section' class=\"wp-image-160018\" style=\"aspect-ratio:2.08\" title=\"How to 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><p class=\"wp-block-paragraph\">For a project that isn&rsquo;t already tracked with Git, open its directory in the terminal and initialize a repository:<\/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<\/pre><p class=\"wp-block-paragraph\">Before staging the project files, open the <code>.gitignore<\/code> file in the project&rsquo;s root directory. Check that it lists files and directories Git shouldn&rsquo;t track.<\/p><p class=\"wp-block-paragraph\">In our Vite project, <code>node_modules<\/code> is already listed in <code>.gitignore<\/code>, so locally installed dependencies won&rsquo;t be added to the repository.<\/p><p class=\"wp-block-paragraph\">The entries you need depend on your framework and development environment. Many project setup tools automatically create a <code>.gitignore<\/code> file. Create a file named <code>.gitignore<\/code> in the project&rsquo;s root directory if your project doesn&rsquo;t include one. <\/p><p class=\"wp-block-paragraph\">Place it alongside files such as <code>package.json<\/code>, and list each file or directory Git should ignore on a separate line:<\/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=\"\">node_modules\/\ndist\/\n.env\n.env.*\n!.env.example<\/pre><p class=\"wp-block-paragraph\">Check your framework&rsquo;s documentation for its recommended exclusions before committing the project.<\/p><p class=\"wp-block-paragraph\">Keep sensitive values such as API keys and credentials out of the repository as well. You&rsquo;ll add the values the deployed application needs as environment variables during deployment.<\/p><p class=\"wp-block-paragraph\">Once you&rsquo;ve confirmed which files Git will include, stage the project and create a commit:<\/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 add .\ngit commit -m \"Initial commit\"<\/pre><p class=\"wp-block-paragraph\">This commit is the version you&rsquo;ll push to GitHub. As you update the application,<a data-click-id=\"hgr-post-content-link-managing-commits-branches-and-remote-repositories\" data-wpel-link=\"internal\" href=\"\/in\/tutorials\/basic-git-commands\/\" rel=\"follow\"> managing commits, branches, and remote repositories<\/a> becomes part of your regular workflow.<\/p><p class=\"wp-block-paragraph\">Next, create an empty repository on GitHub. Don&rsquo;t initialize it with files such as <code>README.md<\/code> or <code>.gitignore <\/code>if those files already exist in your local project.<\/p><p class=\"wp-block-paragraph\">Connect your local repository to the GitHub repository:<\/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 remote add origin https:\/\/github.com\/USERNAME\/REPOSITORY.git<\/pre><p class=\"wp-block-paragraph\">Replace <code>USERNAME<\/code> and <code>REPOSITORY<\/code> with your GitHub username and repository name.<\/p><p class=\"wp-block-paragraph\">Push the branch containing the production-ready application to GitHub. For the <code>main<\/code> branch, run:<\/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 push -u origin main<\/pre><p class=\"wp-block-paragraph\">Your branch may be named <code>master<\/code> or something else. Check the name with <code>git branch<\/code>, then replace <code>main<\/code> in the command above with your branch name.<\/p><p class=\"wp-block-paragraph\">Remember which branch you push because you&rsquo;ll select it as the production branch when configuring the deployment.<\/p><p class=\"wp-block-paragraph\">When you run <code>git push<\/code> with an HTTPS GitHub URL, GitHub asks you to verify your identity. You can&rsquo;t use your normal GitHub password for this. Authenticate with a supported method instead, such as a personal access token (PAT).<\/p><p class=\"wp-block-paragraph\">Finally, open the repository on GitHub and confirm that the latest project files are present.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d7dc04\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d7dc04\" 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\/10\/image-7.png\/public\" alt=\"GitHub repository on the main branch showing the uploaded React and Vite project files.\" class=\"wp-image-160022\" style=\"aspect-ratio:1.8851963746223566\" title=\"How to deploy from GitHub - 2\"><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><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-2-choose-a-deployment-method\">2. Choose a deployment method<\/h2><p class=\"wp-block-paragraph\">Choose a deployment method that supports your application&rsquo;s framework, runtime, and resource requirements.<\/p><p class=\"wp-block-paragraph\">For this tutorial, we&rsquo;ll use<a data-click-id=\"hgr-post-content-link-in-web-apps-hosting\" aria-label=\"Web apps hosting\" href=\"\/in\/web-apps-hosting\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a data-click-id=\"hgr-post-content-link-hostinger-web-apps-hosting\" href=\"\/in\/web-apps-hosting\" data-wpel-link=\"internal\" rel=\"follow\">Hostinger Web Apps Hosting<\/a> to deploy the application directly from its GitHub repository. Hostinger retrieves the code, builds the application, and runs it on managed infrastructure, so you don&rsquo;t need to configure a server or create a custom continuous integration and continuous deployment (CI\/CD) pipeline.<\/p><p class=\"wp-block-paragraph\">Applications that run server-side code require a specific runtime and often additional server resources. Account for these needs when<a data-click-id=\"hgr-post-content-link-in-tutorials-how-to-host-a-web-application\" aria-label=\"How to host a web application\" href=\"\/in\/tutorials\/how-to-host-a-web-application\/\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a data-click-id=\"hgr-post-content-link-choosing-the-right-environment-for-your-app\" href=\"\/in\/tutorials\/how-to-host-a-web-application\/\" data-wpel-link=\"internal\" rel=\"follow\">choosing the right environment for your app<\/a>.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-3-connect-your-github-repository-to-hostinger\">3. Connect your GitHub repository to Hostinger<\/h2><p class=\"wp-block-paragraph\">In the Hostinger dashboard, go to <strong>Websites &rarr; Web Apps<\/strong>. This opens the Web Apps deployment area, where you can connect a GitHub or GitLab repository or upload the application as a ZIP file.<\/p><p class=\"wp-block-paragraph\">For a GitHub deployment, click <strong>Get started<\/strong>.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d811b7\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d811b7\" 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\/10\/image-8.png\/public\" alt=\"Hostinger hPanel Web Apps page with the Get started button for deploying a web application.\" class=\"wp-image-160025\" style=\"aspect-ratio:2.1742160278745644\" title=\"How to deploy from GitHub 3\"><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\">Before connecting the repository, choose the web address you&rsquo;ll use to access the deployed app. <\/p><p class=\"wp-block-paragraph\">You can use a domain you already own or enter a new one. Select <strong>Use temporary domain <\/strong>if you&rsquo;re not ready to connect a domain. This gives the app a Hostinger-provided address so you can deploy and test it first, then connect your own domain later.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d84591\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d84591\" 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\/10\/image-9.png\/public\" alt=\"Hostinger domain selection screen for a web app with the option to use a temporary domain.\" class=\"wp-image-160026\" style=\"aspect-ratio:2.2206405693950177\" title=\"How to deploy from GitHub - 4\"><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\">Next, choose how Hostinger should access the application code. Since our project is already on GitHub, we&rsquo;ll select <strong>Continue with GitHub<\/strong>. <\/p><p class=\"wp-block-paragraph\">Connecting the account gives Hostinger access to the repositories you authorize and sets up the connection used for future deployments.<\/p><p class=\"wp-block-paragraph\">You can also enter the GitHub URL directly without connecting an account if the repository is public. We&rsquo;ll use the account connection to test automatic deployment when new changes are pushed to GitHub.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d87b21\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d87b21\" 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\/10\/image-10.png\/public\" alt=\"Hostinger web app deployment screen with options to connect GitHub, GitLab, or enter a public repository URL.\" class=\"wp-image-160028\" style=\"aspect-ratio:2.03257328990228\" title=\"How to deploy from GitHub - 5\"><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 connecting to GitHub, select the repository that contains the application you want to deploy.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-4-configure-the-deployment-settings\">4. Configure the deployment settings<\/h2><p class=\"wp-block-paragraph\">Review the deployment settings Hostinger detects from your repository, starting with the framework and branch. The branch should contain the version of the application you want to publish.<\/p><p class=\"wp-block-paragraph\">In our case, Hostinger correctly detected Vite and selected the <code>main<\/code> branch. It also selected Node.js 22, the default version, and set the repository root (<code>.\/<\/code>) as the application directory.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d8b236\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d8b236\" class=\"aligncenter size-large is-resized 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\/10\/image-11.png\/w=1024,h=1024,fit=scale-down\" alt=\"Hostinger build settings showing Vite as the detected framework and main as the deployment branch.\" class=\"wp-image-160030\" style=\"aspect-ratio:1.1676470588235295;width:521px;height:auto\" title=\"How to deploy from GitHub 7\"><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\">For our project, Hostinger detected <code>npm run build<\/code> as the build command and <code>dist<\/code> as the output directory. Build commands are taken from the scripts in <code>package.json<\/code>, so the command you need must be defined there.<\/p><p class=\"wp-block-paragraph\">These settings match our Vite project, so we can keep them unchanged. A different React setup may use another command or output directory, so confirm the detected values against your project when<a data-click-id=\"hgr-post-content-link-in-tutorials-how-to-deploy-react-app\" aria-label=\"How to deploy react app\" href=\"\/in\/tutorials\/how-to-deploy-react-app\/\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a data-click-id=\"hgr-post-content-link-configuring-a-react-production-build\" href=\"\/in\/tutorials\/how-to-deploy-react-app\/\" data-wpel-link=\"internal\" rel=\"follow\">configuring a React production build<\/a>.<\/p><p class=\"wp-block-paragraph\">The settings also vary depending on the type of application you&rsquo;re deploying. Front-end applications typically use a build command and output directory, while back-end applications require an entry file that Hostinger uses to start the application. Full-stack applications, such as Nuxt, use both. <\/p><p class=\"wp-block-paragraph\">A Node.js back end, for instance, might use <code>src\/server.js<\/code> as its entry file, so verify how your application starts when<a data-click-id=\"hgr-post-content-link-preparing-a-node-js-project-for-production\" data-wpel-link=\"internal\" href=\"\/in\/tutorials\/deploy-node-js-application\/\" rel=\"follow\"> preparing a Node.js project for production<\/a>.<\/p><p class=\"wp-block-paragraph\">Next, review the environment variables Hostinger detected in the project. Variables that don&rsquo;t yet have a value are marked <strong>Action required<\/strong>, so you&rsquo;ll need to complete them before deploying. Enter the values individually or use <strong>Import .env<\/strong> to import them from a <code>.env<\/code> file.<\/p><p class=\"wp-block-paragraph\">Hostinger accepts environment variable names containing uppercase letters, numbers, and underscores. For example, <code>VITE_API_BASE_URL<\/code> is a valid variable name for a Vite application, while <code>API_KEY<\/code> is a valid name for a server-side variable. Rename any variables that don&rsquo;t follow Hostinger&rsquo;s naming requirements before deploying.<\/p><p class=\"wp-block-paragraph\">For our React and Vite project, variables accessed in the frontend through <code>import.meta.env<\/code> must use the <code>VITE_<\/code> prefix by default. For example, <code>VITE_API_BASE_URL<\/code> can store the public URL of an API that the application needs to contact.<\/p><p class=\"wp-block-paragraph\"><strong>Never store secrets in variables prefixed with<\/strong> <code><strong>VITE_<\/strong><\/code><strong>.<\/strong> Vite includes these values in the production JavaScript bundle, making them accessible to visitors. Private API keys, database passwords, and authentication secrets must remain on the server side. If your frontend needs to access a service that requires a private key, handle that request through a secure backend instead of exposing the key in browser code.<\/p><p class=\"wp-block-paragraph\">These precautions are an important part of <a data-click-id=\"hgr-post-content-link-protecting-sensitive-application-data\" href=\"\/in\/tutorials\/web-application-security\/\">protecting sensitive application data<\/a> when deploying a web application.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-5-deploy-the-application-and-review-the-build-logs\">5. Deploy the application and review the build logs<\/h2><p class=\"wp-block-paragraph\">Review the configuration one last time, then click <strong>Deploy<\/strong>. Hostinger builds the application from the selected GitHub branch and publishes it to the domain shown at the top of the page. A message tells you it&rsquo;s safe to leave the page if the build takes longer than expected.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d8f094\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d8f094\" 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\/10\/image-12.png\/w=1024,h=1024,fit=scale-down\" alt=\"Hostinger's Review build settings screen showing GitHub deployment configuration for a Vite project, with the Deploy button highlighted.\" class=\"wp-image-160032\" style=\"aspect-ratio:1.8299120234604105\"><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\">When the process finishes, the <strong>Deployment completed<\/strong> screen confirms that the app is live and displays its address as the App at Hostinger link.<\/p><p class=\"wp-block-paragraph\">Expand <strong>Build logs<\/strong> to see what happened during the deployment. In our case, the log confirms that the build completed, the generated files were published, and the deployment finished successfully.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d92904\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d92904\" 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\/10\/image-13.png\/w=1024,h=1024,fit=scale-down\" alt=\"Hostinger build logs showing a successful application build, publishing process, and completed deployment.\" class=\"wp-image-160034\" style=\"aspect-ratio:1.95\" title=\"How to deploy from GitHub 8\"><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\">Find the first error in the build log if a deployment fails. It shows which stage caused the failure. <\/p><p class=\"wp-block-paragraph\">Select <strong>Settings and redeploy, <\/strong>correct the setting responsible for the error, and click <strong>Save and redeploy.<\/strong> This runs the deployment again without repeating the initial setup.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-6-test-the-deployed-application\">6. Test the deployed application<\/h2><p class=\"wp-block-paragraph\">Once the deployment completes, open the app from its App at Hostinger link and test its main functionality.<\/p><p class=\"wp-block-paragraph\">Our deployed TaskFlow task management app loaded correctly, and its interactive features worked as expected. We added a new task, marked another as completed, and confirmed that the task counters updated accordingly.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d95fe1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d95fe1\" class=\"aligncenter size-large is-resized 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\/10\/image-14.png\/w=1024,h=1024,fit=scale-down\" alt=\"Deployed TaskFlow application showing four tasks and two completed tasks after testing its interactive features.\" class=\"wp-image-160036\" style=\"aspect-ratio:1.1063829787234043;width:624px;height:auto\" title=\"How to deploy from GitHub 9\"><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\">When<a data-click-id=\"hgr-post-content-link-in-tutorials-web-app-testing\" aria-label=\"Web app testing\" href=\"\/in\/tutorials\/web-app-testing\/\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a data-click-id=\"hgr-post-content-link-checking-the-app-before-making-it-public\" href=\"\/in\/tutorials\/web-app-testing\/\" data-wpel-link=\"internal\" rel=\"follow\">checking the app before making it public<\/a>, repeat the same workflows you tested locally. This helps reveal production-specific problems, such as failed API requests, missing environment variables, or assets that don&rsquo;t load correctly.<\/p><p class=\"wp-block-paragraph\">A successful build doesn&rsquo;t always mean the application runs correctly. Open <strong>Runtime logs<\/strong> in the website dashboard if the deployment completes, but the app crashes or fails to start. <\/p><p class=\"wp-block-paragraph\">Use the error messages to identify the failing part of the application, such as a missing environment variable or an incorrect entry file. Correct the problem, redeploy the application, and test the affected functionality again.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-7-verify-automatic-redeployment-from-github\">7. Verify automatic redeployment from GitHub<\/h2><p class=\"wp-block-paragraph\">After the initial deployment, changes pushed to the connected production branch automatically trigger a new deployment. To verify this, make a visible change to your application and test it locally before committing it.<\/p><p class=\"wp-block-paragraph\">We&rsquo;ll change the main heading in our TaskFlow app from <strong>Keep your work moving.<\/strong> to <strong>Plan today. Make progress.<\/strong> This gives us a clear change to look for on the live site after the next deployment.<\/p><p class=\"wp-block-paragraph\">Once your change works locally, commit it and push it to the production branch connected to Hostinger. We&rsquo;ll push our heading update to main:<\/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 add .\ngit commit -m \"Update dashboard heading\"\ngit push origin main<\/pre><p class=\"wp-block-paragraph\">Hostinger detects the new commit and automatically starts another deployment. You can follow its progress in the Web Apps dashboard, where the latest deployment shows the branch, commit, and deployment status.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d99684\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d99684\" 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\/10\/image-15.png\/w=1024,h=1024,fit=scale-down\" alt=\"Hostinger dashboard showing the new commit and Completed status\" class=\"wp-image-160037\" style=\"aspect-ratio:2.1591695501730106\" title=\"How to deploy from GitHub - 10\"><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 the deployment reaches <strong>Completed<\/strong>, open the live application. <\/p><p class=\"wp-block-paragraph\">Our TaskFlow heading now shows <strong>Plan today. Make progress.<\/strong>, confirming that the GitHub update reached the live application without a manual redeployment.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d9cb49\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d9cb49\" class=\"aligncenter size-large is-resized 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\/10\/image-16.png\/w=1024,h=1024,fit=scale-down\" alt=\"Latest deployment showing the new GitHub commit and Completed status\" class=\"wp-image-160038\" style=\"aspect-ratio:1.0452261306532664;width:624px;height:auto\" title=\"How to deploy from GitHub - image 11\"><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><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-other-ways-to-deploy-from-github\">Other ways to deploy from GitHub<\/h2><p class=\"wp-block-paragraph\">GitHub Pages publishes static files directly from a repository, GitHub Actions runs a custom deployment workflow you define, and Hostinger Connector offers an optional alternative for deploying through an AI coding assistant.<\/p><h3 class=\"wp-block-heading h-t-title-3\">GitHub Pages deployment<\/h3><p class=\"wp-block-paragraph\"><strong>GitHub Pages<\/strong> deploys static site files directly from a GitHub repository. In your repository&rsquo;s <strong>Settings &rarr; Pages<\/strong>, select <strong>Deploy from a branch<\/strong>, then choose the branch and folder containing the files you want to publish.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622d9fffc\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622d9fffc\" 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\/10\/image-17.png\/w=1024,h=1024,fit=scale-down\" alt=\"GitHub Pages configured to deploy from the main branch and \/(root) directory\" class=\"wp-image-160040\" style=\"aspect-ratio:2.0730897009966776\" title=\"How to deploy from GitHub - 13\"><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\">GitHub Pages hosts static files, making it suitable for portfolios, documentation, and simple HTML websites. It doesn&rsquo;t provide the server-side runtime needed by backend applications.<\/p><p class=\"wp-block-paragraph\">For projects built with Vite or another framework requiring compilation, you must publish the generated production files rather than the original source code. You can use GitHub Actions to run the build and deploy the output directory, such as <code>dist<\/code>, to GitHub Pages.<\/p><h3 class=\"wp-block-heading h-t-title-3\">GitHub Actions deployment<\/h3><p class=\"wp-block-paragraph\"><strong>GitHub Actions<\/strong> gives you control over the steps that run between pushing code and deploying it. <\/p><p class=\"wp-block-paragraph\">Create a workflow file in <code>.github\/workflows<\/code> and define its trigger and jobs. Use the workflow to run tests or build commands first, then start the deployment only after those jobs succeed.<\/p><p class=\"wp-block-paragraph\">In our example, pushing a commit to <code>main<\/code> triggered a workflow with two jobs. The <code>test<\/code> job ran first, and the <code>deploy<\/code> job started only after it succeeded.<\/p><p class=\"wp-block-paragraph\">The workflow run shows the status of each job, making it easier to see where a deployment succeeds or fails.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622da3288\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622da3288\" 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\/10\/image-18.png\/w=1024,h=1024,fit=scale-down\" alt=\"GitHub Actions custom workflow showing successful test and deploy jobs triggered by a push to the main branch.\" class=\"wp-image-160041\" style=\"aspect-ratio:2.0869565217391304\" title=\"How to deploy from GitHub - 13\"><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><h3 class=\"wp-block-heading h-t-title-3\">Hostinger Connector deployment<\/h3><p class=\"wp-block-paragraph\">Hostinger Connector brings deployment into a supported AI coding assistant, so you can deploy the project you&rsquo;re working on directly from your development environment.<\/p><p class=\"wp-block-paragraph\">After installing the Connector in VS Code, connect your Hostinger account through OAuth. This gives the coding assistant access to the Hostinger tools you authorize for deployment and other hosting operations.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622da6504\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622da6504\" 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\/10\/image-19.png\/w=1024,h=1024,fit=scale-down\" alt=\"Hostinger Connector in VS Code connected to a Hostinger account through OAuth.\" class=\"wp-image-160042\" style=\"aspect-ratio:1.5561097256857854\" title=\"How to deploy from GitHub - 15\"><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\">Deployment then starts with a prompt. We asked GitHub Copilot to deploy the project in our current workspace as a new web application with a temporary domain. <\/p><p class=\"wp-block-paragraph\">We didn&rsquo;t have to configure the deployment in the Hostinger dashboard or write a deployment workflow. Copilot prepared the project and used <a data-click-id=\"hgr-post-content-link-hostinger-connector\" href=\"\/in\/connector\" data-wpel-link=\"internal\" rel=\"follow\">Hostinger Connector<\/a> to create the site, with VS Code asking us to approve the Hostinger tools it needed along the way.<\/p><p class=\"wp-block-paragraph\">Once the deployment finished, Copilot returned the new <code>hostingersite.com<\/code> address in the chat and verified that the live page returned an HTTP 200 response with the expected content.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622da98f4\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622da98f4\" class=\"aligncenter size-large is-resized 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\/10\/image-20.png\/w=1024,h=1024,fit=scale-down\" alt=\"Copilot confirming the successful deployment and temporary Hostinger URL\" class=\"wp-image-160043\" style=\"aspect-ratio:1.1122994652406417;width:624px;height:auto\" title=\"How to deploy from GitHub - 16\"><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><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-connect-a-custom-domain-to-your-web-app\">Connect a custom domain to your web app<\/h2><p class=\"wp-block-paragraph\">To replace the temporary Hostinger address, open your web app in the Hostinger dashboard and click <strong>Connect domain<\/strong>.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6ad7622dacf19\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad7622dacf19\" 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\/10\/image-21.png\/w=1024,h=1024,fit=scale-down\" alt=\"Web Apps dashboard showing the temporary domain and Connect domain button.\" class=\"wp-image-160044\" style=\"aspect-ratio:1.9936102236421724\" title=\"How to deploy from GitHub - 12\"><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\">Enter the domain you want to use and complete the connection. The exact process for<a data-click-id=\"hgr-post-content-link-in-tutorials-connect-custom-domain-to-web-app\" aria-label=\"Connect custom domain to web app\" href=\"\/in\/tutorials\/connect-custom-domain-to-web-app\/\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a data-click-id=\"hgr-post-content-link-connecting-a-custom-domain-to-your-web-app\" href=\"\/in\/tutorials\/connect-custom-domain-to-web-app\/\" data-wpel-link=\"internal\" rel=\"follow\">connecting a custom domain to your web app<\/a> depends on where the domain and its DNS are managed. Domains hosted outside Hostinger may require additional DNS changes.<\/p><p class=\"wp-block-paragraph\">Once the domain is connected, open the new URL and test the application again before sharing it with users.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To deploy from GitHub, prepare your application repository for production, connect it to a hosting platform, select the branch you want to publish, and configure the platform&rsquo;s build settings for deployment. We&rsquo;ll use Hostinger Web Apps Hosting to put this process into practice with a React and Vite application, from connecting the repository to getting [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/in\/tutorials\/how-to-deploy-from-github\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":530,"featured_media":140177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to deploy from GitHub in 7 steps","rank_math_description":"Learn how to deploy from GitHub step by step, from preparing your repository and connecting your server to configuring and testing your deployment.","rank_math_focus_keyword":"how to deploy from github","footnotes":""},"categories":[22665],"tags":[],"class_list":["post-140153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-app"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-deploy-from-github","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-deploy-from-github","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-deploy-from-github","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-deploy-from-github","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-deploy-from-github","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-deploy-from-github","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-deploy-from-github","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-deploy-from-github","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/140153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/users\/530"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/comments?post=140153"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/140153\/revisions"}],"predecessor-version":[{"id":140176,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/140153\/revisions\/140176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/media\/140177"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/media?parent=140153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/categories?post=140153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/tags?post=140153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}