Criando sites estáticos com Jekyll


Você conhece o Jekyll? Bom, antes de apresentá-lo, vamos concordar com uma coisa: segurança e velocidade são aspectos fundamentais da hospedagem de sites. Se o seu conteúdo demora demais para carregar, babau!, você perdeu a visita.

Além disso, cada plugin que você instala no seu site e/ou blog traz possíveis falhas de segurança, e eu duvido que você faça auditoria manual cada vez que atualiza o seu blog.

Se você está interessado em criar sites rápidos, seguros e que podem ser hospedados em qualquer lugar, continue lendo.

keep reading justin theroux GIF by The Leftovers HBO

1. O que é Jekyll?

O Jekyll é um gerador de sites estáticos – de fato, ele é o mais popular dentre eles. Um site estático não possui componentes rodando no lado do servidor: ele usa tecnologias web padrão (HTML5, JS, CSS) e não interage com componentes dinâmicos (um banco de dados, por exemplo).

É versátil, podendo ser usado para criar blogs, landing pages, sites institucionais, entre outros. O conteúdo é criado através de simples arquivos de texto no formato MarkDown. Cada vez que você atualiza estes arquivos, estes são compilados (transformados) em um site completo.

Os sites criados com esta plataforma podem ser hospedados em qualquer provedor de hospedagem, mesmo aqueles sem suporte para linguagens de programação no lado do servidor (PHP, JSP, ASP.NET e outros).

1.1 Prós em relação aos outros

Por padrão, um site criado com o Jekyll é…

… seguro:

um site WordPress normalmente é complexo e cheio de módulos e plugins criados por várias pessoas. Se você não precisa do poder/complexidade oferecido por exemplo pelo sistema de plugins, pode ser vantagem deixar essa complexidade para trás e trabalhar com a estrutura do Jekyll. Verdade seja dita: os sites criados em WordPress tem um monte de mecanismos para diminuir a superfície de ataque e evitar problemas de segurança. Mas com o Jekyll, nada disso é necessário.

…rápido:

justamente por não depender de módulos/plugins no lado do servidor, sites criados com o Jekyll podem ser servidos muito rapidamente. Não precisa ficar instalando plugins de cache – a plataforma e o próprio navegador cuidam disso. Além disso, a experiência de criar conteúdo para um site criado com ele é muito simples, já que tudo é configurado por arquivos texto. Isso também significa que ele é…

… fácil de versionar:

se você é programador e/ou já trabalha com sistemas de versionamento de código-fonte (como git e svn), você vai adorar o Jekyll. Tudo é texto (fora as imagens :P) e é facilmente versionado.

1.2 E os contras?

Se você precisa de qualquer tipo de interação que envolva o servidor, manipule banco de dados etc, o Jekyll não pode ser usado para isso. É possível integrar com outras tecnologias, como APIs e serviços de armazenamento na nuvem, mas por si só, o Jekyll não oferece este recurso.

Além disso, se você está desenvolvendo um site para um cliente, e existe uma expectativa de que o cliente mantenha o conteúdo do site, ele teria que usar o terminal e instalar algumas ferramentas de linha de comando…

2. A instalação do Jekyll

As instruções a seguir assumem que você está usando uma distribuição GNU/Linux baseada em Debian. A mais popular por aqui é o Ubuntu, mas existem diversas outras, como o Mint e o próprio Debian. Os comandos devem ser digitados em um terminal. Para instruções no Windows, veja o site do Jekyll.

2.1 Instalando as dependências

O Jekyll é uma gem (biblioteca) desenvolvida na linguagem Ruby[]. Para poder usar o Jekyll, você deve primeiro instalar o Ruby:

Agora vem uma questão de preferência pessoal: onde colocar suas gems. Eu gosto de instalar no meu $HOME, para não ter problemas de conflito ou precisar de sudo. Então, para instalar as gems dentro do seu $HOME (ex. /home/pedrinho), execute os seguintes comandos:

2.2 Install o Jekyll propriamente dito

