17 de Agosto de 2015 Por Marcia Ramos

O que é Jekyll

Jekyll é um programa escrito em Ruby que permite a criação dinâmica de websites e blogs utilizando apenas html, css e javascript. Tecnicamente, chama-se Static Site Generator (SSG), Gerador de websites estáticos, em Português. Entre os SSGs disponíveis, Jekyll é de longe o mais utilizado.

Websites em Jekyll são escritos utilizando três tecnologias de programação: Liquid Templating Language, Yaml e Markdown, que são então automaticamente compiladas para formar páginas em html.

Markdown

Markdown é uma linguagem simplificada para escrever arquivos publicados em websites. Por exemplo, em html usa-se a tag strong <strong>Texto</strong> para marcar palavras e frases em negrito. No markdown utilizado pelo Jekyll, o mesmo propósito é atingido apenas com dois asteriscos ** antes e depois do texto que se deseja em negrito:

**Texto**
<!-- é compilado para: -->
<strong>Texto</strong>

No nosso artigo Jekyll e GitHub Markdown você poderá encontrar uma lista completa dos markdowns utilizados com mais frequência ao escrever em Jekyll.

O arquivo em markdown pode ter algumas extensões. A mais abreviada e utilizada é .md. Para se ter uma ideia do quanto este tipo de arquivo é utilizado, o Github utiliza a extensão .md em todos os seus README. Portanto, o arquivo .md pode ser utilizado como está, como no caso do Github, ou, como no caso do Jekyll, poderá ser compilado para formar um html “normal”, com todas as tags em html.

A escrita em Markdown é amplamente utilizada e pode ser encontrada em diversos websites, como por exemplo GitHub, Stack Overflow, Wordpress Posts e em foruns desenvolvidos com o Discourse, como Sublime Forum e Jekyll Talk.

Yaml

O Yaml é utilizado para definir as configurações e como seu site será compilado. Para isso, existe na pasta raíz um arquivo de configuração chamado _config.yml. Neste arquivo você definirá as configuração para todo o site - e não para arquivos individuais.

Há uma série de configurações padrão que você pode aplicar no seu website e recuperá-las com facilidade utilizando a Liquid, próximo tópico deste artigo. Há outras variáveis que você mesmo poderá definir e recuperar com a mesma facilidade. Basta entender a lógica que você aprenderá a usá-las e poderá ver como são úteis.

_config.yml

Neste arquivo _config.yml, você definirá variáveis do seu site, como por exemplo: - Título da Home Page - Descrição da Home Page - Autor (do site)

Além das variáveis comuns você deverá configurar o seguinte: - baseurl = é o caminho padrão do seu site, ou seja, o domínio que você vai utilizar para seu site - markdown = qual é o tipo de markdown você vai utilizar nos seus arquivos - exclude = é um parâmetro para excluir da compilação arquivos que você não deseja que façam parte do seu site

No fim, você terá seu _config.yml parecido com este exemplo:

---
markdown: kramdown
exclude: ["README.md"]

title: Meu website interessante
description: Vamos falar de coisas interessantes por aqui!
author: Meu Nome

baseurl: http://meudominio.com.br
---

Este é apenas um exemplo simples de configuração. Conforme você vai aprendendo a usar as ferramentas do Jekyll, você vai atribuindo mais variáveis ao seu _config.yml.

Note que não há espaço entre a variável e o começo da linha e que há apenas um espaço entre os : e o valor da variável. Estes espaços devem ser estritamente respeitados, sob pena de gerar erros difíceis de encontrar no futuro. Isso acontece porque você poderá usar espaços para definir vários atributos a uma única variável. Mas não vamos aprofundar este detalhe neste artigo introdutório. Fica a menção apenas para que você tome cuidado com os espaços e símbolos e detalhes deste tipo na hora de escrever em partes Yaml do seu novo projeto em Jekyll.

Arquivos individuais

Os arquivos individuais são compostos por duas partes: a parte superior, ou cabeçalho yaml (ou “yaml front matter”), e o corpo - em html ou markdown.

A parte do cabeçalho define as variáveis particulares daquela página em questão. Por exemplo, se o seu website vai comportar um blog, você terá o autor da obra - do website - e o autor dos artigos publicados no blog. Desta forma, você terá dois tipos de variáveis, ambas chamadas “autor”: uma será autor do site e outra autor do post. Para chamá-las ao longo do website, basta especificar de qual você está falando, utilizando a chamada Liquid apropriada.

As suas páginas individuais deverão conter sempre a seguinte estrutura:

---
configurações específicas da página
---

Texto da página

Neste link você poderá encontrar toda a documentação do Yaml. Nesta página para a qual o link aponta, você poderá ver o quão útil ela poderá tornar-se para seu website.

Neste link você encontrará o tutorial do Jekyll sobre o uso do Yaml Front Matter.

Liquid

