7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Jekyll

Como Configurar um Tema do Jekyll

Scroll to top
Read Time: 13 mins

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Jekyll é um gerador de sites estáticos que permite a conversão de arquivos texto em um blog sofisticado, sem se preocupar com bancos de dados, questões de segurança, atualizações e outras complicações que vem com muitos gerenciadores de conteúdos (CMSs) e plataformas de blogs.

Similar à maioria dos sistemas de gerenciamento de sites, é possível usar temas no Jekyll. Contudo, no momento, Jekyll não usa temas do jeito que você deve estar acostumado.

Atualmente, os temas do Jekyll não são pacotes auto-contidos e aplicados através de um instalador. Ao baixar um tema do Jekyll, você estará baixando todos os arquivos necessários para executar um site feito com ele.

Isso mudará em uma versão futurá, mas, por hora, você deverá lidar com o fato que os temas do Jekyll vem com todo um site atrelado.

Nesse tutorial, configuraremos um tema do Jekyll do zero, começando com algumas dicas básicas de instalação, passando pelas novas funcionalidades do novo tema, familiarizando-se com elas, e por novas dicas de como configurar um novo site ou usar o tema em um site existente.

Comecemos!

Jekyll no Envato Market

A categoria Jekyll no Envato Market tem vários temas custando desde US$19 até US$24. Adiante, usaremos os temas "Writer" e "Astro" (os mais vendidos, atualmente), para demonstração.

jekyll on Themeforestjekyll on Themeforestjekyll on Themeforest
Temas para Jekyll no Envato Market

Instalando Jekyll

Jekyll foi projetado para ser usado localmente, no seu computador, gerando um site HTML estático e, só então, publicá-lo. Ao adicionar conteúdo, o processo básico é criar um arquivo markdown com elementos pré-textuais no topo, com conteúdo vindo depois, e regerar o site.

Uma vez regerado, você pode publicá-lo da forma que quiser, seja via FTP ou comandos git. Porém, não focaremos na parte de publicação nesse tutorial, logo, caso queira ler mais sobre, visite a documentação do Jekyll.

Ao invés disso, focaremos na parte do processo de configuração do seu site Jekyll, que acontece no seu computador, começando pela instalação.

Pré-requisitos

Trabalhar com o Jekyll envolve um pouco da linha de comando, mas se você nunca a usou, não deixe isso te desanimar. Recomendo dar uma olhada na série de tutorias A Linha de Comando para Web Design, para se sentir mais à vontade.

Se seu sistema operacional é o Windows, infelizmente o Jekyll não dá suporte oficial a ele. Isso não significa que não funcione, mas talvez encontre alguns problemas. Se quiser tentar usar o Jekyll no Windows, veja os detalhes na própria documentação do Jekyll.

Agora, se estiver no macOS, Linux ou Unix, você tem de garantir que os pré-requisitos estejam instalados:

  • Ruby (pré-instalado em Macs)
  • Ruby Gems (para gerenciamento de pacotes do Ruby)

Para verificar se o Ruby está instalado, execute ruby -v. Para verificar o Ruby Gems, execute gem -v. Nos dois casos, os comandos verificam por um número de versão, assim, se algum número for retornado, você pode continuar.

Trabalharemos com Jekyll 3.1.x, logo, não precisaremos do NodeJS ou Python, como mencionado na página sobre a instalação do Jekyll na documentação.

Executando Jekyll Install

Agora, para instalar o Jekyll no seu computador, execute o comando gem install jekyll.

Se vir uma mensagem dizendo que não possui direitos de escrita, digite sudo antes do comando anterior e digite sua senha se solicitado.

Você verá algumas linhas impressas no seu terminal, mostrando que o processo de instalação está em curso. Quando aparecer "1 gem installed" terá finalizado.

Crie um Site Jekyll Padrão

Criemos, rapidamente, um site no Jekyll para vermos como a versão padrão parece, sem tema, e para familiarizarmo-nos com sua estrutura de arquivos. Crie um diretório para o site, abra o terminal, navegue até o diretório e execute: jekyll new ..

