Já a um tempo estava pensando em fazer um blog, algo que pra mim parecia meio impossível, até porque não sou muito fan de escrever, mas com a constante necessidade de testar novas tecnologias e de escrever, seja código ou conceitos, o que aprendi para lembrar depois, criei coragem e finalmente decidi fazer meu blog. Foi então que me deparei com o Jekyll, uma ferramenta que gera um site estático a partir do conteúdo que você adiciona seguindo uma convenção própria dele, o Jekyll então pega o conteúdo, aplica os templates e conversões necessárias e cospe o conteúdo estático. E a parte mais legal, você pode hospedar o conteudo no github.io DE GRAÇA.

Então vamos ver como começar a usar o Jekyll, primeiro você precisa ter o Ruby instalado, nesse tutorial estou utilizando a versão 2.2.2, tenha também o RubyGems instalado. Comece instalando o Jekyll e o bundler rodando o comando no console na pasta do projeto. 

$ gem install jekyll bundler

Após a instalação você vai ter disponível o comando jekyll, então vamos rodar a seguinte instrução para criar um novo projeto Jekyll

$ jekyll new . --force

Esse comando irá criar a estrutura de pastas e o arquivo de configuração do Jekyll, também irá criar alguns arquivos de exemplos para o uso do Jekyll, o que é muito útil para quem está começando a utilizar a ferramenta.

Veja que a opção --force é apenas para o caso de sua pasta não estiver vazia.

Vamos começar explicando um pouco da estrutura de pastas do Jekyll, vamos começar pela pasta "_layout", nessa pasta você coloca todos os arquivos que você planeja usar como layout, e nas páginas filhas você irá referenciar esses arquivos pelo nome sem a extensão. Veja o exemplo a seguir::

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

A instrução {{ content }}, é uma instrução do Liquid template, que é utilizado pelo Jekyll para renderização do template, essa instrução é responsável por pegar o conteudo da pagina e joga-lo dentro do template especificado. Veja um exemplo de uma página utilizando esse template:

---
title: Começando com Jekyll
layout: my-template
---
<h1>Hello world</h1>
<h2>Começando com Jekyll</h2>

Perceba as instruções entre os "---", elas funcionam como declarações, o nome layout especifica que arquivo na pasta _layout estamos referênciando, o title funciona como uma declaração de variável que pode ser acessado através do prefixo "page", como pode ser observado na instrução {{ page.title }}, essa variáveis estarão disponíveis seja no arquivo atual da página, ou no template, quando o Jekyll tentar processar os arquivos ele vai encontrar as variáveis.

Na pasta "_include", podemos criar arquivos que podem ser incluídos em outras páginas através da instrução {% include nome-do-arquivo.html %}, assim podemos reaproveitar algumas partes de páginas em diferentes layouts.

---
title: Começando com Jekyll
layout: my-template
---
<h1>Hello world</h1>
<h2>Começando com Jekyll</h2>

{% include contact-form.html %}

Na pasta "_sass", você pode quardar seus arquivos de parciais .sass/.scss, por default o Jekyll vem com suporte a arquivos sass e scss, então supondo que você possua um arquivo na pasta "css/main.scss", quando você processar o projeto, você vai ter um arquivo "css/main.css".

gora a pasta principal do seu projeto Jekyll, a pasta "_post", nela você vai criar os seus posts do seu blog, seguindo a convenção usada pelo Jekyll de ano-mes-dia-nome-do-arquivo", por exemplo o arquivo desse post é "2016-11-16-comecando-com-jekyll.html". Essa convenção deve ser seguida, pois o Jekyll só irá considerar o arquivo na pasta caso você a siga. Veja um exemplo de post

---
layout: my-post-layout
title:  "Começando com Jekyll"
date:   2016-11-20 20:20:33 -0300
categories: jekyll
---
Conteudo....

Note a variável date, ela não pode ser diferente da data do arquivo. A variável categories também é importante para a montagem das urls default do post, esse post será acessível na url "/jekyll/2016/11/20/comecanto-com-jekyll", caso seja omitido a variável categories, sera apenas "/2016/11/20/comecanto-com-jekyll"

O Jekyll também lhe dá a possibilidade de listar os posts, para cada arquivo que existir na pasta “_posts”, um registro será adicionado na variável "site.posts", que é uma lista dos posts cronologicamente. Veja o exemplo de listagem:

---
title: Começando com Jekyll
layout: my-template
---
<h1>Lista Posts</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 %}

Agora que sabemos o básico do Jekyll, vamos testar o nosso primeiro site, para testar localmente o projeto, basta rodar o comando seguinte na pasta raiz do projeto

$ jekyll server

O Jekyll irá compilar seus arquivos e subir um servidor local no endereço http://localhost:4000

Por fim, outro comando essencial é o build, ele irá compilar seus arquivos e colocá-los na pasta _site, com esses arquivos você pode hospedar seu site "estático" onde quiser

$ jekyll build

O Jekyll é uma ferramenta bastante poderoza, possui muitos plugins e funcionalidades para serem exploradas, oque vimos aqui é apenas a ponta do iceberg, você pode acessar o site https://jekyllrb.com/ e ver um pouco mais de suas funcionalidades.