My Portfolio With Jalbum and Google App Engine

I've found that it is possible to publish a gallery or portfolio on Google app engine using the simple gallery utility called Jalbum. This post will share my recent adventure in publishing just such a portfolio. As a side note, this post is also an opportunity for me to test out my newly installed copy of MacSpeech Dictate - I'll share more on that program in a future post.

I set out to publish a portfolio of my work.  Now, I've built a content management system or two over the years (hasn't everyone?). Most recently is Comicaster. The problem is none of the solutions I currently use met my need of publishing a portfolio of images and screen captures with descriptive text.  Images and text about my consulting in user interface design, development, and user experience.

First, I considered using Flickr or Picasa but decided not to because of the lack of control in how the gallery of images would be presented.  Then I considered customizing Comicaster but decided I do not have the time, right now, to plan and develop gallery module.  Next, I considered using Posterous or Tumblr as each of them has a great gallery built into a blog post feature, but neither would organize in a way that fit how I wanted to group the sections of my portfolio's gallery.

After mind melding with the good old Google machine I came across a utility called Jalbum. In a nutshell, it lets you take a list of images or directories (with images in them) and export HTML plus JavaScript-based gallery. After some initial research and playing around with Jalbum - I decided to give it a serious shot.

Through my exploration of these different tool options, I have come to realize that the kind of portfolio I want to publish is an island of stuff that potential clients can explore.  An island of content as opposed to a log of activities.  Additionally, I know I will want to update the portfolio - keep it current, and as such, would like to avoid a lot of manual effort.    Therefore, I needed to make sure the utility I chose would allow for simple updates and republishing of my portfolio.

In recent months I've migrated off of my traditional web hosting in favor of using Google app engine. This works for me on a few levels, one being very low cost and another is that it's a Python-based server environment.  Google app engine is awesome for me but in this case it brings a small complication. No I'm not speaking of the custom tool you need to use to upload files to your Google app engine instance.  It's that you need to list the specific files and folders that you wish to be accessible to the people visiting your web presence. Off-hand I think this is a fantastic idea. A white-list approach makes a lot of sense when you're trying to run a tight ship in what URLs you expose for your application. However, when you just want to post a simple static website such as the one generated by Jalbum this tightened down approach can cause problems.

The problem is subtle but familiar if you've coded HTML by hand. When you include an image or a reference to any file such as JavaScript or CSS, you use a URL that can be relative to the current folder, relative to the root of your site, or fully qualified to the entire domain in which your site resides. Here is where the conflict between Google app engine's default setup and the kind of output that Jalbum has collide.  Jalbum outputs URLs that are relative to the current folder. Adding the index.html page from that output to your app.YAML file for your Google App Engine instance will allow you to access it. However all the links inside will be broken, none of the images will show, and the CSS files won't download. This is because the Jalbum output assumes it will be addressed as a URL in the same way that it's being stored. Two ways that you can fix this are:

1) Get the Jalbum template to output URLs that are relative to the root of the site so they are caught by the white list in app.YAML. 

or

2) Get Google app engine to behave more like a traditional Web server so that a request for the portfolios index.html page works and the subsequent URLs are no longer broken.

A side note regarding the difference in file organization and URLs: One way to look at how Google app engine deals with the files you upload is to think of physical storage separate from logical storage. Physical storage is where you put your file within your project.  You know it will upload to a similar place when you send it to your Google app engine instance. The logical storage is how that file is addressed from the outside. This kind of mapping can be done in other web hosting arrangements but with Google app engine it's not an optional thing, it's something you have to manage.

So how did I fix it? Well, I made a change to the instance of Comicaster that I use on the 'work in progress' stenzingersoftware.appspot.com site. Comicaster has features that are powered by a custom URL handler. In a nutshell, I made a custom URL handler for the portfolio folder that was based on the one I built for theme assets. It makes the portfolio folder of static content work like it would on a traditional Web server.

Perhaps that's a generic feature I can add to Comicaster or perhaps that's a small piece of source code to publish separately... any interest?