For a while i been wanting to create a blog, something that for me looked kind of impossible, because i not a big fan of writing , but with the constant necessity to test new technologies and to document what i learned, concepts or code, finally i took the courage and decide to create my blog ( hehe if you are reading this, it not just a plan anymore ). Then i found Jekyll, a tool/framework that creates static sites from the content you create and put in it, following the Jekyll convention, then it gets the content, apply the templates and the necessary processing and will generate the static content. The fun part is that you can can host your content anywhere, you can host even in the github.io FOR FREE.

So let's start to see how to use the Jekyll, first you need to have the Ruby installed, we will not see how to install it so good luck, in this tutorial i am using the version 2.2.2. You also need the RubyGems installed. Let's start installing the Jekyll and the bundler gems, you can achieve that running the following command in your terminal on the folder of the project: 

$ gem install jekyll bundler

After installed you will have at your disposal the jekyll command in the terminal, so let's run the following instruction to create a new Jekyll project

$ jekyll new . --force

This command will create the folders structure and the Jekyll configuration file, also will create some example files showing how to use the Jekyll, what is really useful for who is starting to use the tool now

See that the --force option is just for the case that your folder is not empty

Let's explain a little about the folders structure of Jekyll, first the folder "_layout", in this folder you will put all the files that you want to use as a layout (DUH!), and in the pages you can reference one layout by the name of the file. See a example of layout:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
      {{ content }}
  </body>
</html>

The instruction {{ content }}, is a instruction from Liquid template, that is used by Jekyll to render the templates, this instruction is responsible for taking the content of the page and putting in the template. See an example of a page using the previous template:

---
title: Beginning with Jekyll
layout: my-template
---
<h1>Hello world</h1>
<h2>Beginning with Jekyll</h2>

See the instructions between the characters "---", they are like declarations, some of them you can create others are specific for Jekyll use, for example the layout, in the value you put the name without the extension of the template you want to use, you can access the variables through the prefix "page", as you can see in the expression "" the variables will be disponible in the current file or in the template that the current file references

On the "_include" folder, we can create the files that can be included in other pages using the expression {% include file_name.html %}, With that we can reuse some partials pages into different layouts or pages. See an example:

---
title: Beginning with Jekyll
layout: my-template
---
<h1>Hello world</h1>
<h2>Beginning with Jekyll</h2>

{% include contact-form.html %}

On the "_sass" folder, you can store your partial .sass/.scss files, by default Jekyll comes with support for sass files, lets say that you have a "main.scss" file in the "css" folder ( "css/main.scss" ), when you build the project, you will have the file processed to "css/main.css", and the files in the _sass folder you can use to include to yours main files.

Now the main folder of the project, the _post folder, in this page you will create your blog posts, following the Jekyll convention of "year-month-day-name-of-the-file", for instance the file of this post is "2016-11-21-beginning-with-jekyll.html". This convention need to be followed, because the Jekyll will only consider your posts that follows the convention. See a post example:

---
layout: my-post-layout
title:  Beginning with Jekyll
date:   2016-11-21 20:20:33 -0300
categories: jekyll
---
My html post content....

See the date variable, she can't have a different value thant the date in the file name. The categories variable is also important to the URL of the post , this post, for instance, will be accessed in the URL "/jekyll/2016/11/21/beggining-with-jekyll", in the case that you omits the categories variable, the URL will be "/2016/11/20/comecanto-com-jekyll"

The Jekyll also gives the possibility to list the created posts, for each file in the _post folder, will be a item in the site.posts list variable, this variable is a list of posts chronological sorted. See an example of listing the posts:

---
title: Beggining with Jekyll
layout: my-template
---
<h1>Posts List</h1>
{% for post in site.posts limit:5 %}
<div class="post-preview">
  <a href="{{ post.url }}">
    <h2 class="post-title">
      {{  post.title }}
    </h2>
    <h3 class="post-subtitle">
      {{  post.description }}
    </h3>
  </a> 
</div>
<hr>
{% endfor %}

Now that we know the basic of Jekyll, let's test our first site. To test the project in the local environment you just need to run the following command in the root folder of your project:

$ jekyll server

The Jekyll will compile your files and run a local server on the URL: http://localhost:4000

To finish, another essential command is the build command, this command compiles all your files and puts in the _site folder, with those files you can host your "static" site anywhere

$ jekyll build

The Jekyll is a really powerfull tool, and also have many plugins and features to be explored, what we have saw is just the tip of the iceberg, you can access the site https://jekyllrb.com/ and see a more of his features.