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…)
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!
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
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.
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.
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).
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
- getting around in gimp
- All posts
This is to simply move things like
/p/archive.htmlto something like
This is something that could use a
301redirect as indicated above.
There’s a plugin for it, or I can just re-purpose what I did for pixls
The links in the header are not good touch targets on mobile, so I’ll have to fix them.