Nota: Se precisar criar um novo site com Jekyll, porém, em um subdiretório, use o comando: jekyll new <nome_do_subdiretório>.

Quando a instalação for concluída, veremos uma mensagem no terminal dizendo: “New jekyll site installed in <caminho>”. Nesse momento, você poderá ver o conteúdo padrão de um site em Jekyll dentro do diretório.

Agora, execute o comando jekyll serve para compilar e executar seu site localmente.

Quando vir a mensagem "Server running... press ctrl-c to stop" em seu terminal, você pode digitar http://localhost:4000 em um navegador e ver o site padrão do Jekyll.

Agora que você viu a estrutura de arquivos e diretório de um site padrão em Jekyll, bem como um site sem tema, você terá um melhor entendimento sobre o que verá em um arquivo baixado com um tema do Jekyll.

Avalie Novos Temas Rapidamnte

Pelo que falamos nesse tutorial, os temas do Jekyll, atualmente, vem com todos os arquivos necessários para executar o site. E como vimos na seção anterior, uma vez tendo todos os arquivos, podemos executar jekyll serve para habilitar a visualização do site no navegador.

Isso significa que, ao baixar um tema para Jekyll, podemos apenas extraí-lo e executar jekyll serve para obter uma versão funcional de um site com o tema para avaliarmos. Muitos temas até incluem conteúdo por conta disso.

Vejamos alguns exemplos, usando os temas “Writer” e “Astro” (ou qualquer um que preferir).

Assim que extraído, busque pelo diretório raiz que contem todos os arquivos. Deve ser fácil reconhecê-lo, basta lembrar do diretório da instalação padrão de logo mais acima. Procure pelo arquivo _config.yml, pelo diretório _includes e coisas do tipo.

Então, abra uma janela do terminal no diretório em questão e execute jekyll serve.

Se tudo estiver bem, você verá a mensagem "Server address:" com a URL impressa quase ao final do terminal. Copie e cole a URL no navegador e verá o site demonstração do novo tema.

Faltando Dependências?

Em algunas casos, talvez veja uma mensagem de erro ao executar o comando jekyll serve. Se isso acontecer, veja se a mensagem fala de dependências faltando, ou seja, algo que o tema precisa para funcionar, não está instalado no computador.

Nesse exemplo, você pode ver o texto em vermelho, apontando que a gem "jekyll-paginate" está faltando:

Um busca rápida no Google retorna o repositório da gem no Github, provendo o comando para instalá-la.

Após executar o comando e instalar a gem faltante, jekyll serve funciona normalmente, provendo o site com o tema.

Se a Demo Não Carregar

Caso vá à URL fornecida e não vir o site, como nesse exemplo:

...verifique o valor de baseurl no arquivo _config.yml. Esse arquivo, o qual falaremos daqui a pouco, controla a configuração global do site.

A variável baseurl é adicionada ao domínio principal, o qual, ao trabalharmos localmente, é http://localhost:4000.

No exemplo acima, quremos que o site apareça em http://localhost:4000. No arquivo _config.yml, baseurl está configurada como:

Pode parecer correto, mas como esse valor é anexado ao domínio principal, na verdade, ele tenta carregar http://localhost:4000http://localhost.

Logo, alteraremos o valor para uma cadeia de caracteres vazia:

Seu site carregará como esperado.

Se quiser carregar o site num subdiretório, altere o valor de baseurl para o nome do subdiretório, garantindo que comece e termine com uma barra:

Familiarizando-se Com o Tema

Um dos principais motivos de começar executando o tema logo de primeira é, além de checar se ele funciona como esperado, de familiarizar-se com as funcionalidades e fluxos do mesmo.

Como o Jekyll é bastante flexível, seus temas podem oferecer funcionalidades bem diferentes uns dos outros. Ao executar o site demonstração, navegue um pouco por ele, veja e analise sua estrutura. Veja se o tema tem páginas para categorias, imagens destacadas, páginas para autores, etc. Anote essas funcionalidades para pesquisar na documentação do tema e aprender a usá-las.

