DEV Community

Cover image for Auto Deployment Of Website With Github and Hostinger
B Kanhu Charan
B Kanhu Charan

Posted on • Edited on

Auto Deployment Of Website With Github and Hostinger

Creating a website? You might know the hassle of zipping the build folder, uploading via FTP to Web Server, extracting the folder. And repeating it every time whenever you made changes to the website. It's a time-consuming process. Isn't? So let's make it Automated.

Note: For Automated deployment, As webserver here, I'm using Hostinger, and Github to host my code. Let's begin.

First of all, create a public repository on Github, make it public. And upload website content to it.

After that Login to your Hostinger account. Go to the Hosting tab, Choose the website in which you want to perform the automatic deployment. Click the Manage button.

Scroll down to Advanced Section and choose Git.

Enter the details in the Create a New Repository section. what details did you ask?
Alt Text
Well on the Repository field put the git repository link which we created earlier. On Branch put the name of the branch. By default, it was used to be the master branch. but now Github using main as the default branch. if you not sure about your branch name open the GitHub repository and check the branch name. And the Directory field, leave it blanks. So your website will be deployed to the root folder (/public_html). Now click Create button.
Alt Text
On successful creation, you will able to see the information on the Manage repository.
Alt Text
After that Click the Auto Deployment button. Once you clicked a window will pop up on the screen. You might be wondering what it this, well we need to set up a webhook in the Github repository.
Alt Text

The popup windows have the webhook URL. Copy the webhook URL from that window, and open the Github repository. Go to the setting tab of the repository, Select Webhooks in the left side panel. Click on Add Webhook.

Or you can simply click the 2nd URL on that popup window which says Set up webhook on Github.

It will directly bring you to the webhook page on the GitHub repository.
Alt Text
Once you there, paste the webhook URL which you copied earlier into the Payload URL field on Github, and the content-type: x-www-form-urlencoded.

Select “Just the push event” in the Which events would you like to trigger this webhook? section. Select “Active”. And click Add Webhook.

That’s all folks. Automatic deployment of the website is complete.

Top comments (6)

Collapse
 
kumard3 profile image
Kumar Deepanshu

can I deploy next js application with same steps?

Collapse
 
jolomitee profile image
Taiwo Jolomi

I'd like to know this too

Collapse
 
bkanhu profile image
B Kanhu Charan

This method is to deploy a static website/ PHP website. To host the Next.JS website you need a VPS Server. Or You can try hosting on a Free platform like Netlify for the front end and Render for the back end.

Collapse
 
guryashzone profile image
Guryash Singh

Can you help? I am getting success 200 response for auto deploy, but changes are not being deployed.

Collapse
 
ifelseolga profile image
Olga Lapovsky

Thanks, the article helped me.

Collapse
 
bkanhu profile image
B Kanhu Charan

Glad that the article helped you.