🎯Raio-X do Marketing Digital: Tendências e desafios 🚀

Criando sites estáticos com Jekyll

Publicado em 12/09/2018

Atualizado em 03/06/2024
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:

sudo apt install 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:

echo 'export GEM_HOME=$HOME/.gems' >> ~/.bashrc
echo 'export PATH=$HOME/.gems/bin:$PATH' >> ~/.bashrc

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:

gem install jekyll bundler

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

hahn@ubuntu:~$ jekyll
A subcommand is required.
jekyll 3.8.3 -- Jekyll is a blog-aware, static site generator in Ruby

Usage:

jekyll <subcommand> [options]
...

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:

jekyll new meu-site

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

hahn@ubuntu:~$ cd meu-site
hahn@ubuntu:~$ ls -lash
total 48K
4,0K drwxr-xr-x  5 hahn hahn 4,0K ago 30 18:56 .
4,0K drwxr-xr-x 51 hahn hahn 4,0K ago 31 14:44 ..
4,0K -rw-r--r--  1 hahn hahn  398 ago 30 18:56 404.html
4,0K -rw-r--r--  1 hahn hahn  539 ago 30 18:56 about.md
4,0K -rw-r--r--  1 hahn hahn 1,7K ago 30 18:56 _config.yml
4,0K -rw-r--r--  1 hahn hahn 1,1K ago 30 18:56 Gemfile
4,0K -rw-r--r--  1 hahn hahn 1,7K ago 30 18:56 Gemfile.lock
4,0K -rw-r--r--  1 hahn hahn   35 ago 30 18:56 .gitignore
4,0K -rw-r--r--  1 hahn hahn  175 ago 30 18:56 index.md
4,0K drwxr-xr-x  2 hahn hahn 4,0K ago 30 18:56 _posts
4,0K drwxr-xr-x  5 hahn hahn 4,0K ago 30 18:56 _site

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

bundle exec jekyll serve

O retorno deve ser algo parecido com:

Configuration file: /home/hahn/tmp/meu-site/_config.yml
            Source: /home/hahn/tmp/meu-site
       Destination: /home/hahn/tmp/meu-site/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 0.281 seconds.
 Auto-regeneration: enabled for '/home/hahn/tmp/meu-site'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

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.

 Regenerating: 1 file(s) changed at 2018-08-31 18:52:49
                    index.md
                    ...done in 0.108573394 seconds.

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:

image2 2

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:

---
layout: post
title: "Titulo do post!"
---

# Olá

Bem-vindo ao meu blog. Bla bla bla. Aqui vai o textão. Bla bla bla.

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.

image1 2

image3

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.

hospedagem de sites

O que você achou deste conteúdo?

O que você achou deste conteúdo?

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

Compartilhe esse conteúdo com alguém que possa gostar também

Receba todo mês conteúdos
incríveis como esses para
seguir evoluindo

Conteúdos relacionados

No mundo digital, os dados são o novo ouro e entender a relação entre Big Data e desempenho do site em questão é essencial para quem quer se destacar na web. Afinal, Big Data é uma ferramenta poderosa que, quando adequadamente analisada e aplicada, pode transformar completamente a eficácia de um site. Quer saber mais...

Mensagens para você