Migrating from Wordpress to Jekyll and Amazon S3

Since Amazon announced the ability to host static websites, I’ve jumped on the Jekyll and Amazon S3 bandwagon. For awhile now, I've been using Wordpress and rsync to generate flat files, but I haven't been completely satisfied with this solution. I wanted easier customization (“easier” from the point of view of a programmer).

Before beginning, there are some things that may make you not want to go down this road. Everything is static, which means dynamic elements have to be loaded through javascript. For example, comments can be loaded through Disqus. As far as I can tell, Jekyll only imports posts. Maruku, which is used to generate the site, is a stricter HTML parser. I don’t know if the other engine is better, but if not, there may be ugly errors in the site if the markup isn’t up to par. Wordpress pages will have to be regenerated manually or with a script. The site has to be accessed through a subdomain (e.g. www.jongyulin.com and not jongyulin.com). As I have a small site and I mostly use www, these weren’t issues for me.

I run Ubuntu 10.04 and I already had Ruby installed on my machine. Installation was fairly simple:

sudo apt-get install ruby1.8-dev
sudo gem install jekyll
sudo apt-get install python-pygments

I created a directory to hold my new Jekyll install and imported Wordpress:

mkdir www.jongyulin.com
cd www.jongyulin.com
ruby -r'/var/lib/gems/1.8/gems/jekyll-0.10.0/lib/jekyll/migrators/wordpress' -e 'Jekyll::WordPress.process("DB","USER","PASS")'

At this point, a _posts directory existed with all my Wordpress posts. Jekyll only imports posts. This means static pages like the index and images will need to be regenerated. To get an overview of Jekyll, I would consult the documentation. I had to create layouts, save copies of my pages files as raw html, update Jekyll’s default permalinks, and copy over the postimages directory. Once that was completed, I created the site:

/var/lib/gems/1.8/gems/jekyll-0.10.0/bin/jekyll --pygments

There should now be a _sites directory containing the new site.

I can now get everything on Amazon S3. I created a new bucket called www.jongyulin.com. The bucket must match the domain name being requested. I then downloaded S3Sync.

There are different ways to setup S3Sync. I went with setting it in my home directory by creating a file called $HOME/.s3conf/s3config.yml with the contents:

AWS_ACCESS_KEY_ID: ACCESS_KEY
AWS_SECRET_ACCESS_KEY: SECRET_ACCESS_KEY

Replace ACCESS_KEY and SECRET_ACCESS_KEY with their respective values.

I ran:

ruby /path/to/s3sync/s3sync.rb --delete -r /path/to/www.jongyulin.com/_site/ www.jongyulin.com:

The above command is meant to mirror your local copy of the site and the delete flag will remove any files on the remote host that doesn't exist locally.

In Amazon, click on the properties for the bucket and then click on Website. Check the Enabled box and set the Index Document, which was index.html. Make note of the endpoint URL (for me, this was http://www.jongyulin.com.s3-website-us-east-1.amazonaws.com/) and click save.

Lastly, add a bucket policy to allow anonymous users to get objects from the S3 bucket:

{
	"Version":"2008-10-17",
	"Id":"9d9683df-edb9-48fa-8d4f-a7f6d36f4adc",
	"Statement":[{
			"Sid":"AddPerm",
			"Effect":"Allow",
			"Principal":{
				"AWS":"*"
			},
			"Action":"s3:GetObject",
			"Resource":"arn:aws:s3:::www.jongyulin.com/*"
		}
	]
}

Everything on Amazon is now setup. The last thing I needed to do was update my DNS host records. I changed www to a cname with the endpoint URL value (for me, this was http://www.jongyulin.com.s3-website-us-east-1.amazonaws.com/).