Github from Scratch

Home Introduction

Part I: Learning to sail

Part II: Sail away!

Wall of Fame Find more treasures

Part 2: Sail away!

Jekyll in action: make a blog

A static site is cool – but having a blog where you can regularly write is better!


Write your first two posts and add a linked list of all posts to your index.

How to do it

Create a new directory _posts and in that a file

Write this into the post:

title: my first post
layout: default
hello world

Now open Awesome, huh? There it is! The thing is, that is has no headline. So we will make a special layout for blogposts:

Create a new file post.html in the _layouts folder. Put this inside the file:

<h1>{{ page.title }}</h1>
{{ content }}

In your post, change layout: from default to post.

If you now go back to you should have your headline generated from what you entered behind title: on top.

Let's make a second post with this inside:

title: my second post
layout: post
hello kittens

Only one thing left missing. We want to have a list of all our blogposts on our index, right? Put this into your index.html:

    {% for post in site.posts %}
        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
</ul> should now feature the two posts you already wrote. But the great part is: any post you add will automatically appear in this list! Awesome, huh?

Actually, by using {% for post in site.posts %} you did your first bit of programming! You iterated over an array. But that is something for another course :)

What did you just do?

You used Jekyll to makes pages from your blogposts and Liquid to generate headlines and a list of posts. Follow these links to learn about it.

And what about that ".md" file extension?

You discovered one the secret superpowers of the web: Markdown.

Markdown provides you with a small subset of HTML-Tags – without having to write the tags! That's right. Here's an example that should get you started:

## A sub headline

this is a paragraph. 
Here is an image: 
![more kittens]( 
[This is a link](

- and this
- is a
- list

will become

<h2>A sub headline</h2>

this is a paragraph. 
Here is an image: 
<img src="" alt="more kittens">. 
<a href="">This is a link</a>.

<li>and this</li>
<li>is a </li>

Just try Markdown out in your posts and read more about it at the creator's site.