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?
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.
On successful creation, you will able to see the information on the Manage repository.
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.
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.
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)
can I deploy next js application with same steps?
I'd like to know this too
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.
Can you help? I am getting success 200 response for auto deploy, but changes are not being deployed.
Thanks, the article helped me.
Glad that the article helped you.