Pat David Avatar
5 min read

Rebuilding as a Static Site

It’s About Time

For almost a decade I had been using blogger to host my personal website. That just didn’t seem to make sense any more, and I wanted an opportunity to fiddle with things a bit. I thought it might be fun to put some constraints on designing a new site for myself while migrating to something better.

I’m leaving these images of P!nk that I used during my initial design and styling because I like them. If I have to keep looking at temp images while fixing CSS rules, they might as well be ones I enjoy looking at. (And I enjoy looking at them because they remind me of my wife - not the other way around…)

Pink for PETA

Large image (should be bigger than column). This caption will continue, though, to test the formatting of the style for this figcaption element and make sure it wraps as expected… P!nk by Ruven Afanador.

Pink by Bryan Adams

This is a caption for an image that should be smaller than the total column width (on a dektop at least). I’m going to make this caption longer so it will wrap hopefully… P!nk by Bryan Adams (Yes, that Bryan Adams).

Minimal Styling

One of the constraints that I thought would be fun is to minimize (somewhat) the amount of CSS I use to style the site. I managed to get the total amount of CSS in my stylesheet down to about 165 lines (unoptimized/minified). I still need to add some font declarations to the sheet, but not too bad overall I think.

I’ll probably re-visit it and tweak things to see if I can minimize it further, but it’s working fairly well at the moment. It’s also fully responsive to screen size, which is nice!

Metalsmith (again)

For the choice of a static-site generator I defaulted to what I was already using for a couple of other sites I have been working on, and That would be Metalsmith again. It’s a relatively simple system that basically considers everything to be a plugin. It uses Node.js, which is nice because I’m already doing some javascript programming anyway for various web-thingies.

Although, I did already use Pelican for - so I suppose I’m due to try something completely different to keep mixing things up. Jekyll maybe? :)

Old Blogger Posts

Speaking of Jekyll - I still had the problem of what to do with all of the legacy posts I had on blogger. Luckily I was able to export all of my posts using the Google/Blogger tool - which left me with a giant XML file. I was going to parse this myself to try and extract the posts out of it, but my friend Mica pointed me to Jekyll’s importer tool. Luckily it made short work of translating the XML into individual post files that I could then masssage to work with my build system.

Here is a sample of one of the translated posts frontmatter yaml:

layout: post.hbt
title: 5 minute portrait - Coworker Emily
date: '2010-08-27T13:13:00.059-05:00'
author: Pat David
- Flickr
- photography
- lighting
modified_time: '2010-08-27T15:23:59.964-05:00'

Luckily there wasn’t much to deal with as far as the posts overall went. This wasn’t quite so true of the actual post data - from the looks of things I must have been completely spacing out when I wrote some of them.

I still need to do a few things before I can fully switch this site away from blogger though.

Still To-Do

There’s still a few things I need to do…

Filed under: HTML, static, metalsmith, nodejs

Share this on: Twitter | Facebook