A Liquid é uma ferramenta excelente para trabalhar com textos que se repetem ao longo de um website. Podemos considerá-lo o “irmão” dos php includes para html. A Liquid dinamiza o conteúdo do website, assim como muitos desenvolvedores fazem utilizando o php.

Variáveis

Por exemplo, se você deseja repetir a informação de uma url única ao longo do site, você poderá atribuir a ela uma variável no arquivo _config.yml:

---
# suas configurações...

my_url: meudominio.com.br/meuarquivo.html

# suas configurações...
---

…e repeti-la ao longo do site utilizando uma chamada para o objeto:

 <a href"{{ site.my_url }}">My url title</a> => em arquivos .html

[My url title]({{ site.my_url }})  => em arquivos .md

Obs.: Talvez tenha ficado confuso e você se pergunte: “mas eu vou escrever em html ou markdown?” Ambos. Alguns arquivos são escritos diretamente em html. Mas não vamos aprofundar a estrutura de arquivos do Jekyll neste momento.

Digamos que você tenha que alterar esta url que você tinha inserido. Ao invés de ter que procurar e alterar manualmente todas as tags que a contém no seu wesite, utilizando o Liquid você altera apenas nas configurações e pronto! Sua alteração será repetida em todo o site:

---
# configurações...

my_url: meudominio.com.br/meu_NOVO_arquivo.html

# configurações...
---

Note que a chamada para esta variável utiliza a marcação site. precedente à variável em si. Esta é a chave da Liquid. Para as variáveis do site, que se encontram no _config.yml, as chamadas são precedidas pela palavra site.. Para recuperar as variáveis de uma página individual, a chamada será através da marcação page.. Portanto, complementando o exemplo que demos acima em relação à autoria do site e de um artigo, as chamadas ao objeto seriam feitas da seguinte forma:

{{ site.author }} => refere-se ao autor do site

{{ page.author }} => refere-se ao autor do artigo

Funcionalidades

Mais uma vantagem em relação ao php é que cada php include faz um request para um arquivo diferente, enquanto a Liquid não: todos os “includes” são processados quando o site é compilado para html. Portanto, você escreve com dinamismo e publica com estaticidade! É tão bom quanto parece!

Além dos “includes”, a Liquid também tem seus análogos para if, else e elseif, para arrays e para loops.

A Liquid Templating Language possui uma estrutura que pode ser muito explorada e utilizada com muita praticidade. Siga o link para um ver um panorama completo sobre esta linguagem.

Compilação

A compilação do website se dá de forma automática. Basta executar o comando jekyll serve no seu prompt de comando que o seu html será gerado automaticamente - na pasta _site. Mas abordamos melhor este assunto no artigo Criando Blogs com Jekyll no Windows.

Por que usar o Jekyll

Após a introdução que acabamos de fazer, imagino que você já tenha entendido boa parte da funcionalidade e praticidade que o Jekyll provê. Mas, caso você ainda se sinta perdido no assunto, segue neste tópico uma série de motivos interessantes.

Blogs sem bases de dados

Sempre que criamos um blog, há necessidade de haver uma forma de chamar cada artigo. Normalmente, utilizamos as variávies criadas em php para estabelecer as dependências. Entretanto, caso haja necessidade de publicar o seu site em html, não há como utilizar o php. Toda página que contém alguma parte em php deve conter a extensão .php. Caso contrário, o código php não funcionará. Além disso, costumamos utilizar uma base de dados para inserir os conteúdos e recuperá-los depois.

Com o Jekyll, como explicado anteriormente, há a possibilidade de dinamizar o conteúdo e, mais interessante ainda, não há necessidade da criação de uma base de dados, o que o torna absolutamente seguro, livre de ataques conhecidos como “injections”, que podem ocorrer via php / SQL.

Além dos casos que comentamos acima, a Liquid permite a inserção dinâmica de dados como data, hora e localização geográfica.

Hospedagem gratuita no GitHub

Mais interessante ainda para quem deseja publicar blogs, é que o Jekyll é suportado pelo GitHub Pages, permitindo assim que websites e blogs escritos em Jekyll sejam hospedados gratuitamente no GitHub. Há vários outros provedores de blogs, mas via de regra é necessário que você se adeque aos layouts deles, sem muita interatividade com seu próprio código e design. Por isso, a escrita de blogs em Jekyll tem se propagado imensamente pela internet. Você termina com um blog absolutamente seguro - pois é publicado em html - e totalmente personalizado.

Agilidade para escrita e publicação

Além da segurança e personalização, depois que você pega a prática, escrever em markdown fica muito mais rápido que em html. Pensa quantas tags eu não precisei abrir e fechar ao escrever este artigo!

Depois de escrito o artigo, caso você use o GitHub Pages, basta fazer um “git commit” do .md para o seu repositório que seu blog será compilado e publicado em html. Não tem mistério.

