h1. Jekyll

Jekyll is a simple, blog aware, static site generator. It takes a template directory (representing the raw form of a website), runs it through Textile and Liquid converters, and spits out a complete, static website suitable for serving with Apache or your favorite web server. Visit "http://tom.preston-werner.com":http://tom.preston-werner.com to see an example of a Jekyll generated blog.

To understand how this all works, open up my "TPW":http://github.com/mojombo/tpw repo in a new browser window. I'll be referencing the code there.

Take a look at "index.html":http://github.com/mojombo/tpw/tree/master/index.html. This file represents the homepage of the site. At the top of the file is a chunk of YAML that contains metadata about the file. This data tells Jekyll what layout to give the file, what the page's title should be, etc. In this case, I specify that the "default" template should be used. You can find the layout files in the "_layouts":http://github.com/mojombo/tpw/tree/master/_layouts directory. If you open "default.html":http://github.com/mojombo/tpw/tree/master/_layouts/default.html you can see that the homepage is constructed by wrapping index.html with this layout.

You'll also notice Liquid templating code in these files. "Liquid":http://www.liquidmarkup.org/ is a simple, extensible templating language that makes it easy to embed data in your templates. For my homepage I wanted to have a list of all my blog posts. Jekyll hands me a Hash containing various data about my site. A reverse chronological list of all my blog posts can be found in <code>site.posts</code>. Each post, in turn, contains various fields such as <code>title</code> and <code>date</code>.

Jekyll gets the list of blog posts by parsing the files in the "_posts":http://github.com/mojombo/tpw/tree/master/_posts directory. Each post's filename contains the publishing date and slug (what shows up in the URL) that the final HTML file should have. Open up the file corresponding to a blog post: "2008-11-17-blogging-like-a-hacker.textile":http://github.com/mojombo/tpw/tree/master/_posts/2008-11-17-blogging-like-a-hacker.textile. GitHub renders textile files by default, so to better understand the file, click on the "raw":http://github.com/mojombo/tpw/tree/master/_posts/2008-11-17-blogging-like-a-hacker.textile?raw=true view to see the original file. Here I've specified the <code>post</code> layout. If you look at that file you'll see an example of a nested layout. Layouts can contain other layouts allowing you a great deal of flexibility in how pages are assembled. In my case I use a nested layout in order to show related posts for each blog entry. The YAML also specifies the post's title which is then embedded in the post's body via Liquid.

Posts are handled in a special way by Jekyll. The date you specify in the filename is used to construct the URL in the generated site. The example post, for instance, ends up at <code>http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html</code>.

Files that do not reside in directories prefixed with an underscore are mirrored into a corresponding directory structure in the generated site. If a file does not have a YAML preface, it is not run through the Liquid interpreter. Binary files are copied over unmodified.

In order to convert your raw site into the finished version, you simply run:

<pre class="terminal"><code>$ jekyll /path/to/raw/site /path/to/place/generated/site</code></pre>

Jekyll is still a very young project. I've only developed the exact functionality that I've needed. As time goes on I'd like to see the project mature and support additional features. If you end up using Jekyll for your own blog, drop me a line and let me know what you'd like to see in future versions. Better yet, fork the project over at GitHub and hack in the features yourself!

h2. Example Proto-Site

My own personal site/blog is generated with Jekyll.

The proto-site repo ("http://github.com/mojombo/tpw":http://github.com/mojombo/tpw)
is converted into the actual site ("http://tom.preston-werner.com/":http://tom.preston-werner.com)

h2. Install

The best way to install Jekyll is via RubyGems:

  $ sudo gem install jekyll

h2. Run

  $ cd /path/to/proto/site
  $ jekyll

This will generate the site and place it in /path/to/proto/site/_site.

There is an autobuild feature that will regenerate your site if any of the files change:

  $ jekyll --auto

By default, the "related posts" functionality will produce crappy results.
In order to get high quality results with a true LSI algorithm, you must
enable it (it may take some time to run if you have many posts):

  $ jekyll --lsi

If you'd like the generated site placed somewhere else:

  $ jekyll /path/to/place/generated/site

And if you don't want to be in the proto site root to run Jekyll:

  $ jekyll /path/to/proto/site /path/to/place/generated/site
  
The autobuild feature can be used on any of the invocations.

h2. Filters, Tags, and Blocks

h3. Include Tag

If you have small page fragments that you wish to include in multiple places on your site, you can use the <code>include</code> tag.

<pre>{% include sig.textile %}</pre>

Jekyll expects all include files to be placed in an <code>_includes</code> directory at the root of your source dir. So this will embed the contents of <code>/path/to/proto/site/_includes/sig.textile</code> into the calling file.

h3. Code Highlighting Block

Jekyll has built in support for syntax highlighting of over "100
languages":http://pygments.org/languages/ via "Pygments":http://pygments.org/.
In order to take advantage of this you'll need to have Pygments installed, and
the pygmentize binary must be in your path. When you run Jekyll, make sure you run it with Pygments support:

  $ jekyll --pygments

To denote a code block that should be highlighted:

<pre>
{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}
</pre>

The argument to <code>highlight</code> is the language identifier. To find the
appropriate identifier to use for your favorite language, look for the "short
name" on the "Lexers":http://pygments.org/docs/lexers/ page.

In order for the highlighting to show up, you'll need to include a
highlighting stylesheet. For an example stylesheet you can look at
"syntax.css":http://github.com/mojombo/tpw/tree/master/css/syntax.css. These
are the same styles as used by GitHub and you are free to use them for your
own site.

h2. Contribute

If you'd like to hack on Jekyll, grab the source from GitHub. To get
all of the dependencies, install the gem first.

  $ git clone git://github.com/mojombo/jekyll

The best way to get your changes merged back into core is as follows:

# Fork mojombo/jekyll on GitHub
# Clone down your fork
# Create a topic branch to contain your change
# Hack away
# Do not change the version number, I will do that on my end
# If necessary, rebase your commits into logical chunks, without errors
# Push the branch up to GitHub
# Send me (mojombo) a pull request for your branch

h2. License

(The MIT License)

Copyright (c) 2008 Tom Preston-Werner

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
