Back online

My personal website hasn't received much TLC in the past few years. "Cobbler's children" is an expression that comes to mind. But it's changing now. In the process I've rebuilt the site on Drupal 7*, and created a cached copy of the old one. Read on to learn how I did it.

My old website came to be in April of 2006. It was my first Drupal site ever built and actually the launchpad of my Drupal career. The two month long project was done on Drupal 4.6 and took an awful amount of dead kittens – i.e. core hacks to complete. I've mended my ways since but the site was in no state to be upgraded. Instead of trying to migrate content I decided to make a static version (I will explain how I did that further on in this post). The website was highly specialized for what I was doing back then. Drupal development and theme design for phpBB and offered downloads along with documentation.

That is largely irrelevant by now and what I needed most of all was a traditional blog. I decided to build a blog on Drupal 7. Much for the learning experience. I know that WordPress does it more or less out of the box but Drupal is my tool of choice.

The result is this website. It uses the a sub theme for the Panels 960 theme I call "Reality 960". I decided to go with 960 as grids are easy to design for and I was never a fan of the old way of making pure CSS layouts calculating negative margins, using wrapping divs with care and implementing conditional comments for IE6. If you remember "holy grail" and "piefacta" then you know what I'm talking about. Grid layouts have taken the drudgery out of web design allowing us who never took an interest in the technical CSS layout model to focus on making great layouts, instead of mapping out browser quirks.

Furthermore, Panels 960 is HTML5. That means it won't render perfectly well in every browser out there but it was a tradeoff I was willing to make.

Something I really like about Panels 960 is how it supports Panels out of the box. With Panels you can throw out template files, regions and blocks and instead use the Panels interface to structure your pages.

The Panels 960 theme includes a number of layout plugins for Panels for 960 px grids with 12, 16 och 24 columns. I decided to make my own as my particular layout wasn't included. Making plugins is a breeze if you got a solid grid framework to work with. You just create the HTML, edit the info file to declare what panels are available. It will then show up as a layout when you edit a page in Panels.

This site is not responsive, yet. I am going to have a look at the Skeleton theme for Drupal as it implements grids and folds nicely at lower resolutions. Responsive is a world of its own and I know using grids for responsive isn't OK with some of the puritans out there. But I am pragmatic when it comes to these things. What's considered "good practices" when it comes to responsive design changes constantly. What was just recently considered the "right" way has been replaced by another concept or idea. Best way to address this is to use a framework and not deviate too much from it so you can follow along as improvements get implemented.

All of the layouts are built using Panels and Views. CSS is used for the visual flavor. CSS3 font-face fonts are used for the typefaces. And yes, it's wonderful to finally have proper font support in browsers. Remember WEFT? No you don't want to.

In order to have a nice workflow I've featurized pages, views and content types and everything else that makes sense to be a feature. This means I can version control not just code, but also the changes I make in Drupal's user interface.

I'm using markdown exclusively for content as I've developed a deep dislike for WYSIWYG and I love typing texts in IA Write and Writeroom. My work process goes from notes, ideas to writing in IA Writer to posting it in Drupal. Copy and paste. No formatting getting in the way and "paste without formatting" to remember.

The whole thing runs locally on Vagrant using the Drupal box. It's turned out to have some issues so it's not been entirely trivial to get it up and running. But it's a massive improvement over setting up a web server locally – which many Drupal developers still seem to do. The site is hosted on Pantheon as I wanted to give it a go and see how it holds up compared to creating my own development and hosting environment.

During this process I've reflected over how much easier it is to build sites with Drupal now compared to a few years ago. Given you know your Drupal toolbox, you can more or less assemble a blog in relatively little time. And the pieces fit much better together. I've run into a few issues and bugs but where I haven't bothered to bug hunt and fix, I've found workarounds. Building the same site on WP would likely take even less time but it's nowhere near as extensible as Drupal and everything you do outside of static pages and blog is even harder.

Pieces of the past

So what about my old site? Well it's still running as an archive. Using a nifty piece of software called SiteSucker (Mac only) I downloaded the entire old site as static HTML. What's so cool about it is how it keeps old URLs intact, more or less. Drupal's paths are turned into a directory structure with index.html files. References to CSS and JavaScript files are kept intact and the site looks lifelike. Why I had to disable all forms. That took some grep, perl and sed to add the necessary attributes to input and textarea tags.

This process took a few hours and SiteSucker can dig really deep into your site's structure if you so choose. I let it dig deep enough to grab all content I needed. What is important to keep in mind is to make sure that if you empty the site's cache before running SiteSucker, make sure all pages are regenerated first. If SiteSucker has to wait for Drupal to generate a page it may likely timeout and the page won't get downloaded at all.

You will also want to disable blocks such as log in and advertising you may be running on your site. This content will be frozen so there's no easy way to remove it after you got the static version done.

Next steps

Websites are never really done. You can polish every single detail if you so choose. I got a backlog too: responsive design, even better image handling and notifications for comments are just some of the things I hope to be able to do.

I also intend to keep it up to date and try and write more often. If there's something you're curious about or want to know more about of what I wrote above, feel free to post a comment. I'll try and explain and help.

And the name? Comes from the title of a book by British science fiction writer Peter F. Hamilton. Dysfunction is an interesting concept as it's usually when things break we get the chance, or are forced, to question the status quo and get to see that things can be done differently.

Thanks for reading.

* This post is ooooold! In February of 2020, I migrated the website to Publii, an ridiculously easy-to-use open source static website generator, to avoid the hassle of keeping a CMS up-to-date.