Disclaimer: This post is a retrospective on the why and how of moving my site to Octopress; as such many of you will find this post boring. My extreme apologies.

The why

Basically, I was tired of Wordpress. Tired of managing my site through a panel. Tired of my site being buried beneath layers of PHP abstraction. I’d also been wanting to move to a “baked” model for my site. A baked site means there’s no dynamic generation of the site for each user that views it (like PHP, etc), but rather it is generated elsewhere and the site viewed by the user is entirely static. I’d read a few articles on various approaches to this by Brent Simmons and Matt Gemmell. The concept isn’t new; apps like iWeb and RapidWeaver have been doing this for years, but those apps aren’t really geared towards web developers; they’re geared towards people who don’t want to get their hands dirty with hand-coding things… I’d rather get my hands dirty than not.

After doing some research on various frameworks for building a baked site, I chose Octopress. Octopress is basically Jekyll, which is basically a set of Ruby scripts for generating a static site from plain text files written in Markdown (or a couple other text formatting languages). Octopress builds on top of Jekyll by providing a good set of HTML templates, CSS, JS, and a few custom plugins, which makes getting started with your site much easier. I preferred this approach because I don’t know much Ruby (I looked for a good static site generator written in Python, and surprisingly, there’s not one), and I didn’t feel like starting from scratch on the templates. I also liked the propsect of writing posts in Markdown, which is much more awesome than any WYSIWYG editor.

The how

Exporting content and comments from Wordpress

Once I’d determined I wanted to make the switch, I started by exporting all my content from Wordpress to an XML file (Tools -> Export), and then I processed that XML file using Exitwp (python scripts for turning Wordpress XML exports into Markdown-formatted text files). I did make a few modifications to Exitwp before running it; namely turning on comments by default, removing categories (everything was in the “Posts” category), and removing the author information (so that Octopress/Jekyll would attribute posts to myself instead of “admin”). I also had to modify the part of the script that downloaded all the images because it didn’t have any error handling for unretrievable images:

1
2
3
4
5
6
7

if download_images:
    for img in i['img_srcs']:
-       urlretrieve(urljoin(data['header']['link'],img.decode('utf-8')), get_attachment_path(img, i['uid']))
+       try:
+           urlretrieve(urljoin(data['header']['link'],img.decode('utf-8')), get_attachment_path(img, i['uid']))
+       except IOError:
+           print "Could not retrieve: %s" % urljoin(data['header']['link'],img.decode('utf-8'))

Finally, I also downloaded and modified html2text.py (used by Exitwp) so that I could remove the line breaks that the system version was adding (I’d rather my paragraphs in Markdown be on one line). This one was a little odd, since the comments in html2text.py note that to remove the line breaks, I should’ve set the BODY_WIDTH variable to “0”, but this resulted in the removal of all line breaks, thus also removing breaks between actual paragraphs. Instead, I set BODY_WIDTH to “100000”, which as far as I can tell was large enough to accomodate the length of my paragraphs.

Getting the comments out of Wordpress was a little easier. I decided to use Disqus for comments on the new site, so all I had to do was install the Disqus plugin for Wordpress, let it import my existing comments, and then set disqus_short_name in _config.yml. The one thing that’s not well documented anywhere is that for the comments to show up correctly on your new site, the permalink format for Octopress has to match the permalink format you were using in Wordpress. Not a big deal to me, but I’m not sure what you’d do if you wanted to change your permalink structure (perhaps change it in Wordpress before importing to Disqus?).

Source control

The Octopress instructions recommend pushing any changes you make to Octopress to your own repo on GitHub. I didn’t really want to put my site up on GitHub as a public repo, and nor did I want to pay for a private repo, so I set up a private git repo on Dreamhost and set my git-cloned copy of Octopress to use that as origin.

Publishing

Originally, I had planned to symlink a folder in my Dropbox as the _posts directory, but eventually I realized that wasn’t going to help me achieve the ability to “write anywhere”, since I’d still have to regenerate/deploy the site via shell commands. So instead, I cloned a local copy of the repo on Dreamhost. This way I can write posts in any editor at any time, and then log in via SSH and run the shell commands to create the new post, drop in the text, and regenerate/deploy the site. This method also means I can’t accidentially publish a draft of a post prematurely because I forgot to mark it as a draft, etc.

As far as the actual writing and deploying, I picked up the wonderful and much-lauded ia Writer for Mac and iPad, and Prompt, a nice SSH client for iOS from the crew at Panic. iA Writer lets me write posts in Markdown (it somewhat auto-formats Markdown in the editor) and store them in iCloud, truly giving me the ability to write from anywhere, and Prompt means I can create/generate/deploy new posts from my iPad or iPhone (and of course I’ll just use the normal Terminal app if I’m on my Mac).

Other tweaks

• I pulled much of my .htaccess file from HTML5 Boilerplate; stripped out the PHP-related stuff I don’t need anymore, and modified some of the browser cache rules.
• Added a custom 404 page (written in Markdown, no less).
• Added the “About” page
• I plan to go back through most of my posts and do some post processing; little things like cleaning up formatting and such, but that’ll happen slowly over time. If anything else, it’ll be fun to look through the archives.

What’s next?

I’ll probably tweak the theme a bit, but honestly, the default theme is beautiful, sleek, and handles various viewport sizes very gracefully (go ahead, make the browser window as small as you can width-wise).

If I can think of anything else or if anybody asks stuff that I think would be useful/relevant in the comments or on Twitter, I’ll update this post.