Bianca Pereira for Comunidade Cafeína

Posted on Jun 26, 2020

Como criar um currículo no Github Pages com Jekyll

#tutorial

Nesse final de semana eu criei o meu currículo online e postei no meu repositório do Github. 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 para quem ainda não conhece é um gerador de sites estáticos. 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), 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 instalado na nossa máquina e só então podemos instalar o Jekyll.

No Windows

Vocês podem baixar o RubyInstaller 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 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

---
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

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

experience.yml

- 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

<!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á.

<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. 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 e filtros 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

<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

<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. 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 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. 😊

DEV Community