Como criar um currículo no Github Pages com Jekyll
Tags: tutorial
Published: 2020-06-26 15:18:41

Nesse final de semana eu criei o [meu currículo online](https://biancapereira.github.io/resume) e postei no meu [repositório do Github](https://github.com/BiancaPereira/resume). O processo de aprender algo novo foi bem divertido (amooo) e como achei o **Jekyll** bem interessante, resolvi compartilhar com vocês esse tutorial em 3 passos. ❤️

### Requerimentos
* Básico de HTML/CSS
* Básico de git
* Noções de lógica de programação

##### Estrutura de pastas

```
+--resume
|  +-- _data
|  +-- _includes
|  +-- _layouts
|  +-- assets
|  |  +-- css
```

## Por que Github Pages + Jekyll?

O [Jekyll](https://jekyllrb.com/) para quem ainda não conhece é um [gerador de sites estáticos](https://www.treinaweb.com.br/blog/geradores-de-sites-blogs-estaticos-o-que-sao-e-por-que-usa-los/). Ele é ótimo para criar seu **blog pessoal**, mas resolvi testar ele num site simples (que é o exemplo desse tutorial).

Existem outros geradores de sites estáticos bem bacanas (como o [Hugo](https://gohugo.io/)), mas por que escolher o Jekyll? Basicamente porque é descomplicado e gratuito (*yesss*)!

Segue esse tutorial aqui, coloca tudo no seu repositório do Github e pá, tá no ar o seu currículo hospedado 100% de graça.

## Instalações

Primeiro, precisamos ter o [Ruby](https://www.ruby-lang.org/pt/) instalado na nossa máquina e só então podemos instalar o Jekyll.

#### No Windows
Vocês podem baixar o [RubyInstaller](https://rubyinstaller.org/downloads/) na versão marcada com uma setinha (fica assim `=> Ruby+Devkit 2.6.X (x64)`). Depois é só clicar em next e no final da instalação deixem marcada a opção *"Run ridk install"*.

Por fim, faça a instalação do Jekyll rodando o `gem install jekyll bundler` no CMD do Windows.

#### Linux e macOS

Para a instalação nesses ambientes, confira [esse tutorial](https://jekyllrb.com/docs/installation/) da própria documentação do Jekyll.

## 1. Prepare seu workspace

Vamos preparar o nosso ambiente para receber o nosso site. Primeiro, crie uma pasta raíz chamada `resume`. Dentro dessa pasta rode o comando `bundle init` para criar um Gemfile. Abra o arquivo gerado e adicione no final o comando `gem "jekyll"`.

Após isso, digite `bundle` no CMD. Isso vai gerar o **Gemfile.lock** com as dependências que precisamos para rodar o nosso projeto.

Feito isso, podemos criar a nossa página inicial: o index. Crie o arquivo **index.html** na sua pasta raíz e adicione o código abaixo. Esses tracinhos em cima (---) se chamam **Front Matter** e fazem parte do código.

##### index.html

```html
---
layout: default
title: "Seu nominho lindo"
objective: "Objetivo profissional (ex: Desenvolvedora Rockstar)"
---

<h1 class="display-4">{{ page.title }}</h1>
<div class="lead">{{ page.objective }}</div>
```

🌈 Para ver a mágica acontecer, rode o comando `jekyll serve` no CMD e acesse o seu `http://localhost:4000`.

## 2. Crie os seus "bancos de dados"

No Jekyll, nossos dados são acessados diretamente de arquivos localizados dentro da pasta `_data`. Os arquivos com os dados podem ser em YAML, JSON, ou CSV. No nosso exemplo, iremos usar **YAML**.

Crie uma nova pasta chamada `_data`. Dentro dela, vamos criar 2 arquivos.

##### contact.yml

```yaml
location: Localização - Brasil
email: email@email.com
```

##### experience.yml

```yaml
- company: Nome da firma
  role: Nome do cargo
  start_date: 10/2016
  end_date: 07/2019
  description:
    - Descrição 1
    - Descrição 2
- company: Nome da firma 2
  role: Nome do cargo 2
  start_date: 10/2016
  end_date: 07/2019
  description:
    - Descrição 1
    - Descrição 2
```

## 3. Crie os templates

A criação dos templates (o visual do currículo) será feita em duas partes: **layouts** e **includes**.

### 3.1 Layouts

Se você der uma olhadinha no nosso **index.html**, nós já definimos o layout para nossa página. Só falta criá-lo. Crie uma pasta chamada `_layouts` e dentro dela adicione o arquivo `default.html`.

##### default.html

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ page.title }} - {{ page.objective }}</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  </head>
  <body>
    <header class="container mt-5">
      <div class="jumbotron">
        {{ content }} <!-- Todo conteúdo dentro do index.html -->
        {% include contact.html %}
      </div>
    </header>

    <main class="container">
      {% include experience.html %}
    </main>
  </body>
</html>
```

Como vocês podem ver, eu estou usando o Bootstrap para estilizar a página. Vocês podem adicionar seu próprio CSS criando a pasta `assets/css` e adicionando seu arquivo `styles.css` lá.

```html
<link rel="stylesheet" href="{{ "/assets/css/styles.css" | relative_url }}">
```

##### Liquid

Essas tags diferenciadas dentro do HTML são de uma linguagem de template chamada [Liquid](https://jekyllrb.com/docs/liquid/). Precisamos dela para mostrar os dados que criamos nos arquivos em **YAML**.

Podemos dividir o Liquid em 3 partes:
* **Objetos**: são os objetos definidos no nosso sistema. Exemplo: `{{ page.title }}`.
* **Tags**: usadas para criar lógica dentro da página e adicionar templates. Exemplo: `{% include contact.html %}`.
* **Filtros**: usado com um objeto separados por um `|` para modificar a saída (*output*) dele. Exemplo: `{{ "/assets/css/styles.css" | relative_url }}`.

Veja todas as [tags](https://jekyllrb.com/docs/liquid/tags/) e [filtros](https://jekyllrb.com/docs/liquid/filters/) aqui.

### 3.2 Includes

Agora que entendemos melhor a linguagem de template Liquid, já podemos adicionar os nossos **includes**. Includes são trechos de códigos que podemos facilmente editar, dar manutenção e reutilizar no projeto.

Crie a pasta `_includes` na pasta raíz e dentro dela adicione os 2 arquivos abaixo.

##### contact.html

```html
<div class="contact mt-2">
  <span class="badge badge-primary">
    {{ site.data.contact.location }}
  </span>
  <span>
    <a href="mailto:{{ site.data.contact.email }}">{{ site.data.contact.email }}</a>
  </span>
</div>
```

Os dados dentro de `_data/contact.yml` são acessados diretamente dentro do objeto `site.data.contact`.

##### experience.html

```html
<div class="experience">
  {% for experience in site.data.experience %}
    <div class="h3 mt-5">{{ experience.company }}</div>
    <div class="lead">
      {{ experience.role }} ({{ experience.start_date }} - {{ experience.end_date }})
    </div>
    <ul class="mt-2">
      {% for description in experience.description %}
        <li>{{ description }}</li>
      {% endfor %}
    </ul>
  {% endfor %}
</div>
```

Igual o template anterior, acessamos os dados de `_data/experience.yml` dentro do objeto `site.data.experience`. No entanto, como criamos um array, utilizei o **laço for** dentro da tag para criar uma lógica e iterar entre todos os itens da lista.

Bem legal o que dá pra fazer com o Liquid, né? Agora é só salvar tudo e ver como ficou.

## O que estudar a seguir?

Deu certo? Gostou do Jekyll? Espero que sim! ❤️ Agora, por que não tenta adicionar uma parte com suas redes sociais? E as instituições de ensino e cursos que estudou? O céu é o limite, divirta-se! ✈️ 

Para aprender mais sobre o Jekyll, eu recomendo esse [tutorial de passo a passo](https://jekyllrb.com/docs/step-by-step/01-setup/). Você vai se aprofundar mais e aprender sobre as **collections** que são perfeitas para criar um blog.

---

# The end

Para fazer deploy da nossa aplicação (colocar o site no ar), é só adicionar esse **[.gitignore](https://github.com/BiancaPereira/resume/blob/master/.gitignore)** dentro da sua pasta raíz e subir todos os arquivos direto para o seu repositório do Github. Não esqueça de ir em *"Settings"* e ativar o **Github Pages**. O próprio Github cuida do processo de *build* e exibe a página direitinho pra você.

Obrigada por ler até aqui! Se puder, comenta ou deixa uma reação aqui no post pra eu saber se gostou. 😊