How to update a custom site in BlueHost with Git and GitHub WebHooks

This guide assumes that you have a decent understanding of git and are using GitHub. It also is specific towards BlueHost’s shared plan , but should apply to just about any shared hosting provider that lets you SSH into your server. If you are using a hosting provider that does not let you SSH into your server you may need to upgrade to a private sever (VPS).

The Problem

I’ve recently inherited a codebase from a client, serving as their website maintenance guy. Unfortunately, the codebase was setup in a fairly old school fashion and was very unproductive to publish new changes to the website. For starters, the website is a raw implementation using HTML, CSS, JavaScript, and PHP. While I love developing custom solutions, for the client’s needs, he would have been better off with a solution like WordPress. Now, I’m a firm believer that the proposed solution should depend entirely on the client’s needs. For example, I go over why WordPress may not be the right choice and why it would be an ideal choice in some of my other stories.

But back to the topic at hand! In addition to not being what I believed to be the right solution, developing within it was cumbersome. I had to pull down all the files, setup an FTP, and upload / download files constantly to publish new changes. After a few hours of this, I decided in this modern day and age this was not going to work for me.

The Solution

One of the greatest technologies that was introduced by the great Linus Torvalds was Git. I love Git.

In my day job, I’m a full stack engineer and I use Git constantly. This solution might not work for everybody depending on their acquired skills, but if you already use Git extensively or are willing to learn it (because it’s amazing), this workflow may make your life easier if your dealing with a similar problem.

I’m going to show you how to setup your BlueHost website and local development in such a way that, whenever you push to your git repository, the server in BlueHost will automatically pull the latest changes, therefore updating the live website almost instantly. The example I’m going to show is for BlueHost in a shared hosting plan but the instructions should be very similar for other shared hosting plans (if they offer SSH).

Step 1 — Get Access to BlueHost, and enable SSH

The first step is pretty straightforward. In order to actually get any of this working, your hosting provider needs be able to allow you to use SSH. Fortunately BlueHost offers SSH even for their shared plans.

You’ll want to go to your BlueHost Advanced Settings first and check if SSH is enabled here in SSH Access:

Now, most likely you do not have this enabled. I did see that I could download and access the SSH keys, however when I connected it said SSH is not enabled. So in order to enable this, at least on BlueHost, is through talking through a representative. Just ask them if they can enable SSH on the account and it should take ~ 5 minutes.

Step 2 — Connect to the server with PuTTY

Next, you’ll need to establish a connection to the server through SSH. You’ll need the SSH token in order to this. You can grab that by going to Advanced Settings -> SSH Access and click View / Download on the private key that is available. The easiest way for me was to download the PPK file here:

You just need to enter your BlueHost password. After hitting convert, you will receive key file in .ppk format. I used PuTTY to connect with SSH, so all I had to do was double click the file and it added it to my list of keys in Pageant.

Once you have the key installed, open up PuTTY or any other SSH tool. And enter your site information like so:

• *note** since this was a shared server, I needed to connect with port 2222. If you are using a private host, you can connect with port 22.

Finally, click “Open” and it should establish a connect and ask for the user. Enter the username for the account (this will be on the right sidebar of your cPanel). Since you already have the key installed in your computer, it won’t ask for a password and will use that to validate and connect you.

Step 3 — Initialize a Git Repository

Now we’re getting somewhere! Once you are in the server, navigate to your projects main files. For me this was in public_html. Once you’ve navigated there e.g. cd public_html , you need to initialize it as a Git repository. You can do this by typing:

git init

Step 4 — Create the Repository in GitHub

Now that you’ve initialized the repo, you’ll need to create one in GitHub and have it point to it. Do this by logging into GitHub and creating a new repository. Then grab the repository’s URL.

Step 5 — Point your server’s initialized repository to your GitHub Repo

Now your server needs to know where to pull the latest changes. You can do this by executing the following command in the root of your project directory (where you initialized):

git remote set-url origin git@github.com:username/repo-name.git

Now your server can pull changes from your GitHub repository! At this point you already have a pretty decent workflow. You can “git pull” the code locally to your machine, use something like XAMPP to run it locally, and push new changes to your GitHub repository. Then you can SSH into your server and “git pull” those changes and it should reflect almost immediately.

git pull

But what if we can do one better?

Optional: Have the server automatically pull changes from the GitHub repository

This last part is optional, but I HIGHLY recommend it to make things even more productive. I’m going to show you how to have the server pull the latest changes automatically, so you rarely need to SSH back into that server to publish new changes.

First you will to create a file at the root of the project directory and call it something like “pull.php”. In this file, put in some code that will execute a git pull command in the server like so:

<?php
// Use in the “Post-Receive URLs” section of your GitHub repo.
if ( $_POST['payload'] ) {
   shell_exec('cd ~/public_html && git pull');
}

Then push up this file to your repo, and pull it in your server. This is important, the server needs to have this file present for the GitHub Webhook to work.

Finally, Go to your GitHub repository -> Settings -> Webhooks.

Add a new Webhook with the default settings and set the url to

https://your-site/pull.php

Then save the webhook. And Voila! The server should pull newest changes to the GitHub repo automatically. This means all you have to do to update your website is push changes to your repository.

Summary

I hope this was able to help others who are in a similar situation. It has made developing the website much more efficient for me with my background in development. I realize this is a pretty specific thing, but really wanted to share in case others are struggling with this. If you run into any issues yourself, please feel free to reach out to me at lorenzanamarcus@gmail.com. Thank you!