Jekyll

January 19, 2015

This announcement will come as a surprise to no one: obviously, the site is finally live, and is now running on Jekyll.

The entire transition has taken embarassingly long, and was made worse knowing that, having broken my Squarespace site (it turns out the Developer system didn’t play well with SS7), the entire blog was sitting behind a closed curtain, just withering away. With the migration already in full swing, I begrudgingly decided that the Squarespace site was not worth fixing.

As a result, the SS → Jekyll migration is not entirely complete. The process, my thought processes, and what’s left to do will be documented below.

Why Jekyll?

I’ve long wanted to move from Squarespace, for reasons too legion to describe in detail now. Most of it boiled down to simplicity and control; together, they offer peace of mind. Squarespace as a service is unbeatable, and I would still recommend it to 99% of people out there wanting a hosted website. However, I was finding that too many things needed hacking, too many options were taken away from my control, and the laggy backend of SS6 and 7 actually turned me off from blogging at all.

A lot of nerds have made the move to Jekyll and they all seem happy with it. It bills itself as follows:

Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server.

Beautifully simple and low-maintenance. Exactly what I’ve been looking for.

Transitioning from Squarespace to Jekyll wasn’t difficult by any means, though I certainly had to fiddle with a more than a few things along the way. I’m not going to walk through setting up Jekyll; that’s handled in plenty of detail here.

Why Amazon S3 and not Github Pages?

When I first began the transition process, I had every intention of hosting my new site on Github Pages, the free hosting and publishing option by Github. The plus was that I would get to use git, version control, and free hosting. Plus, Github Pages runs Jekyll by default, so compatibility issues would likely be nonexistent.

However, this didn’t work out for one not-so-insignificant reason, which I didn’t put too much thought into right away: my photos. In multiple past lives, my website was both a photographic portfolio and a photoblog, and therefore played host to hundreds of high-quality images whose source files I didn’t want hanging out in a publicy-accessible repo.

There’s something appealing about a low-maintenance, scalable storage system like Amazon S3. Plus, there are a number of command line interfaces that play well with it.

s3_website

The Jekyll website contains a section on various deployment methods, which is where I found s3_website. It’s a Ruby gem that places a configuration file called s3_website.yml in your source Jekyll folder, which I then configured to connect with my S3 bucket. After the setup is done, all I have to do is run s3_website push to push the _site folder to S3.

From Squarespace

Migrating my blog posts from Squarespace to Jekyll was by far the most time-consuming portion of the transition. I first tried exitwp (via Justin Blanton and Sid O’Neill), which broke more times than I could count, despite many attempts at hacking its source code. I eventually settled on this gist by Evan Walsh, which, with a few more modifications, worked perfectly.

The resultant markdown files were not without error; many had forgotten italics or formatting issues, and the majority of the blog posts ended up clumped together in massive chunks of text. As you can imagine, this resulted in the tedious process of going through each post one by one, comparing it to the original copy on Squarespace, and reformatting my entire blog, post by post. Combine that with a full time job and pursuits of graduate school and you might realize why this took so long to finish.

Rakefile

To fully take advantage of the convenience of Jekyll, I would need to fully automate the publishing process. I chose to do this through rake. I ended up placing the following Rakefile in my Jekyll directory:

desc "clean up site"
task :clean do
  rm_rf '_site'
  FileList['**/*.bak'].clear_exclude.each do |f|
    rm_f f
  end
end

desc "build the site"
task :build do
  sh "jekyll build"
end

desc "clean, build, then deploy to remote"
task :deploy => [ :clean, :build ] do
  sh "s3_website push"
  sh "osascript _announce.scpt"
end

Basically, the first task erases the _site directory, the second task runs jekyll build, which rebuilds the site, and the final task runs the first two, then pushes the site to S3 via s3_website as discussed early. The final line executes a script that I took from Justin Blanton’s post Display notifications when Jekyll-based operations complete, which announces (via Launchbar’s display in large type command) that the tasks are all completed.

The whole thing runs smoothly and beautifully. I love it.

The Design

I had to teach myself quite a bit to construct the site from scratch. Jekyll uses the Liquid templating system, which was foreign to me before a couple of months ago, but otherwise is pretty simple.

For a long time, I toyed with the idea of returning to a traditional sidebar blog layout, à la Shawn Blanc and the like. However, after pondering this, I remembered why cascading single-column layouts are so popular: they work equally well in desktop and mobile layouts. When approaching the site design from a mobile perspective, sticking to my centered layout became a no-brainer.

I might discuss my design thought processes more in depth in another post. For the most part, things haven’t changed: the site is still predominantly off-black on off-white, with blue accents throughout. The font is PT Sans, which is both conservative and humanistic, and, importantly, is free. (Yes, this means goodbye to Avenir, my beloved. The font is not necessarily set; after fiddling for weeks, however, I kept finding myself coming back to PT Sans.) The same could go to the color scheme, which is not yet perfected—you’ll likely see some subtle changes come and go as time passes.

Where are the photos?

Oh yeah, about that… If you click the Photos link in the top navigation bar, you’ll find a page strangely lacking photos. The final step of the migration is extracting all of the media (i.e. photographs) from my current Squarespace site, uploading them to S3, and updating the photo posts to reference the new URLs. As you can imagine, due to the large amount of photos on the old blog, this process will likely take even longer than it did to transfer the text posts.

Until then, all photos (and the associated blog posts) have simply been left out of the blog for the time being. It’s quick and dirty, and exactly the opposite of how I’d like to handle this, but I’m just too anxious to get the blog back up and running in a timely matter.

The Remainder

Besides the aforementioned photo issue, the blog is mostly complete. There are still a few things left that I am aware of:

  • The About page is empty, and other pages (Archives, for instance) still need to be created.
  • I’m still looking for a good Search implementation for Jekyll. At this point, I might simply end up using Google site search.
  • I’m relying on a basic xml feed for RSS, which, in 2015, is kind of lame. I’m split between Feedburner and Feedpress; that is, I know I want Feedpress, but I’m not convinced I want to pay for it.

I’m sure there’s plenty more that I haven’t yet found. If you do decide to go exploring and find something that I might have missed, feel absolutely free to email me or ping me on Twitter so I can fix it.

Thanks for sticking around. Here’s to plenty of writing to come!