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.
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
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:
- 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.
- Comments will not work on your local machine, unless you use some
/etc/hoststrickery. You can run your server on port 80 and add the entry
127.0.0.1 blog.example.comto your
/etc/hostsfile to make Disqus think your local blog is running on the remote server. You will have to use
http://blog.example.comin your browser to make this work, of course. After testing your blog comments, don’t forget to comment out the
/etc/hostsentry 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: