Since I was a young boy I've been fascinated by historical photos of familiar places, or hearing older relatives recount stories of long-forgotten landmarks and infrastructure. When I moved to San Francisco I noticed lots of strange details in the city that seemed out of place, or that they belonged to a different time.

Urban Scars started as an excuse to get to the bottom of all of these paved-over rails, weird gorges between buildings, and ramps that lead nowhere. But it also served as a chance to do some long-form writing, of which I'd not had much practice since leaving college. It also proved to be a nice opportunity to prototype producing a magazine-style website without a full-fledged CMS, using just a simple Python script and generating static content ready to be hosted on Github Pages.

The site's source repository consists of articles written in ReStructuredText that reference JPEG photos, jinja2 templates for the HTML, and SASS stylesheets for presentation. A simple Python script -- which was sadly more evolved than designed -- then turns that into a set of static HTML, CSS and JPEG files and writes the result into a git commit ready to be pushed to GitHub Pages.

The Python library dulwich provides an implementation of Git plumbing wrapped in a Pythonic API. I further wrapped this in a simple function to turn a tree of Python dictionaries into a nested Git tree structure, which made it really easy to produce the site at the expense of forcing the whole thing to be buffered temporarily in memory.

The result is a really lightweight preprocessor tailored exactly to the needs of this site. While I could have built this on top of a full-fledged CMS like Drupal, I think we often end up spending more time adapting an existing jack-of-all-trades tool than we would just writing something simple from scratch. It is of course important not to over-apply this principle, lest you start to exhibit not invented here syndrome, but a personal project like this is a great opportunity to give something like this a try without the risk of burdening others with maintenence bother down the line.

Finally, this site was my first experiment with responsive design. It has a condensed presentation for screens that are too narrow for the fixed-width layout, and a further presentation intended for low-resolution smartphones that sacrifices whitespace for better use of the small screen. The small sizes also sacrifice the space I alotted to a hypothetical ad unit, but in practice I've not yet used that space anyway.

I also adapted the code that generates Urban Scars to produce this portfolio site. So far it's a fork rather than proper code reuse, but at some point I may be motivated to try to generalize the simple site generator for others to use.