How to deploy from GitHub

To deploy from GitHub, prepared your use repository for production, nexus it to a hosting platform, choose the branch you desire to publish, and configure the platform’s build settings for deployment.

We’ll use Hostinger Web Apps Hosting to put this procedure into custom alongside a React and Vite application, from connecting the repository to getting the app live and keeping it updated through GitHub.

1. Prepare your GitHub repository

First, run the use locally and test its chief functionality. A operating local type makes deployment problems easier to isolate. An error that already appears locally isn’t caused by the hosting environment.

Next, inspect that your project includes the configuration records required by its framework. Our React project uses Vite and includes a package.json document that defines its requirements and accessible scripts.

Make certain package.json includes the manufacturing build manuscript your use needs.

Hostinger doesn’t let you category a build command. Instead, you choose it from a dropdown of the scripts defined in this file, so you can’t choose a manuscript that isn’t there.

In our Vite project, the applicable manuscript is:

"scripts": { "build": "vite build" }

This makes npm run build accessible as the build command whenever configuring the use on Hostinger.

For a project that isn’t already tracked alongside Git, open its directory in the terminal and initialize a repository:

git init

Before staging the project files, open the .gitignore document in the project’s base directory. Check that it lists records and directories Git shouldn’t track.

In our Vite project, node_modules is already listed in .gitignore, so locally installed requirements won’t be added to the repository.

The entries you need depend on your example and betterment environment. Many project setup tools automatically create a .gitignore file. Create a document named .gitignore in the project’s base directory if your project doesn’t contain one.

Place it alongside records specified as package.json, and catalog all document or directory Git should disregard on a distinct line:

node_modules dist .env

Check your framework’s records for its recommended exclusions before committing the project.

Keep delicate values specified as API keys and credentials out of the repository as well. You’ll add the values the deployed use needs as surroundings variables during deployment.

Once you’ve confirmed which records Git volition include, phase the project and create a commit:

git add . git commit -m "Initial commit"

This commit is the type you’ll shove to GitHub. As you update the application, managing commits, branches, and distant repositories becomes part of your regular workflow.

Next, create an bare repository on GitHub. Don’t initialize it alongside records specified as README.md or .gitignore if those records already be in your local project.

Connect your local repository to the GitHub repository:

git distant add base https://github.com/USERNAME/REPOSITORY.git

Replace USERNAME and REPOSITORY alongside your GitHub username and repository name.

Push the branch containing the production-ready use to GitHub. For the chief branch, run:

git shove -u base main

Your branch may be named expert or item else. Check the name alongside git branch, afterward substitute chief in the command complete alongside your branch name.

Remember which branch you shove since you’ll choose it as the manufacturing branch whenever configuring the deployment.

When you run git shove alongside an HTTPS GitHub URL, GitHub asks you to verify your identity. You can’t use your normal GitHub password for this. Authenticate alongside a supported method instead, specified as a individual admission token (PAT).

Finally, open the repository on GitHub and verify that the latest project records are present.

2. Choose a deployment method

Choose a deployment method that supports your application’s framework, runtime, and asset requirements.

For this tutorial, we’ll use Hostinger Web Apps Hosting to deploy the use immediately from its GitHub repository. Hostinger retrieves the code, builds the application, and runs it on managed infrastructure, so you don’t need to configure a server or create a tradition uninterrupted integration and uninterrupted deployment (CI/CD) pipeline.

Applications that run server-side code necessitate a particular runtime and frequently additional server resources. Account for these needs when choosing the correct surroundings for your app.

3. Connect your GitHub repository to Hostinger

In the Hostinger dashboard, go to Websites → Web Apps. This opens the Web Apps deployment area, anywhere you can nexus a GitHub or GitLab repository or upload the use as a ZIP file.

For a GitHub deployment, click Get started.

Before connecting the repository, choose the web location you’ll use to admission the deployed app.

You can use a domain you already own or act a new one. Select Use impermanent domain if you’re not prepared to nexus a domain. This gives the app a Hostinger-provided location so you can deploy and test it first, afterward nexus your own domain later.

Next, choose how Hostinger should admission the use code. Since our project is already on GitHub, we’ll choose Continue alongside GitHub.

Connecting the document gives Hostinger admission to the repositories you authorize and sets up the association used for forthcoming deployments.

You can additionally act the GitHub URL immediately without connecting an document if the repository is public. We’ll use the document association to test automatic deployment whenever new changes are pushed to GitHub.

After connecting to GitHub, choose the repository that contains the use you desire to deploy.

4. Configure the deployment settings

Review the deployment settings Hostinger detects from your repository, starting alongside the example and branch. The branch should merge the type of the use you desire to publish.

In our case, Hostinger correctly detected Vite and selected the chief branch. It additionally selected Node.js 22, the default version, and set the repository base (./) as the use directory.

For our project, Hostinger detected npm run build as the build command and dist as the output directory. Build commands are taken from the scripts in package.json, so the command you need must be defined there.

These settings equivalent our Vite project, so we can keep them unchanged. A distinct React setup may use another command or output directory, so verify the detected values against your project when configuring a React manufacturing build.

The settings additionally change depending on the category of use you’re deploying. Front-end applications typically use a build command and output directory, during back-end applications necessitate an admission document that Hostinger uses to commencement the application. Full-stack applications, specified as Nuxt, use both.

A Node.js rear end, for instance, power use src/server.js as its admission file, so verify how your use starts when preparing a Node.js project for production.

