Customizando um tema no Jekyll
O jekyll é um gerador de sites estáticos. Mas o que isso significa? Uma página estática é um site da Internet que exibe o mesmo conteúdo para todos os usuários, em vez de fornecer conteúdos personalizados para cada usuário. Sites estáticos têm como vantagens a velocidade de carregamento e o baixo custo de desenvolvimento, e, por isso, houve um crescimento no mercado de geradores de sites estáticos. Os geradores de sites estáticos nos permitem trabalhar como se estivéssemos criando páginas dinâmicas, ou seja, podemos criar pedaços de HTML que ficarão em arquivos separados. A diferença é que, ao invés de gerar uma página quando o usuário requisitar, os geradores já geram todos os arquivos HTML. Assim, quando alguém requisitar uma página, ela já estará pronta para ser entregue. Alguns geradores de sites estáticos famosos são o Wix, WordPress, Nuxt.js, etc. Mas dentre tantos, um que se destaca por por ser open-source e dar a maior liberdade pro usuário constuir e personalizar seu site é o Jekyll. E nesse post vou ensinar como customizar o tema padrão do Jekyll para que você possa utilizar o jekyll ao seu máximo.
Tabela de Conteudo
Jekyll
O Jekyll é uma biblioteca em ruby que permite a criação de websites e blogs. Sites em Jekyll são programados usando as tecnologias Markdown, Liquid (Linguagem de template escrita em Ruby), Html, Css e JavaScript, que, ao serem compilados, são transformados em sites estáticos. Uma das grandes vantagens do Jekyll é o suporte do GitHub Pages em que pode-se hospedar o site criado gratuitamente.
Estrutura Jekyll
Quando se cria um novo site com o Jekyll (através do comando jekyll new <PATH>, onde o <PATH> é o caminho em que será criado o projeto), o Jekyll cria um projeto que usa uma Gem de tema chamada Minima. Os temas do Jekyll definem os layouts, includes e stylesheets. Entretando você pode sobrescrever qualquer tema padrão com o seu próprio conteúdo.
Um novo projeto no Jekyll tem esta estrutura:
1
2
3
4
5
6
7
8
.
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│ └── 2016-12-04-welcome-to-jekyll.markdown
├── about.markdown
└── index.markdown
O primeiro passo para se customizar o tema do site é incluir os diretórios _include, _layouts, _sass, assets na root do projeto para começar a customização. Mesmo que os diretórios tenham sido criados, como não há arquivo nenhum dentro deles, o jekyll continuará a renderizar o conteúdo do Minima. Para criar o nosso tema, teremos então que adicionar nossas mudanças nos diretórios correspondentes. Após criar estes diretórios, a estrutura do projeto ficará assim:
1
2
3
4
5
6
7
8
9
10
11
12
.
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _data
├── _includes
├── _layouts
├── _posts
│ └── 2016-12-04-welcome-to-jekyll.markdown
├── _sass
├── about.markdown
└── index.markdown
assets
O diretório assets serve para guardar qualquer arquivo que seja útil para o site, como imagens, arquivos svg, pdfs, dentre muitos outros. Este diretório também armazena o arquivo css que o jekyll irá usar para buildar o site.
Após criarmos o diretório assets, iremos criar um outro diretório dentro dele, chamado css, será aqui que irá ficar o arquivo sass principal que será convertido para css.
Após isso, devemos criar o arquivo main.sass. Esse arquivo vai somente importar o main.sass do diretório _sass. Poderíamos, por exemplo, criar todos os estilos usados no site dentro deste arquivo sass, mas, para deixar-mos mais organizado, iremos apenas importar o main.sass do diretório _sass neste arquivo. E então, o arquivo main dentro de assets/css fica da seguinte forma:
1
2
3
4
---
---
@import "main"
_sass
Sass (em inglês, “syntactically awesome stylesheets”, ou “folhas de estilo sintaticamente incríveis”) é uma linguagem de folhas de estilo que é interpretada ou compilada em Cascading Style Sheets (CSS). O jekyll tem suporte nativo ao Sass, e, para usarmos, basta criar um arquivo com o nome main.sass dentro do diretório _sass. Por motivos de organização, iremos criar um arquivo .sass para cada componente que iremos fazer, assim como também podemos criar para cada view que quisermos, e, para cada novo arquivo sass que criarmos, devemos importa-lo no main.sass para que ele possa ser enviado para o main.sass do diretório assets e consequentemente, renderizado no site. Além do main.sass, ainda criaremos o arquivo _variables.sass que irá armazenar as variáveis que iremos usar para padronizar o projeto, e para usar estas variáveis, basta dar um import dentro do arquivo sass que desejar usar e usar a sintaxe $nome-da-variavel quando quiser usar algum valor dentro de _variables.sass. No nosso projeto. O arquivo _variables.sass terá as seguintes variáveis:
1
2
3
4
$bg-color: #333
$text-color: #f2f2f2
$hover-color: #ddd
$contrast-color: #04AA6D
_include
O include é uma forma de colocar o mesmo elemento várias vezes em uma mesma página ou em páginas diferentes sem ter que repetir o código fonte, deixando assim o html mais limpo e legível. Como os includes são uma cópia do código fonte original, basta modificar o código fonte que as mudanças serão refletidas em todas as instâncias daquele elemento. Portanto, criaremos dentro do diretório _includes, o arquivo head.html com as informações básicas do site:
1
2
3
4
5
<head>
<link rel="stylesheet" type="text/css" href="{{ site.baseusrl }}/assets/css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
E também iremos criar o arquivo header.html que irá conter o html da nossa Navbar simples e responsiva.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Para finalizar o header, basta criar o estilo dele, para isso, dentro do diretório _sass, criaremos um diretório chamado components. O diretório components irá conter todos os estilos dos includes do nosso site. Portanto, criaremos um arquivo chamado header.sass. Esse arquivo irá conter o seguinte estilo para a header:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@import './_variables'
.topnav
overflow: hidden
background-color: $bg-color
a
float: left
display: block
color: $text-color
text-align: center
padding: 14px 16px
text-decoration: none
font-size: 17px
&.active
background-color: $contrast-color
color: white
&:hover
background-color: $hover-color
color: black
.icon
display: none
@media screen and (max-width: 600px)
.topnav
a
&:not(:first-child)
display: none
&.icon
float: right
display: block
&.responsive
position: relative
.icon
position: absolute
right: 0
top: 0
a
float: none
display: block
text-align: left
Agora, iremos criar o footer usando a mesma lógica do header. Basta criar um arquivo footer.html no diretório _includes.
1
2
3
<footer>
<div><p>© Copyright 2021.</p></div>
</footer>
E o estilo do footer no _sass/components.
1
2
3
4
5
6
7
8
9
10
11
12
@import "../_variables"
footer
position: absolute
background-color: $bg-color
color: $text-color
width: 100%
height: 20px
border-top: 2px solid $contrast-color
text-align: center
bottom: 0
padding: 10px 0
Por fim, para incluir um elemento a alguma página, basta usar o comando {% include nome-do-include.html %}.
1
{% include header.html %}
_layouts
Layouts são modelos que envolvem seu conteúdo. Eles permitem que você crie um esqueleto de página que você possa usar várias vezes só mudando algumas informações, como o conteúdo que vai ser exibido, o titulo da página, dentre outras.
Para se criar um layout, a primeira etapa é colocar o código-fonte do modelo em um arquivo .html que desejar, neste caso, usaremos o default.html.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
---
{% include head.html %}
{% include header.html %}
<head>
<title>{{ page.title }}</title>
</head>
<main>
<section>
{{ content }}
</section>
</main>
{% include footer.html %}
O content é uma variável especial. O valor é o conteúdo renderizado do post ou da página que está sendo encapsulado. A variável page.title, por sua vez, é obtida através da front matter da página que está a ser desenvolvida. E, por fim, usaremos o arquivo index.markdown para criar nossa página principal.
1
2
3
4
5
6
---
layout: home
title: Home
---
<h1>Esse é um exemplo do que podemos fazer com o jekyll.</h1>
Conclusão
Nesse post aprendemos como customizar o tema padrão no framework jekyll. Você pode encontrar o repositório com esse projeto aqui para poder baixar e usar como quiser. Para ficar ligado em mais posts como esse considere assinar nosso feed ou acessar a nossa seção de posts do jekyll.