Você também deveria dar uma olhada na estrutura de arquivos e diretórios do tema. As principais áreas a se investigar são:

  • Qualquer layout customizado que o tema talvez tenha no diretório _layouts
  • Quaisquer variáveis que precise configurar nos elementos pré-textuais de seu conteúdo.

Também precisará descobrir que configurações globais temos no arquivo _config.yml para usar os recursos do tema, como URL das redes sociais, informações dos autores, links de navegação, entre outros.

Tornando-o Seu

Agora que teve a chance de usar o tema e familiarizar-se, é hora de usá-lo em seu próprio site. Deixe a versão demonstração intocada, para que possa comparar com a que vamos construir.

Removendo o Conteúdo Demonstração

Crie um novo diretório no seu computador e re-extraia todos os arquivos do tema nele.

Dessa vez, vá até o diretório _posts e apague todos os arquivos de lá para que as publicações demo sejam removidas.

Após isso, remova qualquer arquivo .md (markdown) do diretório raiz, removendo, assim, todas as páginas demo.

Se quiser, também pode localizar e remover todas as imagens usadas no conteúdo demo, como miniaturas destacadas, se quiser substituí-las pelas suas. Se há ou não imagens no seu, variará de tema para tema.

Se seu tema tem imagens e quer removê-las mas não sabe onde elas estão, verifique a documentação do tema e saberá por lá. Caso contrário, talvez precise olhar o código dos modelos do tema para descobrir.

Configurando o Site

Agora, abra o arquivo _config.yml do diretório raiz e configure quaisquer variáveis que são necessárias em seu tema. Algumas configurações são padrão em arquivos _config.yml, como titleemail, description e outras. Contudo, algumas configurações são específicas do tema.

O que é preciso configurar dependerá do tema, então é uma boa ideia verificar a documentação e guiar-se sobre cada item a ser configurado e suas funcionalidades.

Por exemplo, no Writer, é possível configurar uma navegação customizada usando uma variável nav_list para definir os items do menu. Cada um tem seu rótulo, link permanente e classe que fará um ícone do Font Awesome aparecer antes dele.

Por outro lado, o tema Astro não usa a variável nav_item, mas possui suas próprias variáveis customizadas, para permitir a adição de links para redes sociais, bem como ativar comentários do Disqus e por aí vai.

Configure todas as variáveis de acordo com sua necessidade, no _config.yml, até que esteja do jeito certo para o site.

Perceba que se fizer alterações como essa após executar jekyll serve, precisará parar o processo com CTRL + C e reiniciá-lo para que as alterações surtam efeito.

Configurando Página Inicial (Se Necessário)

Alguns temas permitem escolher entre diferentes layouts para sua página inicial, bem como várias configurações que afetam sua aparência. Se esse for o caso, provavelmente encontrará as configurações a serem alteradas nos elementos pré-textuais do arquivo index.html do diretório raiz.

Se vários layouts estiverem disponíveis, provavelmente poderá escolher um diferente, modificando o valor do item layout–você terá de analisar a documentação do tema para saber quais valores são permitidos.

Enquanto edita seu arquivo, veja se há outros valores que podem ser alterados e afetarão o conteúdo disponível na página inicial. Por exemplo, no tema Writer, é possível definir título e descrição customizados para aparecer apenas na página inicial, assim como uma imagem destacada.

Adicione Suas Próprias Páginas

Se quiser adicionar páginas como "Sobre" ou "Contato", agora é a hora. Adicione um arquivo .md ao diretório raiz do site para cada página que queira configurar.

Nota: alguns temas são configurados de modo que as páginas estejam em um subdiretório (pages, por exemplo), não no diretório raiz. Verifique a documentação do tema para isso.

Por exmeplo, adicionei um página "Sobre o site" (about.md), a página "Sobre Mim" que é a perfil de autor (author-kezz.md), e a página de "Contatos" (contact.md).

