Template HTML para Blog Pessoal Minimalista — Grátis e Editável
Template HTML grátis editável para blog pessoal minimalista com layout 2 colunas, dark mode automático e Schema.org Blog. Publique em segundos.
Sobre este template
Para quem é este template
Você quer publicar textos próprios na internet — ensaios, opiniões, tutoriais técnicos, notas de leitura, reviews de produto, reflexões de carreira, posts de hobby (cozinha, viagem, fotografia, fitness, finanças pessoais) — e cansou de blog que é overkill ou de plataforma onde o domínio é da empresa, não seu. Quer um endereço próprio (pensamentos-digitais.htmly.com.br ou seudominio.com.br), zero CMS, zero update de plugin, zero painel de admin, e tipografia decente para leitor passar 5 minutos lendo sem cansar.
Layout pensado para qualquer escritor casual ou profissional. Header sticky com brand mark + navegação por categoria, hero com título do blog e tagline, layout 2-coluna em desktop (posts à esquerda, sidebar à direita) que vira 1-coluna no mobile. Cada post tem thumb com gradient + ícone SVG (sem precisar de imagem), meta com categoria + data + tempo de leitura, título grande, descrição e link 'Ler mais'. Sidebar com 3 widgets: bio do autor (avatar, nome, descrição, redes sociais), tag cloud e lista de posts populares. Tipografia Inter, paleta indigo + accent verde água, dark mode automático respeitando preferência do sistema. Schema.org Blog inline para Google entender de cara que é blog (não site institucional).
Por que publicar no Htmly
Template grátis, publicação em 10 segundos, HTTPS automático e link curto compartilhável (pensamentos-digitais.htmly.com.br). Edite direto no navegador — clique no título do post, na descrição, no nome do autor e digite. Para publicar post novo, duplique o <article class="post"> e troque o conteúdo. Sem cadastro para testar. Domínio próprio (meublog.com.br) disponível no plano Pro para ficar memorável.
Próximos passos
Para conhecer outros formatos de publicação digital, o blog do Htmly tem guias práticos de SEO, marketing de conteúdo e arquitetura de informação para escritores. Se quer começar a explorar IA no fluxo de escrita, o manual de criar site com IA cobre o passo a passo completo. Para escritores que querem também página de captação de newsletter ou lançamento de livro, o gerador de página de captura com IA entrega prompt pronto para ChatGPT ou Claude. E para domínio próprio (meublog.com.br), confira os planos pagos do Htmly.
O que vem incluído
- ✓Header sticky com brand mark (badge editável de 2 letras), nome do blog e navegação por categoria
- ✓Hero centralizado com título grande do blog (tipografia clamp 2-3.25rem) e tagline curta abaixo
- ✓Layout 2-coluna em desktop (posts à esquerda, sidebar à direita) que vira 1-coluna automática em mobile
- ✓Lista de 3 posts de exemplo, cada um com thumb gradient + ícone SVG (sem precisar de imagem real), meta (categoria + data + tempo de leitura), título e descrição
- ✓Botão 'Ler mais' com seta animada (translateX no hover) — cada post linka pra `<a href="#">` que você troca por URL externa ou outro arquivo HTML do mesmo domínio
- ✓Sidebar com 3 widgets editáveis: 'Sobre o autor' (avatar emoji + nome + bio + 3 redes sociais), 'Tags' (8 pílulas clicáveis) e 'Posts populares' (lista vertical com data)
- ✓Schema.org `Blog` inline com `name`, `description` e `author` — Google entende de cara que é blog
- ✓Dark mode automático via `prefers-color-scheme` — leitor que usa sistema no escuro vê versão dark
- ✓Tipografia Inter com leading 1.7 e largura de linha confortável — leitor passa 5-10 min sem cansar
- ✓Paleta indigo + accent verde água, contraste WCAG AA verificado em light e dark mode
- ✓Mobile-first com layout que se reorganiza automaticamente — sidebar vira coluna abaixo dos posts no celular
- ✓Acessível (WCAG AA, focus-visible, navegação por teclado, alt em ícones SVG, `prefers-reduced-motion`)
- ✓HTML estático aberto — você pode baixar o código, editar localmente em qualquer editor e hospedar onde preferir
Como personalizar com IA
- 1Peça ao ChatGPT: 'reescreva o hero deste HTML trocando "Pensamentos Digitais" pelo nome [DO MEU BLOG], a tagline pela [MINHA PROPOSTA] em até 20 palavras, e gere 3 posts de exemplo na minha área [TEMA DO BLOG] com título, categoria, data e descrição de 2 linhas'
- 2Pra publicar um post novo, duplique o `<article class="post">` e troque conteúdo. Pra post longo separado em página própria, crie um arquivo `post-meu-titulo.html` no mesmo diretório (basta duplicar o index.html, apagar lista de posts e deixar só o `<article>`) e linke do `<a class="read-more" href="post-meu-titulo.html">`
- 3Edite o widget 'Sobre o autor' na sidebar — troque o emoji `<div class="avatar">✍️</div>` por uma foto (`<img src="sua-foto.jpg">`), o nome, a bio (1-2 linhas) e as 3 redes sociais (Twitter, GitHub, LinkedIn editáveis no `<svg>`)
- 4Atualize as 8 tags do widget Tags pras suas categorias reais — `<a>IA</a> <a>Web</a> <a>React</a>` etc. Cada `<a>` pode linkar pra uma página de tag (`tag-react.html`) ou pra um filtro externo
- 5Personalize a paleta no bloco `:root` do `<style>` — `--color-primary` (indigo) e `--color-accent` (verde água) definem o tom. Pra blog literário, troque pra serif (`--font-sans: 'Lora', Georgia, serif`) e paleta sépia (`#a16207` + `#854d0e`). Pra blog de tecnologia, mantenha indigo. Pra blog feminino, troque pra rosa-magenta `#ec4899` + roxo `#a855f7`
Perguntas frequentes
Funciona pra qualquer tema de blog ou só pra tecnologia?▾
Qualquer tema. As 3 categorias de exemplo (Tecnologia, Criatividade, Sobre) são editáveis — troque pra 'Cozinha / Vinhos / Receitas', 'Viagens / Roteiros / Hospedagem', 'Carreira / Liderança / Produtividade', 'Finanças / Investimentos / Economia', ou o que fizer sentido pro seu nicho. A estrutura (lista de posts + sidebar com bio + tags + populares) é universal. Tipografia, paleta e ícones SVG dos thumbs são editáveis.
Como faço pra publicar um post novo?▾
Tem 2 caminhos. (1) Inline — duplique o `<article class="post">` na lista da home e troque conteúdo. Funciona pra blog que mostra todos os posts na home. (2) Página separada — pra post longo, crie um arquivo HTML novo no mesmo diretório (ex: `post-titulo.html`) com só o conteúdo do post (sem header/sidebar/lista). Linke do `<a class="read-more">` da home apontando pra `post-titulo.html`. Sem CMS, sem banco — só HTML.
Posso ter páginas de tag, arquivo por mês ou paginação?▾
Não vem nativo (HTML estático puro), mas dá pra fazer manual com pouco esforço. Pra página de tag, crie `tag-react.html` listando só os posts daquela tag (cole os `<article>` correspondentes). Pra arquivo por mês, mesma lógica em `arquivo-marco-2026.html`. Pra paginação, crie `pagina-2.html` com os posts mais antigos. Manual de fazer mas funciona pra blogs com até ~50 posts; acima disso, vale considerar gerador estático (Jekyll, Hugo, Astro).
Como ficam as imagens dos posts?▾
O template usa thumbs com gradient CSS + ícone SVG no centro — visual elegante sem precisar de imagem. Pra usar imagens reais, troque o `<div class="post-thumb">` por `<img src="capa-post.jpg" alt="Descrição">`. Pra carregar rápido, suba imagem `webp` com 720px de largura e peso até 80KB. Imagens hospedam direto no Htmly junto com o HTML — só subir pra mesma pasta.
Posso usar domínio próprio (`meublog.com.br`) em vez de subdomínio Htmly?▾
Sim, no plano Pro. Você registra o domínio onde preferir (Registro.br, GoDaddy etc.) e aponta pro Htmly via CNAME — fazemos a configuração SSL automática via Cloudflare for SaaS. Subdomínio grátis (`meublog.htmly.com.br`) também funciona pra sempre, sem expirar — e já vale mais que `medium.com/@seuhandle` ou `seunome.blogspot.com` que vão pro domínio dos outros.