O Jekyll usa o bundler para gerenciar as dependências. Ele instala as versões exatas das gems necessárias para o Jekyll funcionar. Você pode instalar os dois com o mesmo comando:

Para verificar que o Jekyll foi instalado corretamente, digite jekyll sem parametros. Deve aparecer algo como o seguinte:

3. O Jekyll foi instalado. Próximo passo é?

confused emoji GIF

Agora vamos criar um site. Por padrão, o Jekyll cria um diretório contendo todos os arquivos necessários para criar um blog: posts, tema, página de erro 404, estilos etc. Para criar um blog no diretório meu-site, execute:

Agora você pode entrar no diretório e visualizar os arquivos.

Agora, para criar o site propriamente dito, execute o seguinte comando a partir desse diretório:

O retorno deve ser algo parecido com:

Parabéns! Agora você pode abrir o seu site acessando o endereço informado em um navegador qualquer, como o Firefox. O mais legal é que cada vez que algum arquivo nesse diretório for modificado, o Jekyll recria o site a partir dele. Experimente editar o arquivo about.md.

Bonito, hein? E muito rápido.

Agora você pode pegar o conteúdo do diretório _site_ e subir pra qualquer servidor web acessível na internet. Esse diretório contém tudo o que o Jekyll produziu: todo o conteúdo do site que acabamos de criar, incluindo CSS otimizado, arquivos com os posts separados por data e um feed RSS. Se você incluir imagens no seu MarkDown, elas também vão aparecer aqui.

Rapidão, seguro, simples, e 100% compatível. Pura alegria.

excited ian somerhalder GIF

4. Tá, e agora?

Agora está tudo pronto para começar a adicionar conteúdo. Vou mostrar rapidamente como adicionar páginas, posts e trocar o tema do blog.

Na hora de criar páginas e posts, você pode usar sintaxe markdown (.md) ou HTML normal. Apenas para lembrar: certifique-se de que você está executando o bundle exec jekyll serve, assim todas as modificações serão aplicadas ao blog automaticamente.

4.1 Criando uma página

Uma página pode ser usada para exibir conteúdos que não mudam com frequência, como aquelas páginas de Sobre…. Para adicionar uma página, basta criar um arquivo na raiz do site ( por exemplo, cardapio.md ou sobre.html) e este ficará disponível nos links do blog. A estrutura do site ficará como a seguir:

4.2 Criando um post

Os posts do blog ficam no diretorio _posts. Para criar um post, basta criar um arquivo nesse diretório, com o seguinte nome: yyyy-mm-dd-titulo-do-post.md, onde yyyy-mm-dd é a data no formato ano-mes-dia. O início do conteúdo do arquivo deve indicar o layout utilizado e o titulo que será exibido na página, conforme o exemplo abaixo:

4.3 Trocando o tema do seu site

Como o Jekyll usa tecnologias de frontend web padrão (como HTML, JS, CSS), é fácil criar temas para ele. Você também pode dispor de uma infinidade de temas para escolher como por exemplo o JekyllThemes.Org, JekyllThemes.io, Themes.Jekyllrc.org, ThemesForest.net, Themes.Jekyllrc.org, desde temas gratuitos até aqueles pagos que incluem suporte e atualizações.

5. Compatibilidade na KingHost

Por se tratar em tecnologias que rodam 100% no navegador, o Jekyll é compatível com a grande maioria das hospedagens. Isso, é claro, inclui a KingHost. Se você quer entender mais, já publicamos um artigo com tudo que você precisa saber sobre hospedagem de site. Conheça nossos planos de hospedagem clicando aqui embaixo.

Resumo
Criando sites estáticos com Jekyll
Nome do Artigo
Criando sites estáticos com Jekyll
Rodrigo Hahn

Rodrigo Hahn

Creates software at KingHost. Has a theoretical degree in physics.
Rodrigo Hahn

Últimos posts por Rodrigo Hahn (exibir todos)

Comentários

comentário(s)