Heard of Jekyll? Jekyll transforms markdown files into static sites and blogs. You can say goodbye to databases and bloated blog engines, and blog from your favorite markdown editor.

I just moved tobiasahlin.com from an old dusty version of WordPress, to Jekyll, served by GitHub Pages. The switch was easy to make; there’s a gem which you can use to import all your WordPress posts, and several guides have been written on making the transition. Before making the switch though, I had two major concerns:

• There’s a bit more than a hundred posts on my site. Will any URLs break?
• I’m not a fan of pagination. Given Jekyll generates a static site, will it be possible to implement infinite scroll for the blog feed?

Keeping your old URLs

When I used WordPress, I opted for a short and sweet URL scheme: /blog/post-title/. Jekyll’s default scheme is a bit messy: /year/month/day/post-title.html. Turns out changing it is just a matter of changing a single line in _config.yml.

In WordPress, you’ll find your permalink settings in Settings / Permalinks. Mine looked like this: /blog/%postname%/. To create identical permalinks with Jekyll, I just had to change the permalink line in _config.yml to this:

permalink: /blog/:title

Infinite scroll

Edit: I’ve now open-sourced an improved version of this implementation as Infinite Jekyll.

If you’re running WordPress you can query the database for more posts, and add them to the DOM as you get near the end of the page. How does that work with Jekyll when you’ve got no database to query?

Jekyll can’t just parse .html files. You can as easily parse and create JSON files, so you can for example create a file that includes the URLs for all your blog posts. I created a file called all-posts.json and added it to the root directory (note that a file must contain two rows of --- dashes to be parsed):

---
---
{
  "posts" : [
    {% for post in site.posts %}
      "{{ post.url }}"{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
}

It outputs an array containing URLs to all posts, and excludes the last comma to make sure the JSON is valid. The output looks something like this:

{
	"posts" : [  
		"/blog/moving-from-wordpress-to-jekyll",	
		"/blog/joining-github",	
		"/blog/the-mcdonalds-theory",	
		"/blog/acorn-4",
		"/blog/say-hello-to-spellrush",	
		"/blog/failure-through-acquisition",	
		"/blog/are-they-good-at-a-minimum-of-two-things",	
		"/blog/app-design-tips-from-luke-wroblewski",	
		"/blog/facebook-home-looks-great-in-theory",	
		"/blog/taking-care-of-your-users"
	]
}

You can then load every post individually, for example with jQuery’s $.get() method. You’ll end up doing a ton of more requests than if you could load posts in chunks, but hey—infinite scroll!