Jekyll Tips and Tricks Roundup

As I have mentioned earlier, this blog is run by Jekyll, a static site generator. In this post, I want to share my experience with Jekyll and explain some tips and tricks you probably did not know before.

Contents

1. Autobuilding and local server
2. Comments for your posts
3. Posts vs. pages conditionals for layouts

Autobuilding and local server

While you are editing your blog, you should run Jekyll with the following parameters:

jekyll --auto --server [port]

This automatically rebuilds your project as soon as you change anything. You are able to see all changes with minimum delay. The server command starts a server on port 4000 (http://localhost:4000), so you can use absolute paths in your layout files and elsewhere. If you enter a port number after the --server parameter, you can even run your blog on port 80, if you want to. Just make sure there is no other webserver running, like “Web-Sharing” on Mac OS X.

Comments for your posts

Although the html generated by Jekyll is static, you can indeed enable comments for your blogposts. Basically, the comments are stored by an external service and will be pulled to your blog by JavaScript. I will describe the process for Disqus, which has become quite popular recently. Disqus has rich feature set, like notifications, spam detection, moderation and kind of everything that’s somehow common with comments. Plus, your visitors will be able to comment without registering an account, and you won’t have to pay a penny to use this service.

After registering, you will have to enter a few details about your blog. The website url is especially important, because Disqus will only work if the url in your Disqus account equals the one entered in your browser. You will be able to see existing comments, but you won’t see the new comments form. This leads to two conclusions:

1. You cannot use domain aliasing for your live blog. If you have two or more urls showing the same content, you should use one as the main domain and redirect the other ones.
2. Comments will not work on your local machine, unless you use some /etc/hosts trickery. You can run your server on port 80 and add the entry 127.0.0.1 blog.example.com to your /etc/hosts file to make Disqus think your local blog is running on the remote server. You will have to use http://blog.example.com in your browser to make this work, of course. After testing your blog comments, don’t forget to comment out the /etc/hosts entry to see the changes on your live server.

To enable comments in your blog, you have to log into Disqus and go to Admin ➞ Tools. Under “Integration”, choose “Generic code” in the drop down menu and click “Reinstall.” Copy Code Snippet #1 to your posts layout, and Code Snippet #2 to your general layout, including the one used for posts. Use the following code for your posts overview pages to show a link to the comments that displays their number:

In my experience, comments with Disqus are a smooth ride after you got them working once. A clear recommendation!

Posts vs. pages conditionals for layouts

You want to reuse the same layout for pages and posts, but tweak one or two little things that should look different between the two? No problem, as posts have an id, and pages don’t. You can use plain liquid syntax to differentiate between the two:

Don’t forget that you can nest layouts. If you have one main html file named “default.html”, you can easily extend this file to create a posts layout, like this example for a post layout: