Como criar um blog completo no GitHub Pages com Jekyll - Guia definitivo

Introdução

Criar um blog técnico é uma excelente forma de compartilhar conhecimento e construir sua presença online como desenvolvedor. Neste guia completo, vou te mostrar como criar um blog profissional no GitHub Pages usando Jekyll, totalmente gratuito e com domínio personalizado.

Por que GitHub Pages?

Gratuito - Hospedagem sem custo
Integração Git - Versionamento automático
Jekyll integrado - Gerador de sites estáticos
Domínio personalizado - seuusername.github.io
HTTPS automático - Segurança incluída
Deploy automático - A cada push

Passo 1: Configuração inicial

1.1. Criando o repositório

Acesse o GitHub e crie um novo repositório
Nome obrigatório: seuusername.github.io (substitua pelo seu username)
Marque como público (obrigatório para contas gratuitas)
Adicione um README.md inicial

# Clone o repositório
git clone https://github.com/seuusername/seuusername.github.io.git
cd seuusername.github.io

1.2. Estrutura de pastas

Crie a seguinte estrutura:

seuusername.github.io/
├── _config.yml          # Configurações do Jekyll
├── _layouts/            # Templates do site
│   ├── default.html
│   └── post.html
├── _posts/              # Seus artigos
├── assets/              # CSS, imagens, JS
│   ├── css/
│   └── img/
├── index.md             # Página inicial
├── artigos.md           # Lista de artigos
├── quem-sou.md         # Sobre você
└── Gemfile              # Dependências Ruby

Passo 2: Configurando o Jekyll

2.1. Arquivo `_config.yml`

title: "Seu Nome"
description: "Seu blog sobre desenvolvimento e tecnologia"
author: "Seu Nome"
url: "https://seuusername.github.io"
baseurl: ""
markdown: kramdown

# Build settings
plugins:
  - jekyll-feed

# Navegação
nav:
  - label: "Quem sou"
    url: "/quem-sou"
  - label: "Artigos"
    url: "/artigos"
  - label: "Projetos"
    url: "/projetos"

# Permalinks
permalink: /artigos/:title/

2.2. Gemfile para dependências

source "https://rubygems.org"

gem "jekyll", "~> 4.3.0"
gem "jekyll-feed", "~> 0.12"
gem "github-pages", group: :jekyll_plugins

# Windows compatibility
platforms :mingw, :x64_mingw, :mswin, :jruby do
  gem "tzinfo", ">= 1", "< 3"
  gem "tzinfo-data"
end

gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]

Passo 3: Criando layouts

3.1. Layout principal (`_layouts/default.html`)

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>Como criar um blog completo no GitHub Pages com Jekyll - Guia definitivo | Jéssica Nathany Software Developer</title>
    <meta name="description" content="Neste blog você encontrará artigos sobre: arquitetura de software, desenvolvimento de software, ferramentas, projetos e conteúdo do livro/podcast.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/assets/css/style.css">
  </head>
  <body>
    <header class="site-header">
      <div class="container">
        <div class="navbar">
          <a href="/" class="site-title">Jéssica Nathany Software Developer</a>
          
            <a href="/quem-sou">Quem sou</a>
          
            <a href="/artigos">Artigos</a>
          
            <a href="/livro">Livro</a>
          
            <a href="/podcast">Podcast</a>
          
            <a href="/projetos">Projetos</a>
          
        </div>
      </div>
    </header>

    <main class="container">
      <article class="post">
  <header class="post-header">
    <h1>Ideias de projetos backend para você praticar</h1>
    
      <div class="post-meta">
        📅 Publicado em 30/12/2025
        
          <br>🏷️ Tags: 
          
            <span class="tag">projetos</span>, 
          
            <span class="tag">backend</span>, 
          
            <span class="tag">estudos</span>, 
          
            <span class="tag">portfolios</span>
          
        
      </div>
    
  </header>
  
  <div class="post-content">
    <h2 id="introdução">Introdução</h2>

<p>Ja lhe faltou ideias para criar seus projetos e treinar suas habilidades de programação? Muitas vezes procuramos nos basear o mais próximo da realidade, é uma maneira de treinar nossas habilidades de escrever código e também, chegar o mais próximos dos problemas reais no mundo da programação.</p>

