GitHub, Triggered Deployments, and In-Browser Editing : Silverlight Feeds

GitHub, Triggered Deployments, and In-Browser Editing

by Jeff Handley via Jeff Handley on 10/25/2011 7:01:40 AM

Earlier this month, I explored using WebMatrix, Git, and AppHarbor to quickly create and publish a web site in the cloud. While at work this afternoon I got a phone call from a relative with a usability issue on the site. To fix the issue, I simply needed to wrap a hyperlink around an image, but I only had about 60 seconds to spare, which wasn’t enough time. Here’s what I would have needed to do:

Open up a command prompt and cd into D:\github
git clone https://jeffhandley@appharbor.com/xanderhandley.git
Open the offending cshtml file, make the edit
git commit –am "Made the popcorn site image a hyperlink"
git push https://jeffhandley@appharbor.com/xanderhandley.git

Okay, so in retrospect it would have only taken about 120 seconds to do, but at that moment, I didn’t think I could do it in the minute I had to spare. I am going to use this opportunity to introduce GitHub into my workflow and be prepared for these kinds of adjustments should they arise again.

GitHub

I will describe GitHub by quoting their own site:

GitHub is the best way to collaborate with others. Fork, send pull requests and manage all your public and private git repositories.

It’s also a nice and free place to clone my repositories in the cloud so that I don’t have to worry about backups and whatnot. And honestly, it’s kind of a “central” repository for distributed version control. Don’t hate–you know you think of it that way too.

When I first created and published my son’s popcorn site though, GitHub wasn’t needed in the workflow. Instead, I just went directly from my PC to the cloud. But with today’s episode, I needed to be able to get the latest version of the code on my work computer. I wanted a central repository, and starting tonight, GitHub will serve that purpose. Here’s how:

Go to http://github.com and sign up / log in
Create a New Repository
On my home PC, where my existing repository is for the project, open a command window
git remote add origin https://jeffhandley@github.com/jeffhandley/XanderHandley.git
git push –u origin master

I now have my repository cloned up in GitHub and I can push changes to it. But just like with regular expressions, now I have two problems. When I want to deploy an update to the website, I need to get the updates to both GitHub and AppHarbor.

Triggered Deployments

Fortunately, GitHub has a feature that turns the two problems (of pushing to both GitHub and AppHarbor) back into 1 problem. I can configure a Service Hook in GitHub such that any time I push an update to GitHub, the changes are also automatically pushed to AppHarbor.

Here’s how to do it:

On GitHub, while viewing the files for your repository, click on the “Admin” button at the top
Click on “Service Hooks” on the left
Select AppHarbor
Open a new tab in your browser and go load up your AppHarbor application
Under where AppHarbor shows your Repository URL, you’ll see a link next to “Create build URL” – click that to see your build URL
Paste the Application Slug and Token into the AppHarbor Service Hooks configuration in GitHub as they explain, make the hook Active, and click Update Settings

The GitHub repository is now set up so that any push into my master branch on GitHub will also push to AppHarbor. To verify this, I just went through the following steps:

Opened the website on my home PC
Made the change, adding the hyperlink
Opened a command prompt where the website files are
git commit –am "Made the popcorn site image a hyperlink"
git push origin master

I then refreshed github and saw the commit listed there. Then I went over to AppHarbor and refreshed and saw the commit there too. Then I went to http://xanderhandley.com/popcorn and refreshed and saw the new hyperlink.

In-Browser Editing

With all of this magic awesomeness, I was thinking it couldn’t be any easier to edit Xander’s website. But sure it can. Now that I have GitHub and AppHarbor connected, I can utilize another goodie that GitHub has to offer: in-browser editing. GitHub allows you to edit files directly in the browser; just browse to a file and click on the “Edit this file” button. You’ll get a text editor in the browser, along with a commit message box and a “Commit Changes” button. That’s right, you can make single-file edits directly in the browser and commit them to your repository in GitHub. After committing, the service hook we configured will be executed, and the change will be deployed to AppHarbor immediately.

I just exercised this capability by editing default.cshtml, adding a “This page intentionally left blank” message to it, and committing the change. Within seconds, that change was deployed to xanderhandley.com. I now have an in-browser editor of my son’s website such that any changes I commit are immediately deployed to the cloud. This certainly isn’t a routine I’d use for a business website or anything remotely complicated, but for my son’s website, this is perfect. And it’s free.