So in the last tutorial we got a simple page up and running. That was essentially the "hello world" of Jekyll. Now, let's get to the core reason why people choose Jekyll - writing blog posts. This tutorial will cover the main language Jekyll posts are written in.
Introduction to Markdown
Markdown is markup's more attractive sister. You're able to do most of the common things associated with markup, except in a more elegant way. HTML is probably the most widely known and widely used markup language. The issue with html is that it looks like this:
<html> <head> <body> <h1> Hello World </h1> <p> Check out this new site! </p> </body> </head> </html>
While it makes sense how it works programmatically, the tags can get quite repetitive after a while. This is where markdown comes in. That same snippet above can be written like this in markdown
# Hello World Check out this new site!
See? Isn't that a lot cleaner?! Writing blogs like this is way more natural then with markup so you can just focus on the content.
To add a header all you need to do is type a hashtag. The more hashtags, the smaller the headers will be. For example:
# Header 1 ## Header 2 ### Header 3
It ends up looking like this:
If you're familiar with html the hashtag count corresponds to the
Links are important in any blog post as it allows the reader to look up further information on the topic your post is covering.
This is the syntax for links:
Say you want to link a user to a wikipedia article about cats. Here is how you do it in markdown:
The result ends up looking like this: cats
Adding direct images
You've just learned how to add a click link, but now how do you add an image?
The syntax is similar to linking, except with an added exclamation:
So if you wanted an image of a cat you'd write it out like this:
Which ends up looking like this:
Adding text blocks
You've probably noticed me including small text boxes like this:
this is a text box
In order to do that, all you need to do is type
text is your text
There are a couple of rules for this, but I'll only cover a
var i = 5; i += 2; alert(i);
If you want to add a backtick to your textbox, you need to escape it by adding an extra backtick before and after it.
It looks like this:
`` `sup` ``
Escaping the example above looks like this:
``` `` `sup` `` ```
This is pretty much the basics of markdown. You can actually get a lot done with just these few things. If you want to look more into it, here's the official documentation. This cheatsheet is also really helpful!
This article was written by Steven Yang. Follow him on Twitter