<p>Eu mesma enquanto estudava e treinava minhas habilidades em programação, tive dificuldade de encontrar ideias para criação de projetos backend, e olha que pesquisei bem. Pesquisei muito até juntar as ideias aqui para este artigo e compartilhar com outras pessoas. Uma ótima opção também é resolver os problemas do <a href="https://www.hackerrank.com/">Hackerrank</a>, mas mesmo assim é legal ter outras ideias outros desafios para poder pensar, elaborar e construir.</p>

<p>Pensando nisso, elaborei algumas ideias e alguns projetos cheguei a desenvolver, outros estou desenvolvendo e decidi compartilhar aqui. Algumas outras ideias, também busquei em uma enorme e consolidada busca na web, na qual deixo os links também.</p>

<h2 id="1--api-de-investimentos-fanfainvest">1.  API de Investimentos (Fanfainvest)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto2.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Criei esse projeto fictício em um processo de mentoria junto com outra desenvolvedora. Simulamos um serviço fake de investimento uma de API backend que tem como objetivo retornar a lista de investimento da carteira dos clientes. Ficou ridicularmente simples, mas a ideia foi boa praticar e pensar um pouco fora da caixa. Óbvio que um serviço de investimento é muito mais completo e complexo do que a FanfarInvest, mas o objetivo aqui foi puramente didático e criar algo mais simples possível e usando qualquer linguagem de programação.</p>

<p>Ao acessar o repositório, reparem que não tem tanta complexidade, nem muitas regras a ser seguida, por motivos didáticos e deixar o mais simples possível.</p>

<p>Objetivo: simular uma API de serviço de investimento, onde será possível obter todos os investimentos do cliente, como renda fixa, renda variável e etc. Nesta API tem a penas endpoints para consulta, mas você pode criar um banco local e criar outros endpoints como POST e PUT, ou quem sabe fazer pequenas integrações. <a href="https://dev.to/jessicanathany/how-to-create-a-simple-investiment-api-net-core-6-for-tranning-part1-5819">Neste link</a>, escrevi um artigo sobre esse projeto e a criação em passo a passo.</p>

<p><a href="https://github.com/JessicaNathany/api-fanfareInvest">GitHub api-fanfareInvest</a></p>

<hr />

<h2 id="2-conversor-de-moedas-conversormoedas">2. Conversor de Moedas (ConversorMoedas)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto3.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Este projeto é super simples e é mais voltado para aquelas pessoas que estão iniciando na área. Criei esse conversor de moedas enquanto estudava Python, com a penas um arquivo onde é criado toda lógica do cálculo. Você pode melhorar ainda mais o projeto. Deixar mais dinâmico e quem sabe um pouco mais complexo. Por exemplo, obter a cotação do dia para fazer o cálculo de forma dinâmica, fazer uma consulta em outros serviços de câmbio fake e etc.</p>

<p>Objetivo: converter o valor da moeda pela cotação do dia, exemplo: converter real para dólar, passando o valor da moeda que deseja converter pela cotação do dia, o programa deverá calcular o valor que você deverá pagar pela cotação.</p>

<p><a href="https://github.com/JessicaNathany/conversor-moedas/blob/main/conversor-moedas.py">GitHub conversor de moedas</a></p>

<hr />

<h2 id="3-gerador-de-senhas-passwordgenerator">3. Gerador de senhas (PasswordGenerator)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto4.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Este é um projeto simples e deve existir vários exemplos diferentes na web, acabei criando uma telinha simples para gerar senhas para o usuário.</p>

<p>Objetivo: gerar senhas para o usuário contendo como opções:</p>

<p>utilizar caracteres especiais;
ter pelo menos 8 caracteres no máximo e no mínimo 6 caracteres;
ter letra maiúscula no nome;
ter números como ! “ ? $ ? % ^ &amp; * ( ) _ — + = { [ } ] : ; @ ‘ ~ # | \ &lt; , &gt; . ? /;
ter símbolos:</p>

<hr />

<h2 id="4-consultando-api-ricky-morty-consulting-information-rick-and-mortyapi">4. Consultando API Ricky Morty (Consulting Information Rick and Morty.api)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto5.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Este é um projeto de uma API Rest para consultar informações da <a href="https://rickandmortyapi.com/">API Ricky Morty</a>. Neste exemplo, a API tem como objetivo somente obter personagens e localização.</p>

<p>Objetivo: consumir a API do Ricky Morty acima, através do endpoints, trazer informações de personagens e episódios.</p>

<p><a href="https://github.com/Carlj28/RickAndMorty.Net.Api">GitHub RickyandMorty</a></p>

<hr />