Caso não queira publicar o blog com GitHub, mas queira usar seu código no seu domínio hospedado em um servidor Apache, por exemplo, basta copiar o conteúdo da pasta _site e colar no seu public_html via FTP e pronto, seu blog estará atualizado.

Jekyll para Profissionais

Jekyll para Web Designers

O Jekyll combina muito bem com preprocessadores como o Sass. E você pode turbinar o Sass com o Bourbon, Bitter, Neat, Animate… conforme preferir! Além de você poder montar seu CSS da melhor forma possível com essa ferramenta fantástica de design, seus arquivos .sass ou .scss são convertidos em css pelo comando jekyll serve. Você não precisa nem rodar o sass --watch no seu prompt!

Basta definir a variável no _config.yml (conforme abaixo), colocar todos os arquivos que serão processados na pasta _sass do seu projeto Jekyll e pronto, o programa faz o resto pra você!

---
sass:
    sass_dir: _sass
---

Você pode ainda escolher como quer que o css seja compilado: da forma expandida ou comprimida, basta inserir mais uma linha no arquivo de configuração:

---
sass:
    style: :compressed
---

A leitura da documentação do Jekyll que explica o assunto SASS em detalhes, incluindo como trabalhar com “imports” é fundamental para estruturar o projeto corretamente.

Jekyll para Desenvolvedores Web

Além das funcionalidades da Liquid, com inserção de variáveis, trabalho com dados, coleções de dados, variáveis múltiplas e mais um monte de atrativos para qualquer desenvolvedor, há ainda editores de códigos que podem facilitar a vida de autores de artigos de blog em Jekyll.

Editores de Código

Particularmente, eu sou fã do Adobe Dreamweaver, mas o Brackets é um editor muito interessante, pois é leve, gratuito, não costuma dar panes e é muito fácil de usar. Você poderá facilmente indicá-lo aos autores do blog. Utilizando os markups para markdown fica muito simples de escrever.

O Sublime é outro editor de texto muito interessante. Seu uso não é tão imediato como o Brackets, mas há quem o considere um dos melhores editores de código do mercado. O que ele provê de mais interessante (para o caso em questão) é uma extensão chamada Sublime-Jekyll que permite que você trabalhe muito mais facilmente com o Jekyll. Este pacote de extensão permite criar novos posts com todo o cabeçalho superior previamente estruturado, criar rascunhos e facilmente promovê-los a artigos, inserir data e hora com apenas dois comandos no teclado e assim por diante.

Portanto, caso você seja um desenvolvedor e pense duas vezes antes de escrever em Jekyll a estrutura de blogs para terceiros, pode ficar tranquilo. Mesmo que você mesmo tenha que publicar os artigos para seu cliente, transformar um arquivos de texto em markdown é “uma passada”, e um git push dá pra fazer “com as mãos nas costas”… O bacana é que sai tudo do forno com a uma simplicidade impressionante de comandos.

Uso de Marcadores de Dados Estruturados

Depois de aprender a lidar com as variáveis dos posts, das pages e do site, você poderá “inventar” um monte de coisas bacanas. Por exemplo, utilizar accordions, tabbed panels, e outras ferramentas de design para inserir dados dinamicamente chamados com a Liquid. Para ver um exemplo, sugiro que dê uma olhada nas páginas de tags ou categorias deste blog. Nelas, utilizamos collapsible panels para exibir (dinamicamente) os artigos pertencentes a cada uma das variáveis aplicando loops em valores de arrays.

Utilizando essas ferramentas, você poderá montar como quiser os seus marcadores de dados estruturados, como por exemplo, Schema Markup, Facebook Open Graph e Twitter Card. A estrutura Liquid para criar as tags de modo inteligente é longa e por isso não a descreveremos neste artigo introdutório. Assim que possível publicaremos um artigo com um passo a passo de como estruturar seus marcadores, por isso o convidamos para seguir-nos no Twitter para receber nossos artigos em primeira mão!

Formulários de Contato para Jekyll

Formulários de contato são mais delicados para formular no Jekyll. Há como fazer? Há. Mas este assunto abordaremos assim que terminarmos o nosso mais novo projeto Virtua Creative Tools: Contact Form Handler para sites estáticos! E mais: nosso diferencial é que não passaremos os dados inseridos pelos seus clientes para uma base de dados para depois recuperá-los para você. As informações serão enviadas diretamente: somente você deterá as informações do seu contato, no seu email.

Se você tem pressa para montar seu formulário de contato, fale com a gente por um dos nossos canais de relacionamento que poderemos preparar um script exclusivo para você ou para a sua empresa, que poderá ser usado com segurança em páginas html ou php. Para ver um exemplo, acesse nossa página de contato deste blog.

Documentação de Referência & Leitura Complementar

Último update deste artigo: 30/03/2016 às 21:14h.

O que é Jekyll - e para que ele serve