De acordo que adiciona páginas, talvez queira saber se há modelos ou elementos pré-textuais específicos a usar com elas. Para descobrir, vá até a documentação do tema ou copie e cole os arquivos markdown do site demonstração que criamos e apenas ajuste-os para sua necessidade.

Por exemplo, copiei uma página de autor existente na demo do tema Writer e converti para meu próprio tema, renomeando-a e editando o conteúdo e elementos pré-textuais.

Adicionando Publicações

Agora que você configurou o principal do seu site, é hora de criar algumas publicações. Recomendo copiar uma publicação do diretório _posts do site demo e colar na instalação que você está trabalhando. Assim, você pode renomeá-la com a data e link permanente que quiser para seu novo artigo. Ao reusar uma publicação demo, todos os elementos pré-textuais necessários estarão onde precisam aparecer, só é preciso atualizá-los.

Categorias, Rótulos e Extras

Alguns temas oferecem suporte a páginas de categoria e rótulo. Contudo, não acontece sempre e, claro, varia de tema para tema. Verifique a documentação do seu tema para saber o que é preciso para trabalhar com categorias e rótulos no seu site.

Por exemplo, no tema Writer, para cada categoria que quiser usar, é preciso configurar manualmente um diretório e um modelo num subdiretório chamado "category".

Também devem existir funcionalidades extras que esse tema oferece. Dê uma boa lida na lista de recursos e na documentação para garantir que sabe de tudo o que ele dispõe.

Alterando Temas em um Site Existente

Caso possua um site com Jekyll e apenas queira usar seu novo tema, precisará passar por quase o mesmo processo que acabamos de fazer. A diferença será a parte da remoção de conteúdo e, ao invés de novas páginas e publicações, você apenas copiará as existentes para o novo tema.

Se já possui um site em Jekyll com páginas, copie e cole os respectivos arquivos markdown do antigo site, no novo. Vá em cada página e atualize os elementos pré-textuais para usar o layout do tema escolhido e as variáveis obrigatórias.

Então, copie todas as publicações do antigo diretório _posts para o novo. Será um tanto tedioso, já que terá de ir em cada publicação e atualizar os elementos pré-textuais delas, adicionando quaisquer que o tema requeira e removendo qualquer elemento desnecessário.

Se tiver algum diretório com imagens ou outra mídia usada em suas páginas e publicações, copie para o novo tema também. As publicações e páginas ainda referenciarão os mesmo locais de imagens, assim, permitiremos que elas continuem aparecendo.

Resumindo

Isso é o essencial para configurar um tema do Jekyll! Os por menores do processo variarão de tema para tema, mas você ainda encontrará esses estágios essências em cada caso. Recapitulemos, rapidamente esses estágios:

  • Avalição rápida do tema através da extração e execução: jekyll serve
  • Instalar dependências faltantes que impedem a execução tema
  • Navegar o front-end do site demo e anotar os recursos de acordo que os descobre
  • Olhar a estrutura de arquivos, em particular o diretório _layouts, para ver quais layouts e variáveis customizadas existem.
  • Criar uma segunda instalação do tema e remover o conteúdo demo (páginas, publicações e, talvez, imagens).
  • Ajustar as configurações do site no arquivo _config.yml.
  • Configurar a página inicial, editando os elementos pré-textuais no arquivo index.html do diretório raiz.
  • Criar arquivos markdown para páginas com os pré-textuais necessários (ou copie e cole-os do site demo/existente).
  • Crie os arquivos de publicação no diretório _posts com os pré-textuais necessários (ou copie e cole-os do site demo/existente)
  • Realize qualquer configuração extra que o tema precisa, como a criação de modelos para páginas de categorias.

Espero que esse tutorial tenha ajudado a dar confiança durante a configuração de um novo site em Jekyll com tema customizado, ou na escolha de um novo tema para um existente.

Para um guia completo sobre o uso do Jekyll, vjea esse curso do Guy Routledge:

Obrigado pela leitura, veremo-nos novamente logo!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.