The Jekyll Blogging Engine

25 Jun 2014

Hi! This is my first Test Post, which I created with Jekyll. Let's explore the Power of Jekyll (Blog Engine) its themes and Markdown (Text Formatting Syntax)

I downloaded Jekyll today (it's quite costly under windows) and I'm just fascinatet, how Jekyll works. The simplicity on the surface and the cleverness at the inside. The fact that Jekyll works with Ruby makes it also very interessant. I'm not expirienced, not even familiar with Ruby, but I know, that it's a very powerful language.

Jekyll transform your plain text into static websites and blogs.

Install Jekyll

Here are some links for install Jekyll on Windows:

These are the one I used, and they're really helpful!

Themes for Jekyll

Cool Themes

The default theme of jekyll isn't very stylish, so I searched some cool Themes. I didn't want to make one at my own, I'd rather take an existing one and modify it. That's because then, I don't have to read thousands of docs, I just can learn from examples. Maybe I'll make my own Theme, but that could wait.

These are my favourite themes:

Hyde: Jep, that's the one right here.
Vanilla Bean Cream: I think, this theme could be styled very nice!
Hikari: Nice, simple and clean theme. Very colorful. Like it.

Install Themes

The Installation of Themes, is very easy. You just have to replace the auto-generated content with the theme content ((which you mostly can download on GitHub). As example here is the GitHub Repository of the Hyde Theme: https://github.com/mdo/hyde

Gist Integration

A very interesting feature is the possibility to display Gists very easy. So at first, here's a Gist I created for 140 Bytes. A working Phone Number Validator in just 97 Bytes of code.

So, what do you think, how much I had to write, to display this gist? An AJAX Request, a complicated API-Call or even a Third-Party Script Inclusion?

Here you are (whitout the backslash at the start):

{\%gist 8849169 README.md %}

Code Highlighting

Code Highlighting is very easy in Jekyll. And also It looks very nice.

Just Type (again without backslashes):

{\% highlight language %} 
Code to display
{\%endhighlight%}

HTML

<body>
    <h1 class="heading" onclick="clickTrigger();">Hello World</h1>
</body>

CSS

.heading{
    color: #c0392b;
    font-size: 28px;
    text-align: center;
}

JS

function clickTrigger(){
    alert("Clicked Me!");
}

Looks very nice, I guess :)

Images

Of course, you can also insert images and downloadable files. If you have trouble with it visit this official Guide.

Jekyll Logo Example PDF File

Conclusion

Jekyll is a very nice Blog Engine for Devs, but for people who never interact with code it's too complicated. I personally like Jekyll Very much and I'll use it as my Blog Engine because it's so adaptable and nerdy :)

Thanks for Reading and a nice Day

Tobi

Tobi P