How to add blog post on Jekyll
posted on February 5, 2016

We use Jekyll to creat Kording lab blog. Not only us that use Jekyll as an organization blog, Stack Overflow Blog also use Jekyll. They host all the blog on Github StackExchange/stack-blog which has really nice instruction to add new posts.

Using Jekyll, it’s very easy to add post on All the posts are located in _posts folder located in Post arrangement is based on date. Each posts can be written in markdown format (also in html too, like <br> means new line). File name of each post is in format such as or On top of each post, you just have to state 3 main things in markdown before writing a post: title, description and categories as follows

title: Summer School in Computational Sensory-Motor Neuroscience (CoSMo)
description: all links to CoSMo summer school in computational neuroscience materials
categories: scientists

where categories can be only 4 choices: scientists, students, discussion, blog. It will automatically put that blog post on the page depending on categories you put. description will be shown when you share on social media like Facebook or Twitter.

There are multiple ways for someone to add posts:

Add math equation

No problem, Jekyll allows you to add math equation!

To add inline math, we don’t use $ like in LaTeX since it can be conflicted with a lot of actual dollar sign so we have to use \\( and \\) as opening and closing bracket instead i.e.
\\(\mathbf{y} = A \mathbf{x}\\) will render as \(\mathbf{y} = A \mathbf{x}\)

For one-line equation, we can use the same as LaTeX that is
$$\cfrac{d}{dt}\cfrac{\partial L}{\partial \dot{q}} = \cfrac{\partial L}{\partial q}$$. It will render as

\[\cfrac{d}{dt}\cfrac{\partial L}{\partial \dot{q}} = \cfrac{\partial L}{\partial q}\]

Add code snippet

For inline code, it’s the same format as simple markdown format. Use back tick (symbol below tilde) to highlight inline code. If you want to add multiple line of codes, see for more information. Basically we will use liquid tag highlight <programming language> and endhighlight as beginning and end tag for code snippet. Or you can simple use triple back tick same as when you write on Github repository.

For images link, we can add html as follows

  <img width="300" src=""/>

For Youtube, you can just copy embed link from Youtube (share > embed). For example,

<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>

Again, why Jekyll?

First, Jekyll allows very easy way to transform and render plain markdown file (lingua franca of open-source community) to html which is our blog. It’s free hosting on with Github pages which just updating to Jekyll 3.0 which is much faster. See more at GitHub Pages now faster and simpler with Jekyll 3.0 blog. It uses kramdown markdown which is very intuitive way to write.