Sitio Simples E Aconchegante

Como montar um sitio simples e aconchegante que realmente funciona

Eu já perdi horas tentando escolher uma framework só para criar uma página pessoal. No final das contas, o que funcionou foi algo que eu nem consideraria "construir um sitio". Foi basicamente um arquivo HTML com um pouco de CSS e host no GitHub Pages. Se você quer um sitio simples e aconchegante, esqueça tudo que viu em tutoriais que começam com "você vai precisar de Node.js, Webpack, um build pipeline e três variáveis de ambiente." Isso é overkill para o que a maioria das pessoas realmente precisa.

A estrutura que eu uso na prática

O meu setup padrão é o seguinte: um arquivo index.html, um arquivo styles.css dentro de uma pasta chamada css, e imagens numa subpasta assets/. Nada de build tool, nada de bundler. O HTML linka o CSS com uma tag <link> comum.

<link rel="stylesheet" href="css/styles.css">

Simples. Funciona em qualquer navegador lançado depois de 2010. Se você tem mais de um projeto, cria uma pasta por sitio e replica essa estrutura. Leva uns cinco minutos pro primeiro deploy. Um problema específico que eu encontrei várias vezes: eu colocava as fontes diretamente via URL do Google Fonts, e o sitio ficava fora do ar quando o serviço caía ou o usuário estava num ambiente restrito. A solução foi baixar os arquivos .woff2 e incluir localmente no projeto. O CSS @font-face ficou assim:

@font-face {
  font-family: 'MinhaFonte';
  src: url('../assets/fonts/minhafonte.woff2') format('woff2');
}

Isso elimina uma dependência externa que você não controla. O tempo de carregamento melhora porque o navegador não precisa fazer aquela requisição extra pro DNS do Google primeiro.

O CSS que faz a diferença

Para dar aquela sensação aconchegante, o segredo não é encher de efeitos. É escolher cores certas, espaçamento generoso, e uma tipografia que não cansa a vista. Eu costumo usar uma paleta de tons terrosos ou suaves, fundo claro mas não branco puro, e texto em cinza escuro em vez de preto. Alguns valores que eu sempre inicio com:

:root {
  --cor-fundo: #f5f2eb;
  --cor-texto: #3a3a3a;
  --cor-destaque: #b08968;
  --espacamento: 2rem;
  --fonte-principal: 'Georgia', serif;
}

O --espacamento é importante porque a maioria dos sitios simples falha exatamente aí. Pouco padding faz tudo parecer apertado. Use pelo menos 2rem entre seções, e 1rem mínimo dentro dos containers. Outro detalhe: limito a largura do conteúdo principal a uns 720px. Linhas muito longas de texto são difíceis de ler. Não adianta ter um sitio bonito se o cara fecha a aba depois de três linhas porque os olhos cansaram.

Deploy sem complicação

Eu hospedo no GitHub Pages porque é gratuito, não tem taxa de transferência abusiva pra sitios pequenos, e não preciso me cadastrar em lugar nenhum. Crio um repositório com o nome do sitio, subo os arquivos, ativo o Pages nas configurações, e pronto. Leva cerca de dois minutos. Se você quiser um domínio próprio, compra no Namecheap ou Cloudflare e aponta o CNAME. Eu já vi gente gastando horrores com hosting tradicional. Não tem motivo pra isso hoje em dia, a menos que você precise de backend ou banco de dados.

O custo total desse setup é zero. Você só paga o domínio, se quiser, que fica em torno de R$40 ao ano.

O que esse método não resolve

Se você precisa de comentários, formulários de contato funcionais, analytics integrado, ou CMS, esse approccio sozinho não entrega isso. O HTML estático é isso mesmo: estático. Para formulários, eu uso serviços como Formspree ou Netlify Forms, que são gratuitos até certo limite. Para analytics, o Plausible ou um script de privacy-friendly é mais simples que o Google Analytics e não depende de cookies pesados. Mas isso já é extra.

O principal limitation aqui é que, se você quiser alterar conteúdo frequentemente e não souber tocar no código, vai depender de subir os arquivos manualmente ou integrar alguma ferramenta externa. Não tem painel administrativo mágico. Se o seu caso é um portfólio, um blog pessoal pequeno, ou uma página institucional simples, essa abordagem é suficiente. Se você precisa de atualizações diárias por alguém não técnico, considere algo como o Hugo ou Astro, que mantêm a simplicidade mas oferecem templates e geração automática.

Resumo do processo em passos

1. Crie uma pasta pro projeto.
2. Dentro dela, crie index.html e css/styles.css.
3. Defina as variáveis CSS com cores e fontes.
4. Monte o HTML com sections, paragraphs, e imagem se precisar.
5. Teste no navegador abrindo o arquivo direto.
6. Crie um repositório no GitHub, faça push.
7. Ative GitHub Pages na aba Settings.

Isso leva de 30 minutos a uma hora na primeira vez. Depois que você pega o jeito, um sitio simples e aconchegante fica pronto em menos de vinte minutos.