What is Jekyll and why might you want to learn it?

Disclaimer: I am not an expert, I am only Learning in Public.
Also, this post is not meant to be a comprehensive tutorial on how to set up Jekyll, for that I recommend this Jekyll guide from Happy Coding.

Jekyll is a powerful tool written in Ruby that lets you do two handy things with your website:

• It lets you set your layout once and apply it to all of your pages
• It lets you convert markdowns into HTML

I will run through each of these points.

Setting your layout

Without Jekyll, if you try to create a blog from scratch or a site that's kind of like a library with many different pages on it, you will set up an HTML file for each page. Your page might look something like this:

<header> My Awesome blog </header>

<nav>
  <a href="#">HTML</a> 
  <a href="#">CSS</a> 
  <a href="#">JavaScript</a> 
  <a href="#">Python</a>
</nav>

<div>
<h1> Here is my blog title </h1>

<p> Here are my content </p>
</div>

<footer>
  <a href=#twitter</a> 
  <a href=#>facebook</a> 
  <a href=#>Youtube</a> 
  <a href=#>GitHub</a>
</footer>

(code might not be exactly how you would write to get all your CSS write, the above is for illustration purpose only)

Why is this a problem you might ask, imagine you grew your blog now and you have more than a hundred pages. Now, suddenly you thought of a new feature to implement, maybe a comment section below your blog, or maybe you would want to change the style and add an extra link to your navbar. Now you would have to change all your html on every single page. This sounds extremely tedious and error prone, as programmers we'd rather not be doing that.

Fortunately, with Jekyll you would be able to automate your code. You will need to create a default layout page, call it default.html. Your default.html would look something like this:

<header> My Awesome blog </header>

<nav>
  <a href="#">HTML</a> 
  <a href="#">CSS</a> 
  <a href="#">JavaScript</a> 
  <a href="#">Python</a>
</nav>

{{ content }}

<footer>
  <a href=#twitter</a> 
  <a href=#>facebook</a> 
  <a href=#>Youtube</a> 
  <a href=#>GitHub</a>
</footer>

{{ content }} tells Jekyll that this is the place that they will fetch the content from your other files (either HTML or Markdown).

Now, when you create your new pages, you just need to write these instead:

---
layout: default
---

<h1> Here is my blog title </h1>

<p> Here are my content </p>

These blocks of html code goes straight into the {{ content }} part of the default layout for every new page that you have created.

By using Jekyll, you will be able to automate the repetitive parts of your html script. Now if you want to change your navbar or add a sidebar feature and your page, you only need to change it once in your default.html file. This is super handy and eliminate most of your sources of errors in one step.

Converting markdown into HTML

If you used markdown before (which you would have if you use GitHub or have created a post on dev.to), you would know how much more handy it is to write markdown files compared to writing HTML. Jekyll converts your markdown into html for you so that if you have a large website or blog, you can write everything in markdown and host it on a site that runs Jekyll (Github does that, so you can do this by hosting your blog on GitHub for example). This saves loads of time and eliminates sources of error.
If you haven't written markdown before, here is a comparison between html and markdown for the same article:

Your HTML looks like this

<h1>This is my header</h1>

<p>This is my paragraph</p>

<h2>This is my subheader</h2>

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

<a href=github.com>here is a link to github</a>

Your markdown looks like this

#This is my header

This is my paragraph

##This is my subheader

-item 1
-item 2
-item 3
-item 4

[here is a link to github](github.com)

When you have a lot of content, this starts to make a significant difference to how much time you need to put in to create each page. So being able to convert your markdown into HTML is an extremely powerful tool for if you want to create a large blog.

note: I haven't gone through the nitty gritty of how to set up Jekyll, this post is mainly to illustrate the power of using Jekyll. For a more in-depth tutorial, I would highly recommend this Jekyll guide from Happy Coding, or to go to the Jekyll site itself to learn form the source.

Let me know if there are any important details of Jekyll you felt like I have missed out, I am always happy to be corrected :)

Happy coding!