Next, assessment the surroundings variables Hostinger detected in the project. Variables that don’t yet have a value are marked Action required, so you’ll need to complete them before deploying. Enter the values individually or use Import .env to import them from a .env file.

Hostinger accepts changeable names containing uppercase letters, numbers, and underscores, specified as API_KEY. Rename any variables that don’t prosecute this format. Otherwise, the Deploy clasp stays grayed out, and you can’t continue alongside the deployment.

Before adding a value, regard anywhere the use uses it. In front-end applications, variables used during the build are included in the code delivered to the browser, allowing visitors to admission them.

To protect delicate use data, don’t disclose personal API keys, credentials, or another secrets through client-side code.

5. Deploy the use and assessment the build logs

Review the configuration one final time, afterward click Deploy. Hostinger builds the use from the selected GitHub branch and publishes it to the domain shown at the top of the page. A communication tells you it’s harmless to depart the leaf if the build takes longer than expected.

When the procedure finishes, the Deployment completed display confirms that the app is live and displays its location as the App at Hostinger link.

Expand Build logs to see what happened during the deployment. In our case, the log confirms that the build completed, the generated records were published, and the deployment completed successfully.

Find the archetypal error in the build log if a deployment fails. It shows which phase caused the failure.

Select Settings and redeploy, correct the environment liable for the error, and click Save and redeploy. This runs the deployment again without repeating the first setup.

6. Test the deployed application

Once the deployment completes, open the app from its App at Hostinger nexus and test its chief functionality.

Our deployed TaskFlow project administration app loaded correctly, and its interactive features worked as expected. We added a new task, marked another as completed, and confirmed that the project counters updated accordingly.

When checking the app before making it public, reiterate the identical workflows you tested locally. This helps disclose production-specific problems, specified as unsuccessful API requests, missing surroundings variables, or resources that don’t burden correctly.

A prosperous build doesn’t continually average the use runs correctly. Open Runtime logs in the website dashboard if the deployment completes, but the app crashes or fails to start.

Use the error messages to acknowledge the failing part of the application, specified as a missing surroundings changeable or an incorrect admission file. Correct the problem, redeploy the application, and test the affected functionality again.

7. Verify automatic redeployment from GitHub

After the first deployment, changes pushed to the connected manufacturing branch automatically trigger a new deployment. To verify this, create a apparent alter to your use and test it locally before committing it.

We’ll alter the chief heading in our TaskFlow app from Keep your activity moving. to Plan today. Make progress. This gives us a apparent alter to appearance for on the live location following the next deployment.

Once your alter plant locally, commit it and shove it to the manufacturing branch connected to Hostinger. We’ll shove our heading update to main:

git add . git commit -m "Update dashboard heading" git shove base main

Hostinger detects the new commit and automatically starts another deployment. You can prosecute its advancement in the Web Apps dashboard, anywhere the latest deployment shows the branch, commit, and deployment status.

After the deployment reaches Completed, open the live application.

Our TaskFlow heading now shows Plan today. Make progress., confirming that the GitHub update reached the live use without a manual redeployment.

Other ways to deploy from GitHub

GitHub Pages publishes fixed records immediately from a repository, GitHub Actions runs a tradition deployment workflow you define, and Hostinger Connector offers an optional substitute for deploying through an AI coding assistant.

GitHub Pages deployment

GitHub Pages deploys fixed location records immediately from a GitHub repository. In your repository’s Settings → Pages, choose Deploy from a branch, afterward choose the branch and directory containing the records you desire to publish.

GitHub builds and publishes the location from the selected source. This deployment method is suitable for fixed projects and doesn’t provision the server-side runtime required by back-end applications.

GitHub Actions deployment

GitHub Actions gives you authority complete the steps that run between pushing code and deploying it.

Create a workflow document in .github/workflows and define its trigger and jobs. Use the workflow to run tests or build commands first, afterward commencement the deployment lone following those jobs succeed.

In our example, pushing a commit to chief triggered a workflow alongside two jobs. The test job ran first, and the deploy job started lone following it succeeded.

The workflow run shows the position of all job, making it easier to see anywhere a deployment succeeds or fails.

Hostinger Connector deployment

Hostinger Connector brings deployment into a supported AI coding assistant, so you can deploy the project you’re operating on immediately from your betterment environment.

After installing the Connector in VS Code, nexus your Hostinger document through OAuth. This gives the coding aide admission to the Hostinger tools you authorize for deployment and another hosting operations.

Deployment afterward starts alongside a prompt. We asked GitHub Copilot to deploy the project in our current workspace as a new web use alongside a impermanent domain.

We didn’t have to configure the deployment in the Hostinger dashboard or compose a deployment workflow. Copilot prepared the project and used Hostinger Connector to create the site, alongside VS Code asking us to endorse the Hostinger tools it needed alongside the way.

Once the deployment finished, Copilot returned the new hostingersite.com location in the conversation and verified that the live leaf returned an HTTP 200 reply alongside the expected content.

Connect a tradition domain to your web app

To substitute the impermanent Hostinger address, open your web app in the Hostinger dashboard and click Connect domain.

Enter the domain you desire to use and complete the connection. The exact procedure for connecting a tradition domain to your web app depends on anywhere the domain and its DNS are managed. Domains hosted exterior Hostinger may necessitate additional DNS changes.

Once the domain is connected, open the new URL and test the use again before sharing it alongside users.

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