From Blogspot to Nanoc

As a warmup for recent programming project, i decided to migrate from Blogspot to static content generator as an exercise to get my brain ready for the task. I've been interested in static content generator for a while after found out about it few years ago and was amazed by how simple it is. I didn't favor Content Management System like Wordpress for its technical complexity and that would put another requirement on server side. That's explain well enough why i used Blogspot as my blogging platform since 2009.

With static content generator, i didn't need anything but a simple web server to serve my blog. That's all. I can even self-hosting it on my Raspberry PI at home, moving it anywhere i want without worrying any database to recreate or configurations to deal with. We're looking at speedy site-loading, lesser bandwidth usage and increase security for not having any database. That's the beauty of having a static site. And more importantly, you're blogging like hacker.

So what's Static Content Generator?

The name said it all. It takes a content directory, runs it through converters (such as Markdown/Textile) and turning it into a complete, static website. The end result might be simple, but the process is not. If you're not comfortable with setting up local development environment, some script hacks and quite amount of terminal session, then you'd be better stay with Blogspot or Wordpress. That's right, you're doing all the work on your computer, and push it on web after you're done. There's no web panel, no administration page to deal with. This definitely not for normal user.

What's Your Flavor?

There's a lot of static content generators that you can use to generate your website, and one of the most popular is Jekyll. I picked Nanoc over Jekyll as my blog's generator because i find it simple to deploy and comes with solid documentations compare to the former. But don't let me stop you, try out both of generators and see which one suits you the most. Jekyll and Nanoc comes with its own webserver that you can try on localhost, so you can play around to give a better insight on how it work.

If you're on Windows, there's an extra step before you can install nanoc. But if you're on Mac or Linux, its just a matter of one typing away :

sudo gem install nanoc

Note : OS X comes with Ruby preinstalled but an old version of 1.8.7. I'm using rvm to manage my Ruby and plus it keeps the default installation intact. You can even have multiple version of Ruby switchable with rvm. For Nanoc, i'm using 2.0.0. You can switch to any version by :

rvm use version-of-ruby

and confirm it by typing :

ruby -v

And if you want to keep it default, just :

rvm default version-of-ruby

Simple as that. (I love Ruby)

Let's Move.

Fortunately for me, i'd only need to import less than 30 posts from Blogspot. I deleted hundred of posts early this year to keep my blog from becoming love library. Its just a matter of simple wget command :

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

But that didn't import all the images hosted on Picasa. I've tried few other method as well, but there's one that works well enough for me and save my time - Google+ Album Download

Put those urls into single txt file, and run :

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

Done. You'll need to do some cleanup first as Picasa creates multiple resolution of your image. I notice one that ends with .extension.1 are the highest resolution you can find. The rest? Just get rid of it.

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

And then, using NameChanger to rename those files to the right file extension.

Now you're done with images (and perhaps few other things as well i'm not covered in here such as javascript), you'll need to remove all unnecessary tags from html posts you've downloaded earlier and turn it into raw txt. I did that with html2txt.py, a simple python script.

I am ready now to create my site using nanoc. Some pro tips : Its better for you to fork someone's else nanoc's repository and then adjust according to your needs. I'm using standard template that comes with Nanoc because i like the simplicity, but do remind even with default template, i did spent quite amount of time tuning up the css and few other stuff as well.

Let's tell Nanoc to create my site :

nanoc create-site pali7x.com

Don't forget to install Markdown. This converter will convert those .md files into proper html during site's compile.

gem install kramdown

and compile it :

nanoc

Its a feeling that i can't describe watching as nanoc compiling my site. I love doing this. At this point, you can pretty much view your brand new nanoc site :

nanoc view

If you hit any error, its probably you didn't install the adsf yet. Should do your homework than relying 100% on this post

gem install adsf

Don't forget you might need to write some custom Rules for nanoc to process your site based on your configuration. I'll have everything in /content compiled and spit out the results on /output including images. In the end, i have everything in /output ready to deploy without worrying images might broken.

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 /content, open those file and add up all the rules manually,

Or, write a custom rake file to do that :

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}"

It create the .md file, put it on target folder with proper formatting and then opens the file with Textmate. Invoke it using this command :

rake new_post["Post title"]

You'll need to write your post using Markdown formatting (would be handy to print out the cheatsheet) or in plain html. Personally, i'd just write in html because there's nothing new to learn.

Deployment?

Most of basic web server supports uploading via ftp, and that's the very basic on how you're going to upload it. I'd highly recommend using rsync if your hosting supports it.

rsync -arzh --progress source target

As usual, if you're fancy enough, just write a rake task to upload it.

UPDATED : I hosted my blog on Heroku.

Well, you get the idea now how its work. Thanks for reading.

Posted August 18, 2013

Tweet this