<h2 id="5-timer-pomodoro-pomodoro-clock">5. Timer Pomodoro (Pomodoro Clock)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto6.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Esse projeto achei a ideia dele aqui na Web e achei interessante também adicionar na lista, para tentar fazer. Basicamente consistem em criar um timer do pomodoro, algo semelhante ao pomodoro focus , criar um serviço semelhante ao pomodoro, contendo basicamente as funcionalidades do timer, um crônometro, colocar as pausas e zerar o cronômetro <a href="https://pomofocus.io/">pomofocus</a>.</p>

<p><a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Pomodoro-Clock.md">GitHub Pomodoro Clock</a></p>

<hr />

<h2 id="6-gerador-ssh-e-hash-criptografia">6. Gerador SSH e HASH (Criptografia)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto7.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Esse foi um projeto que fiz na pós -graduação em uma aula de Cybersecurity, uma ideia simples cujo objetivo criptografar a mensagem digitada pelo usuário.</p>

<p>GitHub:</p>

<p><a href="https://github.com/JessicaNathany/projetoCriptografia">GitHub Projeto Criptografia</a></p>

<hr />

<h2 id="7-simulador-fast-food">7. Simulador Fast Food</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto8.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Fast Food simula o funcionamento de um simples restaurante take-away e foi concebido para ajudar o criador a pôr os seus conhecimentos sobre Promessas e princípios de design SOLID a funcionar.</p>

<p>Objetivo: simular um Fast Food Fake utilizando os seguintes cenários:</p>

<ul>
  <li>usuário — o usuário final que utiliza a aplicação;</li>
  <li>encomendar pedido — o simuladar a encomenda do pedido;</li>
  <li>cliente — simular o lado do cliente;</li>
  <li>cozinha — simular o pedido do lado da cozinha ;</li>
  <li>servidor — simular o lado do servidor</li>
</ul>

<p><a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/3-Advanced/FastFood-App.md">Github FastFood</a></p>

<hr />

<h2 id="8-bot-para-consumir-api-whatsapp-whatsapppythonbot">8. Bot para consumir API Whatsapp (WhatsappPythonBot)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto9.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Hoje em dia é muito comum empresas criarem bots para atender seus clientes no Whatsapp, seja par aenviar mensagens instântaneas, atendimento etc. E a ideia aqui é fazer o mesmo, criar um Bot para consumir a <a href="https://developers.facebook.com/docs/development">API do Whatsapp</a>. Abaixo inclui um o repositório do projeto que encontrei utilizando a linguagem Python.</p>

<p>Objetivo: criar um bot para consumir os endpoints da API Whatsapp</p>

<ul>
  <li>enviar mensagens automatizadas;</li>
  <li>enviar áudios;</li>
  <li>enviar imagens;</li>
  <li>enviar arquivos;</li>
  <li>enviar contatos</li>
</ul>

<p><a href="https://github.com/ultramsg/python-whatsApp-bot">Github WhatsApp bot</a></p>

<hr />

<h2 id="9-dashboard-terraform-terraboard">9. Dashboard TerraForm (Terraboard)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto9.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Esse é um tipo de projeto mais avançado, mas é um bom desafio para se fazer. Esse projeto encontrei na web e é um painel para visualizar e consultar os estados da Terraform.</p>

<p>Objetivo: criar um dashboard para visualizar consultas e estados do Terraform.</p>

<ul>
  <li>uma página de resumo com os arquivos de estado atualizados mais recentemente com sua atividade;</li>
  <li>uma página de estado com estados dos arquivos detalhados, incluindo versões e arquivos atribuídos;</li>
  <li>interface de busca para consultar recursos por tipo, nome ou atributos;
uma interface dif para comparar o estado entre as versões</li>
</ul>

<p><a href="https://github.com/camptocamp/terraboard">Github Terraboard</a></p>

<hr />

<h2 id="10-jogo-de-xadrez">10. Jogo de Xadrez</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto11.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Uma ideia bacana e também desafiadora é criar um jogo de xadrez utilizando sua linguagem favorita ou a linguagem que você se sentir mais confortável em desenvolver. Neste site o Macoratti crio um <a href="https://www.macoratti.net/10/06/c_xdz1.htm">jogo de xadrez</a> usando a linguagem C#. Logo abaixo, tem um outro projeto feito em JavaScript, e tem outra ideia com linguagem <a href="https://acervolima.com/projete-um-jogo-de-xadrez/">GO</a> e <a href="https://levelup.gitconnected.com/chess-python-ca4532c7f5a4">Python</a>.</p>

