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. 😊
Top comments (0)