Jekyll has a number of built-in capabilities that can add useful features to a blog site. In addition, Jekyll and Octopress have a plugin system, with many available Plugins, that enables the creation of custom generated content for the site. Here we’ll take a look at some of the built-in features:

Built-in Features

Archive listing

You can create an Archive listing of all the posts on the site, in reverse chronological order, by using code similar to this:

<h1>Archives</h1>
{% for post in paginator.posts %}
<article class="posts">
  <header>
    <h1><a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h1>
    <time datetime="{{ post.date | datetime | date_to_xmlschema }}"
      >{{ post.date | date: "%b %-d, %Y" }}
    </time>
    <div class="readtime">Time to read: {{ post.content | reading_time_as_s }}</div>
  </header>
  {{ post.content }}
</article>
{% endfor %}

Check out the Archives page to view a listing of all the posts on this site.

Code syntax highlighting

Jekyll also offers built-in support for code snippets in many different programming languages:

SCSS

/*  main.scss  */
body {
  font-family: $base-font-family;
  font-size: 1em;
  font-weight: 400;
  color: $body-font-color;
  margin: 0 auto;
  max-width: 1290px;
  width: 96%;

  p {
    margin: 0 0 1.618em 0;
  }
}

Ruby

# date_to_string.rb
# Outputs the post.date as formatted html,
# with hooks for CSS styling.
#
#  +date+ is the date object to format as HTML.
#
# Returns string
def date_to_html_string(date)
  result = '<span class="month">' + date.strftime('%b').upcase + '</span> '
  result += date.strftime('<span class="day">%d</span> ')
  result += date.strftime('<span class="year">%Y</span> ')
  result
end

Pagination

It’s quite common on Blog sites to break up the main listing of posts, either the full posts or just excerpts, into smaller lists and display them over multiple pages. Jekyll has pagination built-in, and will automatically generate the necessary files and folders needed for paginated listings.

The following code generates the Blog page listings and the paginator links at the bottom of each blog page for this site:

<div class="blog-page">
<h1 class="page-title">{{ page.title }}</h1>
{% for post in paginator.posts %}
<article class="posts">
  <header>
    <h1><a class="post-link"
           href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h1>
    <time datetime="{{ post.date | datetime | date_to_xmlschema }}"
      >{{ post.date | date: "%b %-d, %Y" }}
    </time>
    <div class="readtime">Time to read: {{ post.content | reading_time_as_s }}</div>
  </header>
  {{ post.content }}
</article>
{% endfor %}

<div>
  <ul class="pagination">
    {% if paginator.next_page %}
    <li><a class="next" href="{{ site.baseurl }}/page{{ paginator.next_page }}">&laquo;&nbsp;Older</a></li>
    {% else %}
    <li><span class="disabled">&laquo;&nbsp;Older</span></li>
    {% endif %}
    <a href="{{ site.baseurl }}/archives">Archives</a>
    {% if paginator.previous_page %}
    {% if paginator.previous_page == 1 %}
    <li><a class="prev" href="{{ site.baseurl }}/">Newer&nbsp;&raquo;</a></li>
    {% else %}
    <li><a class="prev" href="{{ site.baseurl }}/page{{ paginator.previous_page }}">Newer&nbsp;&raquo;</a></li>
    {% endif %}
    {% else %}
    <li><span class="disabled">Newer&nbsp;&raquo;</span></li>
    {% endif %}
  </ul>
</div>
</div>

Recent post listing

The listing of Recent posts is generated in a very similar manner to the Archive listing.

<section>
  <div>
    <h2>Recent</h2>
    <ul>
      {% for post in site.posts limit: 5 %}
      <li><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></li>
      {% endfor %}
    </ul>
  </div>
</section>

The Recent posts listing is shown in a block below the content on this site.

Part 2 will describe some of the features added by Plugins.