<p>Deixei algumas ideias de projetos para treino, mas vou deixar aqui um repositório de projetos backend com mais ideias pra vocês treinarem, pode acessar o <a href="https://github.com/CollabCodeTech/backend-challenges">Backend Challanges Tech</a>.</p>

<hr />

<h2 id="10-jogo-de-xadrez-1">10. Jogo de Xadrez</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto10.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Deixei alguns repositórios de apis pública s que você pode consumir e estudar.</p>

<ul>
  <li><a href="https://github.com/BrasilAPI/BrasilAPI">BrasilAPIs</a></li>
  <li><a href="https://macoratti.net/19/07/net_apipub1.htm">APIs públicas para desenvolvedores por Macoratti </a></li>
  <li><a href="https://developers.google.com/">Google APIs</a></li>
  <li><a href="https://developer.uber.com/">Uber developres</a></li>
  <li><a href="https://developer.nytimes.com/">The New York Time APIs</a></li>
  <li><a href="https://api.nasa.gov/">NASA APIs</a></li>
  <li><a href="https://www.exchangerate-api.com/">Exchangerate API</a></li>
  <li><a href="https://developer.linkedin.com/">Linkedin Developers</a></li>
  <li><a href="https://openweathermap.org/api">Weather API</a></li>
  <li><a href="https://servicos.cptec.inpe.br/XML/">INPE API</a></li>
  <li><a href="https://servicos.cptec.inpe.br/XML/">INPE API</a></li>
</ul>

  </div>
  
  <footer class="post-footer">
    <hr>
    <p><a href="/artigos">← Voltar para todos os artigos</a></p>
  </footer>
</article>
    </main>

    <footer class="container">
      <p>© 2025 Jéssica Nathany — Hospedado no GitHub Pages</p>
    </footer>
  </body>
</html>

3.2. Layout para posts (`_layouts/post.html`)

---
layout: default
---
<article class="post">
  <header class="post-header">
    <h1>Como criar um blog completo no GitHub Pages com Jekyll - Guia definitivo</h1>
    <div class="post-meta">
       Publicado em 30/12/2025
      
        <br> Tags: 
        
          <span class="tag">github-pages</span>, 
        
          <span class="tag">jekyll</span>, 
        
          <span class="tag">blog</span>, 
        
          <span class="tag">tutorial</span>
        
      
    </div>
  </header>
  
  <div class="post-content">
    <article class="post">
  <header class="post-header">
    <h1>Ideias de projetos backend para você praticar</h1>
    
      <div class="post-meta">
        📅 Publicado em 30/12/2025
        
          <br>🏷️ Tags: 
          
            <span class="tag">projetos</span>, 
          
            <span class="tag">backend</span>, 
          
            <span class="tag">estudos</span>, 
          
            <span class="tag">portfolios</span>
          
        
      </div>
    
  </header>
  
  <div class="post-content">
    <h2 id="introdução">Introdução</h2>

<p>Ja lhe faltou ideias para criar seus projetos e treinar suas habilidades de programação? Muitas vezes procuramos nos basear o mais próximo da realidade, é uma maneira de treinar nossas habilidades de escrever código e também, chegar o mais próximos dos problemas reais no mundo da programação.</p>

<p>Eu mesma enquanto estudava e treinava minhas habilidades em programação, tive dificuldade de encontrar ideias para criação de projetos backend, e olha que pesquisei bem. Pesquisei muito até juntar as ideias aqui para este artigo e compartilhar com outras pessoas. Uma ótima opção também é resolver os problemas do <a href="https://www.hackerrank.com/">Hackerrank</a>, mas mesmo assim é legal ter outras ideias outros desafios para poder pensar, elaborar e construir.</p>

<p>Pensando nisso, elaborei algumas ideias e alguns projetos cheguei a desenvolver, outros estou desenvolvendo e decidi compartilhar aqui. Algumas outras ideias, também busquei em uma enorme e consolidada busca na web, na qual deixo os links também.</p>

<h2 id="1--api-de-investimentos-fanfainvest">1.  API de Investimentos (Fanfainvest)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto2.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Criei esse projeto fictício em um processo de mentoria junto com outra desenvolvedora. Simulamos um serviço fake de investimento uma de API backend que tem como objetivo retornar a lista de investimento da carteira dos clientes. Ficou ridicularmente simples, mas a ideia foi boa praticar e pensar um pouco fora da caixa. Óbvio que um serviço de investimento é muito mais completo e complexo do que a FanfarInvest, mas o objetivo aqui foi puramente didático e criar algo mais simples possível e usando qualquer linguagem de programação.</p>

