Como criar um website estático com Hugo e Netlify — o meu workflow real

Como criar um website estático com Hugo e Netlify — o meu workflow real
#

💡 Resumo rápido: Hugo é um gerador de sites estáticos baseado em Markdown que, combinado com o Netlify, permite ter um website profissional, rápido e gratuito — mesmo com mais de 100 000 visitantes por mês.

Neste artigo o autor aborda o workflow de publicação com Hugo e Netlify, explicando como é possível gerir um website de grande tráfego de forma completamente autónoma e sem custos iniciais. O sistema assenta em ficheiros Markdown, controlo de versões com Git e publicação automática via Netlify — uma combinação que, uma vez dominada, liberta uma quantidade enorme de tempo.

A curva de aprendizagem existe, sobretudo pela natureza do Markdown, mas o ganho em velocidade e controlo é considerável. Quem já tem alguma experiência técnica vai perceber rapidamente o potencial desta abordagem.

O workflow descrito foi testado na prática com publicação de três artigos por semana, todos acompanhados de vídeo, sem qualquer equipa de suporte — apenas com as ferramentas certas e bons hábitos de produtividade.

Pontos-chave
#

Hugo como motor do site: O conteúdo é criado com o comando hugo new posts/ano/nome-do-artigo.md. O ficheiro gerado inclui automaticamente o front matter com título, data, tags e categorias.
Markdown como formato de escrita: Todo o conteúdo é escrito em Markdown — blocos de código com três backticks, imagens com ![alt](caminho), e incorporação de tweets ou vídeos com apenas o ID. Simples e rápido.
Pré-visualização em tempo real: O comando hugo server gera uma versão local do site que se atualiza automaticamente a cada edição — sem recarregar a página manualmente.
Taxonomias flexíveis: O Hugo suporta categorias, tags e séries em simultâneo. As categorias são amplas (meia dúzia no máximo), as tags são descritivas e podem chegar às centenas, o que facilita a navegação e o SEO.
Publicação automática com Netlify: Um git commit && git push é tudo o que é necessário para publicar. O Netlify deteta a alteração no repositório GitHub e faz o deploy automaticamente. É ainda possível agendar publicações com GitHub Actions ou um cron job num servidor.
Rollback instantâneo: O Netlify guarda o histórico de todos os deploys. Em caso de erro, é possível reverter o site para uma versão anterior com um clique.
Imagens otimizadas: As imagens devem ser comprimidas antes de ser publicadas (o autor usa imagens de aproximadamente 10 KB), o que mantém o consumo de largura de banda reduzido mesmo com tráfego elevado.
Sistema de comentários via GitHub Issues (Utterances): Em vez de Disqus ou serviços similares, é possível usar o Utterances, que associa cada artigo a uma issue no GitHub. Os comentários ficam centralizados, são moderados naturalmente (exigem conta GitHub) e integram-se bem com qualquer tema.
Temas e personalização: Recomenda-se começar com um tema bem documentado. Qualquer modificação deve ser feita em ficheiros locais dentro da pasta layouts/, nunca diretamente nos ficheiros do tema — caso contrário, as alterações perdem-se em atualizações futuras.
Custo zero no início: O serviço é gratuito até atingir limites elevados de utilizadores e largura de banda. O único custo mencionado é o plano pago do Netlify (cerca de 19 USD/mês), que passou a ser necessário após ultrapassar os 100 000 utilizadores mensais.

A minha opinião
#

Fiz mais de 350 websites (maioritariamente Joomla e Wordpress) experimentei muitas formas de publicar conteúdo técnico — e confesso que o Hugo com Netlify é uma das combinações mais elegantes que encontrei. A ideia de escrever em Markdown, fazer um git push e ter o site publicado em segundos é algo que qualquer administrador de sistemas vai apreciar. Não há bases de dados, não há PHP, não há superfícies de ataque desnecessárias.

Para quem está habituado ao WordPress, a transição pode parecer intimidante. Mas para perfis mais técnicos, o ganho em velocidade, segurança e controlo é imediato. É o tipo de ferramenta que, depois de adotar, torna difícil imaginar regressar ao que existia antes. Se ainda não experimentou sites estáticos, este é um bom ponto de partida. Já notaram porque será que este website carrega tão rápido? 💡🐭