I’ve wanted to play with Jekyll for a while now. A delayed flight and awesome internet connection at the Pittsburgh airport finally presented me the golden opportunity.

Here is a step-by-step tutorial on how I build this site:

Install Jekyll

You should first install jekyll. There is a good tutorial on the Github wiki. But If you don’t want to follow the official tutorial, here is what I did.

Install the Jekyll gem by running:

gem install jekyll

If you want syntax highlighting for code blocks, you have to install a python module called Pygments.

sudo easy_install Pygments

Of course you have to have python-setuptools installed.

First blog entry

After installing jekyll, I created my site structure that looks like this:

      .
      |-- _config.yml
      |-- _includes
      |-- _layouts
      |   |-- default.html
      |   `-- post.html
      |-- _posts
      |   |-- 2012-01-20-some-post-I-wrote.textile
      |   `-- 2012-01-21-how-I-built-this-blog.textile
      |-- _site
      `-- index.html

The best way to get started is to take a look at someone else’s project. Since I’m terrible at anything css/html related, I borrowed a lot of code from User Obsessed.

The _config.yml file contains configuration settings of the site. Here is what mine looks like:

url: "http://www.erictang.org"
    pygments: true
    exclude: [/bin, Gemfile, Gemfile.lock]
    markdown: kramdown
    permalink: pretty
    paginate: 10

    kramdown:
      entity_output: symbolic

The index.html file is your homepage. The layouts directory contains the formating of your pages, and the posts directory contains individual posts.

To get a simple site up and running, I created config.yml, index.html, layouts/default.html and _posts/2012-1-21-sample-post.textile

After that, run

jekyll --auto --server

You should see a server starting up. Go to http://localhost:4000 to make sure it’s working.

There are many other things you can do with this barebone site, refer to the Wiki for details.

Disqus

Comments are important for blogs. There are many different ways to add comments to your Jekyll-powered blog, I chose to use Disqus because it’s easy to integrate.

Luckily Disqus has make this process SUPER easy. Here is what you have to do:

• Sign up for a disqus account, register your domain.
• Copy the embeded code to your _layouts/posts.html. Remember to replace “example” with your own shortname.
• Reload the page.

That’s it!

That’s it! You’ve set up your first jekyll blog!