<p>Ao acessar o repositório, reparem que não tem tanta complexidade, nem muitas regras a ser seguida, por motivos didáticos e deixar o mais simples possível.</p>

<p>Objetivo: simular uma API de serviço de investimento, onde será possível obter todos os investimentos do cliente, como renda fixa, renda variável e etc. Nesta API tem a penas endpoints para consulta, mas você pode criar um banco local e criar outros endpoints como POST e PUT, ou quem sabe fazer pequenas integrações. <a href="https://dev.to/jessicanathany/how-to-create-a-simple-investiment-api-net-core-6-for-tranning-part1-5819">Neste link</a>, escrevi um artigo sobre esse projeto e a criação em passo a passo.</p>

<p><a href="https://github.com/JessicaNathany/api-fanfareInvest">GitHub api-fanfareInvest</a></p>

<hr />

<h2 id="2-conversor-de-moedas-conversormoedas">2. Conversor de Moedas (ConversorMoedas)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto3.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Este projeto é super simples e é mais voltado para aquelas pessoas que estão iniciando na área. Criei esse conversor de moedas enquanto estudava Python, com a penas um arquivo onde é criado toda lógica do cálculo. Você pode melhorar ainda mais o projeto. Deixar mais dinâmico e quem sabe um pouco mais complexo. Por exemplo, obter a cotação do dia para fazer o cálculo de forma dinâmica, fazer uma consulta em outros serviços de câmbio fake e etc.</p>

<p>Objetivo: converter o valor da moeda pela cotação do dia, exemplo: converter real para dólar, passando o valor da moeda que deseja converter pela cotação do dia, o programa deverá calcular o valor que você deverá pagar pela cotação.</p>

<p><a href="https://github.com/JessicaNathany/conversor-moedas/blob/main/conversor-moedas.py">GitHub conversor de moedas</a></p>

<hr />

<h2 id="3-gerador-de-senhas-passwordgenerator">3. Gerador de senhas (PasswordGenerator)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto4.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Este é um projeto simples e deve existir vários exemplos diferentes na web, acabei criando uma telinha simples para gerar senhas para o usuário.</p>

<p>Objetivo: gerar senhas para o usuário contendo como opções:</p>

<p>utilizar caracteres especiais;
ter pelo menos 8 caracteres no máximo e no mínimo 6 caracteres;
ter letra maiúscula no nome;
ter números como ! “ ? $ ? % ^ &amp; * ( ) _ — + = { [ } ] : ; @ ‘ ~ # | \ &lt; , &gt; . ? /;
ter símbolos:</p>

<hr />

<h2 id="4-consultando-api-ricky-morty-consulting-information-rick-and-mortyapi">4. Consultando API Ricky Morty (Consulting Information Rick and Morty.api)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto5.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Este é um projeto de uma API Rest para consultar informações da <a href="https://rickandmortyapi.com/">API Ricky Morty</a>. Neste exemplo, a API tem como objetivo somente obter personagens e localização.</p>

<p>Objetivo: consumir a API do Ricky Morty acima, através do endpoints, trazer informações de personagens e episódios.</p>

<p><a href="https://github.com/Carlj28/RickAndMorty.Net.Api">GitHub RickyandMorty</a></p>

<hr />

<h2 id="5-timer-pomodoro-pomodoro-clock">5. Timer Pomodoro (Pomodoro Clock)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto6.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Esse projeto achei a ideia dele aqui na Web e achei interessante também adicionar na lista, para tentar fazer. Basicamente consistem em criar um timer do pomodoro, algo semelhante ao pomodoro focus , criar um serviço semelhante ao pomodoro, contendo basicamente as funcionalidades do timer, um crônometro, colocar as pausas e zerar o cronômetro <a href="https://pomofocus.io/">pomofocus</a>.</p>

<p><a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Pomodoro-Clock.md">GitHub Pomodoro Clock</a></p>

<hr />

<h2 id="6-gerador-ssh-e-hash-criptografia">6. Gerador SSH e HASH (Criptografia)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto7.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Esse foi um projeto que fiz na pós -graduação em uma aula de Cybersecurity, uma ideia simples cujo objetivo criptografar a mensagem digitada pelo usuário.</p>

<p>GitHub:</p>

