Se você está buscando transformar um site estático escrito em HTML em algo mais dinâmico e fácil de gerenciar, este tutorial é para você. A partir de uma conversa rica com perguntas e exemplos práticos, vamos guiar você no processo de usar Jekyll, um gerador de sites estáticos poderoso e flexível. Vamos criar uma página inicial dinâmica e aprender como estruturar o site de maneira organizada e eficiente.
Jekyll é uma ferramenta de geração de sites estáticos. Ele converte arquivos simples, como Markdown ou HTML, em sites completos. O Jekyll permite separar o conteúdo (artigos, páginas) do layout (cabeçalho, rodapé, CSS), tornando o gerenciamento do site muito mais simples.
Antes de começar, você precisará configurar o ambiente para usar o Jekyll:
gem install jekyll bundler
jekyll new tisha-news
cd tisha-news
bundle install
Agora você tem a estrutura básica para começar a trabalhar com o Jekyll!
_config.ymlO arquivo _config.yml contém as configurações principais do seu site. Aqui está o modelo configurado para o “Tisha News”:
# Site settings
title: Tisha News
description: "Blog revelador e irreverente da Tisha, a lagartixa jornalista. Fofocas políticas e bastidores do poder. Descubra os segredos mais bem guardados da política!"
url: "https://tisha.geanramos.com.br"
image: "https://tisha.geanramos.com.br/img/tisha.jpg"
author:
name: "Tisha News"
email: "[email protected]"
url: "https://tisha.geanramos.com.br"
# Build settings
baseurl: / # Use "/" para sites na raiz ou altere para "/subdiretorio/"
markdown: kramdown
source: .
destination: ./_site
permalink: /:title
paginate: 8
paginate_path: /page:num/
# Default values
defaults:
-
scope:
path: ""
type: "posts"
values:
layout: "post"
# Plugins
gems:
- jekyll-paginate
# Custom variables
version: "1.1.0"
# Options
custom_header: false
custom_nav_footer: false
reverse: false
title e description: Define as informações básicas do site.baseurl: Configura o caminho relativo do site.paginate: Define quantos artigos aparecem por página (útil para blogs).gems: Aqui listamos os plugins, como jekyll-paginate para paginação.Salve o código abaixo como index.html na raiz do seu projeto. Esta será a página inicial do site:
---
layout: default
title: "Home"
---
<header>
<div class="capa-container">
<img class="capa" src="https://i.imgur.com/ZymXe4a.png" alt="Capa">
</div>
<div class="avatar-container">
<a href="https://dev.geanramos.com.br/">
<img class="avatar" src="https://tisha.geanramos.com.br/img/tisha.jpg" alt="Avatar">
</a>
</div>
</header>
<section class="perfil-container">
<div class="perfil-header">
<a href="https://dev.geanramos.com.br/" class="perfil-nome-link">
<h1 class="perfil-nome">Gean Ramos</h1>
</a>
<a href="https://whatsapp.com/channel/0029VaiPYBPLo4heVf0U3u2d" rel="nofollow noopener noreferrer" target="_blank" class="botao-whatsapp">Seguir</a>
</div>
<p class="perfil-descricao">Powered by Jekyll and GitHub Pages</p>
<p class="perfil-seguidores">334 mil seguidores</p>
</section>
<main class="container">
<div class="cartao-artigo">
<a href="https://tisha.geanramos.com.br/ovo-treta-e-praia-o-brasil-pegando-fogo-nesta-sexta">
<img src="https://images.weserv.nl/?w=112&h=64&output=webp&q=90&t=square&url=https://tisha.geanramos.com.br/dev/maxresdefault_002.jpg" alt="Imagem da publicação">
</a>
<div class="conteudo-artigo">
<a href="https://tisha.geanramos.com.br/ovo-treta-e-praia-o-brasil-pegando-fogo-nesta-sexta">
<h3>🔥 Ovo, treta e praia: o Brasil pegando fogo nesta sexta! 🔥</h3>
</a>
</div>
</div>
<div class="conteudo-artigo">
<a href="https://tisha.geanramos.com.br/133-para-1">
<h3>133 trabalhadores bancam 1 deputado! Vale a pena? 🏛️</h3>
</a>
</div>
</main>
<footer>
<a href="https://dev.geanramos.com.br/privacy#termos-de-uso" title="Termos de Uso">Termos de Uso</a> |
<a href="https://dev.geanramos.com.br/privacy#política-de-privacidade" title="Política de Privacidade">Privacidade</a> |
<a href="https://dev.geanramos.com.br/radio.html" title="Rádio">Tisha FM</a>
<p style="font-weight: 400;">@2025 - Tisha News</p>
</footer>
Gean Ramos e https://dev.geanramos.com.br.Para evitar duplicação de código, crie um layout base em _layouts/default.html:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Como Transformar um Site Estático em uma Página Dinâmica com Jekyll – Um Tutorial Passo a Passo - Gean Ramos</title>
<link rel="icon" href="https://i.imgur.com/dLQezK3.png" sizes="192x192" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
/* CSS fornecido para personalização */
</style>
</head>
<body>
<section>
<div class="post-container">
<h1 class="project-title">Entendendo Domínios IDN e Punycode: O que São e Como Funcionam</h1>
<div class="project-load"><p>Nos últimos anos, os domínios internacionalizados (IDN, ou Internationalized Domain Names) ganharam relevância, permitindo que usuários de diversas partes do mundo registrem endereços na web usando caracteres especiais ou alfabetos não latinos. Isso inclui letras acentuadas, caracteres chineses, japoneses, cirílicos e muitos outros. Neste artigo, exploraremos o que são domínios IDN, como o sistema Punycode os torna possíveis, e exemplos práticos de aplicação.</p>
<p><img src="https://i1.wp.com/jprs.co.jp/en/img/jdn2_n.gif" alt="Entendendo Domínios IDN e Punycode: O que São e Como Funcionam" /></p>
<h3 id="o-que-são-domínios-idn">O Que São Domínios IDN?</h3>
<p>Os domínios IDN permitem o uso de caracteres além do padrão ASCII (a-z, 0-9 e o hífen). Por exemplo, enquanto um domínio tradicional poderia ser <strong>geanramos.com.br</strong>, um domínio IDN pode ser <strong>geãnramos.com.br</strong> ou até mesmo <strong><a href="http://www.%E6%97%A5%E6%9C%AC%E8%AA%9E.com.br">www.日本語.com.br</a></strong>.</p>
<p>Esses domínios são especialmente útis para representação fiel de idiomas locais, promovendo acessibilidade e identidade cultural na web.</p>
<h3 id="o-papel-do-punycode">O Papel do Punycode</h3>
<p>Os sistemas de nomes de domínio (DNS) só reconhecem caracteres ASCII. Para compatibilizar domínios IDN com a infraestrutura existente, foi criado o <strong>Punycode</strong> – um método de codificação que converte caracteres especiais para um formato ASCII legível pelo DNS.</p>
<p>Por exemplo:</p>
<ul>
<li><strong>Domínio:</strong> <a href="http://www.%E6%97%A5%E6%9C%AC%E8%AA%9E.com">www.日本語.com</a></li>
<li><strong>Punycode:</strong> <a href="http://www.xn--wgv71a119e.com">www.xn–wgv71a119e.com</a></li>
</ul>
<p>Quando um usuário digita o domínio com caracteres especiais, o navegador converte automaticamente para o formato Punycode antes de realizar a solicitação ao servidor.</p>
<h3 id="exemplos-práticos">Exemplos Práticos</h3>
<ol>
<li>
<p><strong>Domínio em Japonês:</strong></p>
<ul>
<li>Nome: <strong><a href="http://www.%E6%97%A5%E6%9C%AC%E8%AA%9E.com">www.日本語.com</a></strong></li>
<li>Punycode: <strong><a href="http://www.xn--wgv71a119e.com">www.xn–wgv71a119e.com</a></strong></li>
</ul>
</li>
<li>
<p><strong>Domínio com Acentos:</strong></p>
<ul>
<li>Nome: <strong><a href="http://www.ação.com.br">www.ação.com.br</a></strong></li>
<li>Punycode: <strong><a href="http://wxn--ao-siap.com.br"> xn–ao-siap.com.br</a></strong></li>
</ul>
</li>
</ol>
<h3 id="é-possível-usar-domínios-idn-em-recursos-específicos">É Possível Usar Domínios IDN em Recursos Específicos?</h3>
<p>Sim! Você pode usar um domínio IDN, incluindo seu formato Punycode, para hospedar conteúdos como páginas, arquivos de vídeo e outros recursos. Por exemplo:</p>
<ul>
<li>Um arquivo hospedado em <strong><a href="http://www.xn--ao-siap.com.br/embed/video1.mp4">www.ação.com.br/embed/video1.mp4</a></strong> seria acessível também via <strong><a href="https://www.xn--ao-siap.br/embed/video1.mp4">https://www.xn–ao-siap.com.br/embed/video1.mp4</a></strong>.</li>
</ul>
<p>Essa flexibilidade permite o uso pleno de domínios internacionalizados em diferentes plataformas.</p>
<h3 id="registro-e-configuração-de-domínios-idn">Registro e Configuração de Domínios IDN</h3>
<p>Para registrar um domínio IDN, é necessário verificar se o registrador (como o Registro.br) oferece suporte a domínios internacionalizados. Você pode registrar tanto o formato Unicode quanto o Punycode, pois eles funcionam de forma intercambiável.</p>
<h3 id="considerações-finais">Considerações Finais</h3>
<p>Os domínios IDN e o sistema Punycode expandem as possibilidades de representação online, permitindo que a web seja um espaço verdadeiramente global. Desde o uso de caracteres acentuados em nomes de domínios até a inclusão de alfabetos inteiramente diferentes, o futuro dos IDNs aponta para uma web mais inclusiva e conectada com a diversidade cultural mundial.</p>
<p>Se você tem um domínio tradicional e quer explorar as opções IDN, essa é uma excelente oportunidade para destacar sua identidade cultural na internet!</p>
<p>Este site inspirou-me este artigo. <a href="https://freewebhostingarea.com/">free web hosting</a></p>
</div>
</div>
</section>
</body>
</html>
Salve os posts no diretório _posts/ usando a seguinte estrutura:
Exemplo de um post (2025-03-11-crash-polemica-e-professor-robo.md):
---
title: "Crash, polêmica e professor robô: os babados do dia!"
date: 2025-03-11 13:00:00 -03:00
description: "Robô dando aula na China, mini-crash em Wall Street e Frei Gilson no centro das polêmicas. Vem entender os bafos que estão bombando! 😱🔥"
tags: [resumo]
image: "https://i.imgur.com/t9H76yX.jpeg"
---
Aqui está o conteúdo detalhado do artigo. Você pode escrever em **Markdown** para formatar o texto.
Para verificar tudo, execute o servidor:
bundle exec jekyll serve
Acesse http://localhost:4000 para visualizar seu site.