Using Jekyll to make my blog.
Thursday 16 June, 2011There are a ton of these posts out there. For all I know it is a requirement of using Jekyll.
I think I was a little more noobish than most when I was trying to start out with Jekyll. I had a feeling that it was the right thing for me, so I was determined to figure it out.
It turned out not to be nearly as complicated as it seemed, but the documentation was pretty minimal and most of the examples were really complicated.
Not a good combo.
What Jekyll does, essentially, is generates a flat HTML website based on some templates that you set up. (Flat HTML means that there isn’t a database, like SQL, involved. That makes it really easy to back up, publish, migrate, &c. The most basic example is as follows:
First, install Jekyll. If you have RubyGems installed, you can install it with gem install jekyll Otherwise, check out the repo on GitHub
Next, create a _layouts directory and put a file called default.html inside.
In the file you will put in {{ content }} Something like this:
<HEAD>
<TITLE>{{ post.title }}</TITLE>
</HEAD>
<BODY>
<DIV>
{{ content }}
</DIV>
</BODY>
</HTML>
That is the first part. Now you’ll make the file with content (this file will be called index.html):
layout: default
title: My Webpage
---
<h1>Hello, World!</h1>
<p>This is my new website. I made it myself!</p>
When you run jekyll in your site directory, it will grab the content from index.html and run it through your layout and stick it all in the _site directory. The {{ content }} bit will be replaced by everything below the YAML header (which is between the two — at the top).
At this point, this might seem a bit silly as it is considerably easier to just make the index file. The point is that you take the default layout and then making all of your pages is really simple. Also, when you want to change the layout you just change the default file and then re-run jekyll.
The real nice part of Jekyll is when it comes to blog posts. You’d want to create a _posts directory at this point. If you want the posts to look different than the default page, you can make a new layout in your _layouts directory.
The filename needs to be something like 2011-06-16-First.html and it would look similar to the index file above.
layout: posts
title: My First Blog Post
---
<h1>Blog Time</h1>
<p>This is my first blog post! I hope my host can handle all of the traffic.</p>
That’s pretty much the basic layout. Any file not in _posts will be placed in the same order in the _site directory.
You can make a nice page that will display a list of all of your blog posts like this:
{% for post in site.posts %}
<div class="post_info">
<li><span>{{ post.date | date:"%d/%m/%Y" }}</span> <a href="{{ post.url }}">{{ post.title }}</a> <em>{{ post.snip }}</em></li>
<br />
</div>
{% endfor %}
</ul>
The {% for %} statement at the top will grab everything that is in the _posts directory. It will print out the date and then the title as well as a custom bit that I added to the YAML header called snip. The end result is a nice list of your posts.
Back