<p><a href="https://github.com/JessicaNathany/projetoCriptografia">GitHub Projeto Criptografia</a></p>

<hr />

<h2 id="7-simulador-fast-food">7. Simulador Fast Food</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto8.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Fast Food simula o funcionamento de um simples restaurante take-away e foi concebido para ajudar o criador a pôr os seus conhecimentos sobre Promessas e princípios de design SOLID a funcionar.</p>

<p>Objetivo: simular um Fast Food Fake utilizando os seguintes cenários:</p>

<ul>
  <li>usuário — o usuário final que utiliza a aplicação;</li>
  <li>encomendar pedido — o simuladar a encomenda do pedido;</li>
  <li>cliente — simular o lado do cliente;</li>
  <li>cozinha — simular o pedido do lado da cozinha ;</li>
  <li>servidor — simular o lado do servidor</li>
</ul>

<p><a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/3-Advanced/FastFood-App.md">Github FastFood</a></p>

<hr />

<h2 id="8-bot-para-consumir-api-whatsapp-whatsapppythonbot">8. Bot para consumir API Whatsapp (WhatsappPythonBot)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto9.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Hoje em dia é muito comum empresas criarem bots para atender seus clientes no Whatsapp, seja par aenviar mensagens instântaneas, atendimento etc. E a ideia aqui é fazer o mesmo, criar um Bot para consumir a <a href="https://developers.facebook.com/docs/development">API do Whatsapp</a>. Abaixo inclui um o repositório do projeto que encontrei utilizando a linguagem Python.</p>

<p>Objetivo: criar um bot para consumir os endpoints da API Whatsapp</p>

<ul>
  <li>enviar mensagens automatizadas;</li>
  <li>enviar áudios;</li>
  <li>enviar imagens;</li>
  <li>enviar arquivos;</li>
  <li>enviar contatos</li>
</ul>

<p><a href="https://github.com/ultramsg/python-whatsApp-bot">Github WhatsApp bot</a></p>

<hr />

<h2 id="9-dashboard-terraform-terraboard">9. Dashboard TerraForm (Terraboard)</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto9.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Esse é um tipo de projeto mais avançado, mas é um bom desafio para se fazer. Esse projeto encontrei na web e é um painel para visualizar e consultar os estados da Terraform.</p>

<p>Objetivo: criar um dashboard para visualizar consultas e estados do Terraform.</p>

<ul>
  <li>uma página de resumo com os arquivos de estado atualizados mais recentemente com sua atividade;</li>
  <li>uma página de estado com estados dos arquivos detalhados, incluindo versões e arquivos atribuídos;</li>
  <li>interface de busca para consultar recursos por tipo, nome ou atributos;
uma interface dif para comparar o estado entre as versões</li>
</ul>

<p><a href="https://github.com/camptocamp/terraboard">Github Terraboard</a></p>

<hr />

<h2 id="10-jogo-de-xadrez">10. Jogo de Xadrez</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto11.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Uma ideia bacana e também desafiadora é criar um jogo de xadrez utilizando sua linguagem favorita ou a linguagem que você se sentir mais confortável em desenvolver. Neste site o Macoratti crio um <a href="https://www.macoratti.net/10/06/c_xdz1.htm">jogo de xadrez</a> usando a linguagem C#. Logo abaixo, tem um outro projeto feito em JavaScript, e tem outra ideia com linguagem <a href="https://acervolima.com/projete-um-jogo-de-xadrez/">GO</a> e <a href="https://levelup.gitconnected.com/chess-python-ca4532c7f5a4">Python</a>.</p>

<p>Deixei algumas ideias de projetos para treino, mas vou deixar aqui um repositório de projetos backend com mais ideias pra vocês treinarem, pode acessar o <a href="https://github.com/CollabCodeTech/backend-challenges">Backend Challanges Tech</a>.</p>

<hr />

<h2 id="10-jogo-de-xadrez-1">10. Jogo de Xadrez</h2>

<p><br /></p>
<div align="center">
  <img src="/assets/img/artigo-projeto10.jpg" alt="imagem artigo cloudflare sobre SSL" style="max-width: 400px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
</div>
<p><br /></p>

<p>Deixei alguns repositórios de apis pública s que você pode consumir e estudar.</p>

