Rebuilding patdavid.net 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…)

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, pixls.us and acer.disl.org. 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 https://www.gimp.org - 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.

• got an export .xml file.
• use Jekyll translator to create directory (_posts) full of posts
  • Included frontmatter specific to blogger (thankfully)
  • Particularly helpful: included original blogger url
• have to fix a couple of things in each post
  • layout: changed to ‘post.hbt’
  • dates have to have single quotes removed from them
  • author tag changed to my (short) name ‘Pat David’
  • strip leading http://blog.patdavid.net/ from blogger_orig_url

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
tags:
- Flickr
- photography
- lighting
modified_time: '2010-08-27T15:23:59.964-05:00'
thumbnail: http://farm5.static.flickr.com/4079/4931974051_cec72589cd_t.jpg
blogger_id: tag:blogger.com,1999:blog-3707428309210287756.post-7334479767144192384
blogger_orig_url: http://blog.patdavid.net/2010/08/5-minute-portrait-coworker-emily.html
---

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…

• Scrape all images out of blogger/Google to local
  I want to get all of the linked images in all of my old posts saved locally.
• Twitter metadata
  Add the appropriate metadata so that Twitter cards will work
• Open Graph/Schema metadata
  This is the metadata for enriching posts on FB/Google+ (different than Twitter - because why not!).
• Metalsmith more plugin
  This plugin will let me truncate posts on aggregate pages (like the front page).
• Archive page
  I still need a good page for an archived list of posts (styled).
• HTTP 301 redirects for a few pages
  There’s still a few pages that will probably need a redirect to the proper location.
• All posts
  blog.patdavid.net/yyyy/mm/title.html
• getting around in gimp
  blog.patdavid.net/p/getting-around-in-gimp.html
• archive
  blog.patdavid.net/p/archive.html
• Fix or modify any last permalinks
  This is to simply move things like /p/archive.html to something like /archive/ instead (permalinks).
  This is something that could use a 301 redirect as indicated above.
• Set up RSS feeds
  There’s a plugin for it, or I can just re-purpose what I did for pixls
• Finish mobile styling for navigation
  The links in the header are not good touch targets on mobile, so I’ll have to fix them.