In my previous post I covered installation of Jekyll, RDiscount and Pygments. In this post I will show you how you can create the minimum file structure for Jekyll and configure it with RDiscount and Pygments.
Files and folders
Once we have installed everything neccessary for our Jekyll website to function now we need to create our site file structure and make some configurations.
First let's create a folder where all project files will be stored: c:\projects\example.com and inside this folder create _config.yml file.
_config.yml
This file store our site configuration data and it must reside within your project folder.
auto: true
permalink: pretty
markdown: rdiscount
pygments: true
auto: if set to true Jekyll will recreate a site every time when some file is modified instead of restarting Jekyll server every time. This is very useful when you are working on your layout and need to check the changes you did.
permalink: if set to pretty then all of site entries is available under /:categories/:year/:month/:day/:title format. Such URL structure is very good for SEO purposes and personally I like to see at least within the URL the date when entry was published.
markdown: with Jekyll you can use Markdown syntax to write your posts. While RDiscount is faster interpreter than Maruku you will need to write some HTML by hand as it does not support all of the HTML tags.
pygments: If true enables highlighting with Pygments out of the box. Only thing you need is to include some syntax.css file with styling for your markup highlighting.
Now, when the configuration options is set let's create _layouts folder. ( This is the folder where we keep our template files. ) and within this folder create default.html file with the following markup:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ page.title }}</title>
<meta name="title" content="{{ page.title }}" />
<meta name="description" content="{{ page.meta-description }}" />
<link rel="stylesheet" media="screen, projection" type="text/css" href="/style/default.css" />
<link rel="stylesheet" media="screen, projection" type="text/css" href="/style/syntax.css" />
</head>
<body>
<!-- header start -->
<header role="banner">
<h1 class="site-logo"><a rel="home" title="website title" href="/">Website Title</a></h1>
<nav role="navigation" class="nav-primary">
<ul>
<li><a href="/" title="home sweet home">Home</a></li>
</ul>
</nav>
</header>
<!-- header end -->
<!-- main area start -->
<section role="main">
{{ content }}
</section>
<!-- main area end -->
<!-- footer start -->
<footer role="contentinfo">
<p><small>Copyright 2011 Example Company</small></p>
</footer>
<!-- footer end -->
</body>
</html>
{{ page.title }}
{{ page.meta-description }}
{{ content }}
_layouts/page.html
This file contains formatting for our pages.
---
layout: default
---
<section id="page">
<h1 class="entry-title">{{ page.title }}</h1>
{{ content }}
</section>
index.html
This file is used to generate your site index/home page:
---
layout: default
title: Example Page Title
meta-description: Place some description for your index.html page here
---
{% for post in site.posts limit:10 %}
<article>
<h2><a href="{{ post.url }}" title="Permalink to {{ post.title }}">{{ post.title }}</a></h2>
<time class="updated" datetime="{{ post.date | date_to_xmlschema }}" pubdate>{{ post.date | date_to_string }}</time>
{{ post.content }}
</article>
{% endfor %}
In this file we are declaring that only latest 10 posts should be displayed and for each post display post title with permalink, date the post was published and your entry content
_layouts/post.html
This file contains formatting for our single post display page.
---
layout: default
---
<article role="article" class="hentry">
<!-- entry header start -->
<header>
<h1 class="entry-title">{{ page.title }}</h1>
<small>Published on <time class="updated" datetime="{{ site.time | date_to_xmlschema }}" pubdate>{{ page.date | date_to_string }}</time></small>
</header>
<!-- entry header end -->
<!-- entry content start -->
<div class="entry-content">
{{ content }}
</div>
<!-- entry content end -->
<!-- pagination links start -->
<div class="pagination">
{% if page.previous.url %}
<span class="previous">« <a href="{{ page.previous.url }}/" rel="previous" title="{{ page.previous.title }}">{{ page.previous.title }}</a></span>
{% endif %}
{% if page.next.url %}
<span class="next"><a href="{{ page.next.url }}/" rel="next" title="{{ page.next.title }}">{{ page.next.title }}</a> »</span>
{% endif %}
</div>
<!-- pagination links end -->
</article>
You can notice that I have enabled pagination on bottom of our post so we can navigate to previous/next posts easily.