The Butje site - a short history

Written by Vincent Bruijn

butje.nl is one of my sites that is longest online, sinds 2003! It’s also one of my favourites: I like to browse through the photos of Berndnaut, Jeroen and me and the history of our friendship.

In the beginning I built it with Adobe GoLive, later in the PHP framework Symfony 1.0 and now I’m back to a site consisting of static HTML files, rendered by just 250 lines of NodeJS! Different considerations at different moments of my coding career lead to these descisions…

First butje site

Back in 2003 we, Berndnaut Smilde, Jeroen Brouwer and I, had a collection of about 20 Butje Photos, a series we basically started by accident; the first photo was made at our art school’s studio during an open day in 2001. The second photo actually defined the real start of the series, at a party at my place in Groningen, during the opening of an exhibition there.

me in the middle, Berndnaut to my right side and Jeroen to my left

After the second, a thrid, a fourth and even more photos followed with the same principle: me in the middle, Berndnaut to my right side and Jeroen to my left.

After about two years I had the idea to see if we could do something online with these photos. Facebook didn’t exist yet, nor did Twitter, let alone Instagram, so I claimed butje.nl and created a simple website with Adobe GoLive, the drag-and-drop website creation tool, similar to the then-famous DreamWeaver.

GoLive had an interface consisting of a grid in which you could place an image, link or other asset, move it around and align it to your liking. Under the hood, this grid was nothing more than an HTML table of which the cells adapted to the placing of your image. This was an awesome way of making simple layouts.

Somewhere in 2003 butje.nl went live

Somewhere in 2003 butje.nl went live via GoLive’s built-in FTP client. The menu consisted of a few years as main entries, followed by titles we gave the Butje Photos. The header consisted of a simple gray bar with www.butje.nl in mono spaced letters: framesets and tables!

We continued to make Butje Photos, I learned more and more about web development and at some point I wanted to make a CMS based site. This would be awesome: all three of us would have an account and would be able to upload a Butje Photo, any time, anywhere: no dependency on a standalone tool on someone’s machine.

Second butje site

By 2007 I had started to learn PHP and I wanted to extend my knowledge, I was eager to learn new stuff. A software architect at my job choose Symfony 1.0, a web framework for PHP applications, for our business projects.

Symfony was hard for me, but I managed to write a web application for butje.nl with a backoffice where you could create, retrieve, update and delete Butje Photos, it had simple account management and an upload tool that automatically resized uploaded photos: a leap forward!

2011 version butje site

The Symfony webapp ran for years, survived several PHP upgrades with a tiny patch here-and-there from my side, but after the web hosting company decided to upgrade to PHP 7.3, such a patch was just too much work, and upgrading Symfony to version 4 brought into consideration a conplete rewrite.

it should be done in JavaScript

Besides, I consider PHP a nice language, but I fell in love with JavaScript: I decided that if I would make a new butje.nl, it should be done in JavaScript.

The need for user accounts and authentication fell away: we didn’t use it that much. Another consideration was maintainability: I didn’t want to spend a couple of evenings to get the site online again if some tool had been upgraded. Also, since the site hasn’t any state, why not consider a site served as static HTML?

This lead me to the decision to write a static site generator. With a few tools and about 250 lines of code, butje.nl is now built from Markdown and served as a collection of static HTML files, much like back in 2003!

2019 version butje site