From Blogspot to Nanoc

As a warm-up for my recent programming project, I decided to migrate from Blogspot to a static content generator. I’ve been interested in static content generators for a while now, ever since I discovered them a few years ago. I was amazed by how simple they are compared to content management systems like Wordpress, which can be technically complex and require additional server requirements. That’s why I’ve been using Blogspot as my blogging platform since 2009.

With a static content generator, all I need is a simple web server to serve my blog. That’s it. I can even self-host it on my Raspberry Pi at home and move it anywhere without worrying about databases or configurations. A static site offers fast loading times, reduces bandwidth usage, and provides increased security by eliminating the need for a database. That’s the beauty of having a static site, and it allows me to blog like a hacker.

So what exactly is a static content generator?

The name says it all. It takes a content directory, runs it through converters (such as Markdown or Textile), and turns it into a complete static website. The end result may be simple, but the process is not. If you’re not comfortable with setting up a local development environment, scripting, and using the terminal, then it’s better to stick with Blogspot or Wordpress. In other words, you do all the work on your computer and push it to the web when you’re done. There are no web panels or administration pages to deal with. This approach is definitely not for the average user.

What’s Your Flavor?

There are many static content generators to choose from, and one of the most popular ones is Jekyll. However, I chose Nanoc as my blog generator because I find it simple to deploy and it comes with solid documentation compared to Jekyll. But don’t let me stop you; try out both generators and see which one suits you best. Jekyll and Nanoc both come with their own web servers that you can try out on your local machine, allowing you to play around and gain a better understanding of how they work.

If you’re on Windows, there’s an extra step before you can install Nanoc. But if you’re on Mac or Linux, it’s just a matter of typing one command:

$ gem install nanoc

Note: OS X comes with Ruby preinstalled, but it’s an old version (1.8.7). I’m using rvm to manage my Ruby installations, which keeps the default installation intact. With rvm, you can even have multiple versions of Ruby that you can switch between. For Nanoc, I’m using version 2.0.0. You can switch to any version by typing:

$ rvm use version-of-ruby

To confirm the switch, type:

$ ruby -v

And if you want to set it as the default version, simply use:

$ rvm default version-of-ruby

It’s as simple as that. (RVM is amazing.)

Let’s get moving.

Fortunately, I only need to import less than 30 posts from Blogspot. I deleted hundreds of posts earlier this year to keep my blog from becoming a library of old content. Importing the posts is as simple as using the wget command:

$ wget -m -p -nd --convert-links pali7x.com

However, this command didn’t import all the images hosted on Picasa. I tried a few other methods, but the one that worked well for me and saved me time was using Google+ Album Download.

I put the image URLs into a single text file and ran the following command:

$ wget -E -H -k -K -nd -p -e robots=off -P Images/ -i picasa.txt

That’s it. You’ll need to do some cleanup afterward because Picasa creates multiple resolutions of your images. I noticed that the ones ending with .extension.1 are the highest resolution. You can delete the rest.

You can write a simple script to simplify this process, especially when dealing with a lot of images.

Additionally, use NameChanger to rename the files to the correct file extensions.

Now that you’re done with the images, you’ll need to remove all unnecessary tags from the downloaded HTML posts and convert them into raw text. I did this using html2txt.py, a simple Python script that will get rid every html tags and leaves only text contents.

I am now ready to create my site using Nanoc. Here’s a pro tip: It’s better to fork someone else’s Nanoc repository and then adjust it according to your needs. I’m using the standard template that comes with Nanoc because I like its simplicity. However, even with the default template, I spent a considerable amount of time fine-tuning the CSS and other elements.

Let’s tell Nanoc to create my site :

$ nanoc create-site pali7x.com

Don’t forget to install Markdown. This converter will convert the .md files into proper HTML during the site’s compilation.

$ gem install kramdown

To compile the site, run:

$ nanoc

It’s a feeling that I can’t describe when I see Nanoc compiling my site. I love doing this. At this point, you can view your brand new Nanoc site:

$ nanoc view

If you encounter any errors, it’s likely because you haven’t installed adsf. Make sure to do your homework and not rely 100% on this post:

$ gem install adsf

Remember, you might need to write some custom rules for Nanoc to process your site based on your configuration. In my case, I have everything in the /content directory compiled and the results outputted to the /output directory, including the images. In the end, I have everything ready to deploy in the /output directory, without worrying about broken images.

So how do you write a new post?

First, you can create a new file in the format of “year-month-day-post-title.md” and put it in the /content directory. Then, open that file and manually add all the necessary rules.

Alternatively, you can write a custom Rake file to automate this process:

task :new_post, :title do |t, args|
mkdir_p './content/posts/'
args.with_defaults(:title => 'New Post')
title = args.title
filename = "./content/posts/#{Time.now.strftime ('%Y-%m-%d')}-#{title.to_url}.md"

puts "Creating new post: #{filename}"
open(filename, 'w') do |post|
post.puts '---'
post.puts "title: \"#{title}\""
post.puts "created_at: #{Time.now}"
post.puts 'kind: article'
post.puts "---\n\n"
end
system "open -a textmate #{filename}"

Invoke it using this command:

$ rake new_post["Post title"]

You’ll need to write your post using Markdown formatting (it would be handy to print out the cheatsheet) or plain HTML. Personally, I prefer writing in HTML because there’s nothing new to learn.

Deployment?

Most basic web servers support uploading via FTP, so that’s the basic method you can use. However, I highly recommend using rsync if your hosting provider supports it.

$ rsync -arzh --progress source target

If you’re feeling fancy, you can write a Rake task to automate the upload process.

UPDATE: I now host my blog on Heroku.

Well, now you have an idea of how it all works. Thanks for reading!