<ul>
  <li><a href="https://github.com/BrasilAPI/BrasilAPI">BrasilAPIs</a></li>
  <li><a href="https://macoratti.net/19/07/net_apipub1.htm">APIs públicas para desenvolvedores por Macoratti </a></li>
  <li><a href="https://developers.google.com/">Google APIs</a></li>
  <li><a href="https://developer.uber.com/">Uber developres</a></li>
  <li><a href="https://developer.nytimes.com/">The New York Time APIs</a></li>
  <li><a href="https://api.nasa.gov/">NASA APIs</a></li>
  <li><a href="https://www.exchangerate-api.com/">Exchangerate API</a></li>
  <li><a href="https://developer.linkedin.com/">Linkedin Developers</a></li>
  <li><a href="https://openweathermap.org/api">Weather API</a></li>
  <li><a href="https://servicos.cptec.inpe.br/XML/">INPE API</a></li>
  <li><a href="https://servicos.cptec.inpe.br/XML/">INPE API</a></li>
</ul>

  </div>
  
  <footer class="post-footer">
    <hr>
    <p><a href="/artigos">← Voltar para todos os artigos</a></p>
  </footer>
</article>
  </div>
  
  <footer class="post-footer">
    <hr>
    <p><a href="/artigos">← Voltar para todos os artigos</a></p>
  </footer>
</article>

Passo 4: Página inicial

4.1. Arquivo `index.md`

---
layout: default
title: "Início"
---

<div class="home-intro">
  <img src="/assets/img/perfil.jpg" alt="Sua foto" class="profile-pic">
  <h1>Bem-vindos ao meu blog!</h1>
  <p>Sou [Seu Nome], desenvolvedor(a) e aqui compartilho conhecimentos sobre tecnologia.</p>
</div>

<nav class="menu">
  <ul>
    <li><a href="/artigos">Artigos</a></li>
    <li><a href="/projetos">Projetos</a></li>
    <li><a href="/quem-sou">Quem sou</a></li>
  </ul>
</nav>

### Últimos artigos



<div class="grid">

  <div class="card">
    
      <img class="round" src="/assets/img/cdn.jpg" alt="Capa do post">
    
    <h3><a href="/artigos/um-breve-estudo-system-design/">Um breve estudo sobre System Design</a></h3>
    <div class="post-meta">30/12/2025</div>
    
      <p>Um pequeno artigo que descreve alguns conceitos sobre o que é o system design</p>
    
  </div>

  <div class="card">
    
      <img class="round" src="/assets/img/ssl-artigo.jpg" alt="Capa do post">
    
    <h3><a href="/artigos/ssl-letsencrypt/">Como uso o Let's Encrypt para proteger meu site com SSL gratuito</a></h3>
    <div class="post-meta">30/12/2025</div>
    
      <p>Aprenda como implementei certificados SSL gratuitos com Let's Encrypt no site do Café Debug, incluindo automação com Certbot e crontab.</p>
    
  </div>

  <div class="card">
    
      <img class="round" src="/assets/img/teoremacap.jpg" alt="Capa do post">
    
    <h3><a href="/artigos/nosql/">NoSQL</a></h3>
    <div class="post-meta">30/12/2025</div>
    
      <p>Conceitos sobre bancos NoSQL</p>
    
  </div>

  <div class="card">
    
      <img class="round" src="/assets/img/livro.png" alt="Capa do post">
    
    <h3><a href="/artigos/my-first-experience-writing-a-book-en/">My First Experience Writing a Book</a></h3>
    <div class="post-meta">30/12/2025</div>
    
      <p>Sharing my journey of writing 'Dev Career Habits' - the challenges, process, and lessons learned during my first book-writing experience.</p>
    
  </div>

  <div class="card">
    
      <img class="round" src="/assets/img/githubpages.png" alt="Capa do post">
    
    <h3><a href="/artigos/migrando-artigos-para-githubio/">Como criar um blog completo no GitHub Pages com Jekyll - Guia definitivo</a></h3>
    <div class="post-meta">30/12/2025</div>
    
      <p>Guia completo passo a passo para criar seu próprio blog no GitHub Pages usando Jekyll, desde a configuração inicial até a publicação de a...</p>
    
  </div>

  <div class="card">
    
      <img class="round" src="/assets/img/artigo-projeto1.jpg" alt="Capa do post">
    
    <h3><a href="/artigos/ideias-projetos-backend-praticar/">Ideias de projetos backend para você praticar</a></h3>
    <div class="post-meta">30/12/2025</div>
    
      <p>Idéias de projetos backend para estudar e praticar</p>
    
  </div>

  <div class="card">
    
      <img class="round" src="/assets/img/githubpages.png" alt="Capa do post">
    
    <h3><a href="/artigos/github-pages-tutorial-en/">How to Create a Complete Blog on GitHub Pages with Jekyll - Definitive Guide</a></h3>
    <div class="post-meta">30/12/2025</div>
    
      <p>Complete step-by-step guide to create your own blog on GitHub Pages using Jekyll, from initial setup to publishing articles.</p>
    
  </div>

