How To Use Jekyll Part-3

Created by Phil Thompson

Welcome to part 3 of my introduction tutorial to jekyll. If you haven’t seen part 1 or 2 then just go back to by blog page and you should find them there.

In this tutorial I’m going to show you a couple of thing from adding categories to your posts, listing posts by that category to a simple peace of code that will give you an RSS feed for your site just like the one on my site www.bhsowebdesign.com.

Right lets get started with adding categories to your posts. Open up your post that is in the _posts folder. Then this bit is super simple just go to the yaml mark-up at the top of the page.


−−−
layout: post
type: post
title: Hello World
−−−

Then anywhere inside that just put category: name and categories: name and then it is done.


−−−
layout: post
type: post
title: Hello World
category: name
categories: name
−−−

Now just save your file and remember to run jekyll from your ruby terminal.

If you don’t know how to do that then just check out part 1 of this tutorial.

Now lets move to use these categories and make a page that just displays posts with a certain one in it.

So lets create a categories folder and then put a folder in that called name and then in that put a index.html

Add These Files

Then open the index.html and add this code to the file.


−−−
layout: default
title: Category Name
−−−
<ul>
   for post in site.categories.name 
    <a href=" post.url ">
      <li>
        <h4> post.title </h4>
         post.intro 
      </li>
    </a>
   endfor 
</ul>

Now you have a page that will show all the posts that you have in that category nice and simple. All you have to do is change the part that says name to the name of the category that you want it to show.

That is it you now have all of the basic’s that you need to start building your own blog on jekyll but lets now add a RSS feed for your site so people can use a RSS reader to track your site posts.

To get us started you need to create a file in the root of your site called _config.yaml inside this file you will need to add a couple of little details about your site. These details are things like the site name and the site domain name so just enter the following.


name: My Blog Site
description: This is the site of my blog
url: http://www.mydomain.com

Then you will need to create another file inyour sites root called feed.xml this as you may have guessed will be the file that your RSS feed will be produced using the jekyll loop.

Lets start with the items that don’t need the loop things like getting it to display the site title and description in there.

For starters we don’t want it to use a layout so we are going to say none to that.


−−−
layout: none
−−−

Then we are going to put some of the tags that RSS needs in the file.


−−−
layout: none
−−−
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
  </channel>
</rss>

Right now we have layed that ground work we can get onto getting the file to spit out all the information about our site and posts.

Firstly lets get the site title and description in the right place with the right tags, so enter the following.


−−−
layout: none
−−−
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title> site.name </title>
    <description> site.description </description>
    <link> site.url </link>
    <atom:link href=" site.url /feed.xml" rel="self" type="application/rss+xml" />
  </channel>
</rss>

and then finally we need to put in the post loop so that jekyll output’s all of out post in the RSS feed like so.


−−−
layout: none
−−−
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title> site.name </title>
    <description> site.description </description>
    <link> site.url </link>
    <atom:link href=" site.url /feed.xml" rel="self" type="application/rss+xml" />
     for post in site.posts 
      <item>
        <title> post.title </title>
        <description> post.content | xml_escape </description>
        <pubDate> post.date | date: "%a, %d %b %Y %H:%M:%S %z" </pubDate>
        <link> site.url  post.url </link>
        <guid isPermaLink="true"> site.url  post.url </guid>
      </item>
     endfor 
  </channel>
</rss>

That is that you have finished doing your RSS feed generator for your jekyll site all you need to do now is run your jekyll command in your ruby console and you will see it generated.

This completes my tutorial on the basics of jekyll.

One thing you will need to remember is that all of the pages are static so if you want to add comments to a post for example you will need to use a service like Disqus to run your comments and also things like Google Custom Search to provide search for you site.

So anyway have fun and play with jekyll and experiment and see what you can do with it.

comments powered by Disqus