Saturday 17 November 2012

Managing website's content via GitHub edits (which are auto-committed and push into AppHarbor)

Based on the test site created by TM Fork into stand-alone Sales and Marketing site , here is an example of how to can manage the content of that 'AppHarbor published site' using GitHub

Here is the workflow that is going to be shown below:
  • Edit a file in a GitHub Repository (using GitHub's website edit interface)
  • Save it (which GitHub will auto-create a Commit with the changes)
  • The Commit will trigger a build request to AppHarbor
  • AppHarbor will receive the request and do a Git Pull from GitHub
  • Once the new code is pulled, AppHarbor will build it
  • And if the build is successful, AppHarbor will deploy the built files into to a live server

What is really powerful is that apart from the first two steps (edit and save the file), the rest is all automatic. And for small changes, this workflow can take less than 1 minute :)

To see this in action, lets look at two examples.

Example #1: Editing a page

Before any changes, the TM Eval page on the looks like this:

Here is the GitHub page for this TM Article (the file is called 7e92f253-192a-40fd-80dc-c7a6dfc289c3.xml)

Click on the 'Edit' button

And change the Title:

Save changes

On save, GitHub will create an commit, which will trigger a new build at AppHarbor

Since the build was successful, the new version of the site (with the content change) was published to the live server:

Note that we can also edit this page online, by going to the page, which if the user is not logged in, will redirect to the login page:

After login the TM 'Notepad' editor GUI is shown:

Which can be used to remove the content change (previously done in GitHub)

If we save the content and click on the 'View Article' button

we will get the

Which is the same as

The reason it looks like that, is because the default view (and redirect from the Notepad editor) is the normal TM Html transformation page.

But since the Eval page is actually written in XML (to make it easier for SI Marketing team to edit it)

We need to see the page using the link

This xml request (that happens on urls of the type http://{tmsite}/xml/{article title or GUID} ) results in the TM Article content to be sent to the browser as XML.

The browser when loading that page, will see the <?xml-stylesheet reference, also fetch the /xslt/Customer_and_Eval.xslt page

Which is used to render the page (i.e. this html page was created by an XML+XSL transformation)

Example #2: Making the site default to SSL

Since AppHarbor supports SSL by default (on, we can change TM to automatically redirect all HTTP requests into HTTPS

This is done on the TmConfig.config file:

Which we can edit online:

And change the value of the SSL_RedirectHttpToHttps setting to true

On save (i.e. Commit Changes)

AppHarbor will be notified and a new build will occour

With the whole build+publish process taking less than 1m :)


After the change, if we go into, we will get this error:

Which was caused by the fact that when TM redirected the request, it failed to take into account the internal proxying that is happening at AppHarbor's servers/network (since internally the request is to an internal IP on port 15777)

Ok, so we can't have this SSL redirect happening on AppHarbor, so lets go back to GitHub, and change the value of SSL_RedirectHttpToHttps to false:

This (after commit+hook+pull+build+deploy) will restore the previous behavior (with http and https working based on direct requests)

Finally, a quick look at the GitHub Commit history will show the commits made using GitHub's web interface (the last 3)