</div>

Passo 5: Estilização CSS

5.1. Arquivo `assets/css/style.css`

---
---

/* Estilos base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  background-color: #2c3e50;
  color: white;
  padding: 1rem 0;
}

.navbar {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar a:hover {
  color: #3498db;
}

.site-title {
  margin-right: auto !important;
  font-size: 1.2rem;
  font-weight: bold;
}

/* Home intro */
.home-intro {
  text-align: center;
  padding: 3rem 0;
}

.profile-pic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-bottom: 1rem;
  object-fit: cover;
  border: 4px solid #3498db;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.home-intro h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.home-intro p {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

/* Menu */
.menu {
  text-align: center;
  margin: 2rem 0;
}

.menu ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.menu a {
  background-color: #3498db;
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.menu a:hover {
  background-color: #2980b9;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

/* Cards */
.card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.card h3 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.card h3 a {
  color: inherit;
  text-decoration: none;
}

.card h3 a:hover {
  color: #3498db;
}

.post-meta {
  color: #999;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* Post styles */
.post {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
}

.post h1 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.post-content {
  line-height: 1.8;
  color: #333;
}

.post-content h2 {
  color: #2c3e50;
  margin: 2rem 0 1rem 0;
  font-size: 1.8rem;
}

.post-content h3 {
  color: #2c3e50;
  margin: 1.5rem 0 0.5rem 0;
  font-size: 1.4rem;
}

.post-content code {
  background: #f8f9fa;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9rem;
}

.post-content pre {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.tag {
  background: #3498db;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  margin-right: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .home-intro h1 {
    font-size: 2rem;
  }
  
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
  
  .grid {
    grid-template-columns: 1fr;
  }
}

Passo 6: Criando seu primeiro artigo

6.1. Formato do post

Crie um arquivo em _posts/2025-01-01-meu-primeiro-post.md:

---
layout: post
title: "Meu primeiro post no blog"
date: 2025-01-01
excerpt: "Como criei meu blog no GitHub Pages e minhas primeiras impressões."
tags: [blog, github-pages, tecnologia]
---

# Meu primeiro post no blog

Este é meu primeiro artigo no blog! Aqui vou compartilhar...

## Subtítulo

Conteúdo do artigo com código:

```javascript
console.log("Hello, world!");

Conclusão

Espero que tenham gostado!

### 6.2. Convenções importantes

- **Nome do arquivo**: `YYYY-MM-DD-titulo-do-post.md`
- **Front-matter obrigatório**: layout, title, date
- **Tags**: ajudam na organização
- **Excerpt**: resumo que aparece na listagem

## Passo 7: Deploy e configuração

### 7.1. Ativando GitHub Pages

1. Acesse **Settings** do seu repositório
2. Vá em **Pages** (menu lateral)
3. Em **Source**, selecione **Deploy from a branch**
4. Escolha **main** branch
5. Clique em **Save**

### 7.2. Primeiro deploy

```bash
# Adicione todos os arquivos
git add .

# Faça o commit
git commit -m "Initial blog setup with Jekyll"

# Envie para o GitHub
git push origin main

Aguarde alguns minutos e acesse https://seuusername.github.io

Passo 8: Desenvolvimento local (opcional)

8.1. Usando GitHub Codespaces

No seu repositório, clique em Code → Codespaces
Create codespace on main
No terminal do Codespaces:

bundle install
bundle exec jekyll serve --host 0.0.0.0

8.2. Configuração local (Ruby)

# Instale Ruby (https://rubyinstaller.org/)
# Depois:
gem install jekyll bundler
bundle install
bundle exec jekyll serve

Acesse http://localhost:4000 para ver o site local.

Próximos passos

Funcionalidades avançadas:

Comentários: Integração com Disqus
Analytics: Google Analytics
SEO: Meta tags e sitemap
Domínio customizado: seublog.com
Tema personalizado: Mais customizações

Dicas importantes:

Backup: Git já é seu backup automático
Versionamento: Cada mudança fica registrada
Colaboração: Outros podem contribuir via PR
Gratuito: Zero custos de hospedagem