Site novo: Hugo, Cloudflare Pages e zero JavaScript

Este site acabou de ser refeito do zero. A versão anterior era uma aplicação React que buscava os projetos e os artigos por API no navegador; funcionava, mas o conteúdo só existia depois que o JavaScript rodava. Para um portfólio e um blog, isso é o contrário do que se quer: o conteúdo é o produto, e ele precisa chegar pronto.

A versão nova é um site estático gerado com Hugo e publicado no Cloudflare Pages. Abaixo, um resumo das decisões.

Por que Hugo

• É um único binário. Não há node_modules, nem etapa de bundler. O build do site inteiro leva menos de um segundo.
• O conteúdo é Markdown. Cada artigo e cada projeto é uma pasta com um index.md e as imagens ao lado.
• Processamento de imagens embutido. As capturas de tela dos projetos entram no repositório em PNG e saem em WebP, em vários tamanhos, com srcset.
• Multilíngue de verdade. Português e inglês compartilham os mesmos templates, e o Hugo gera as tags hreflang e um sitemap por idioma.

Tema próprio, sem dependências

Em vez de adotar um tema pronto, escrevi os templates e um único arquivo CSS. O resultado cabe em poucos kilobytes e não carrega nenhum JavaScript.

O modo claro e escuro segue a preferência do sistema usando apenas CSS:

:root {
  color-scheme: light dark;
  --bg: #f5f2ec;
  --text: #1a1814;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121110;
    --text: #ece7dd;
  }
}

Sem botão, sem localStorage e sem o “flash” de tema errado no carregamento.

SEO desde o primeiro commit

Algumas coisas que já saem prontas em todas as páginas:

• title, description e URL canônica únicos;
• Open Graph e Twitter Cards, com uma imagem de compartilhamento gerada no build para cada página;
• dados estruturados em JSON-LD (Person, WebSite, BlogPosting, BreadcrumbList);
• sitemap.xml, robots.txt e feed RSS;
• fontes hospedadas no próprio domínio, com preload e font-display: swap.

Deploy

O repositório no GitHub está conectado ao Cloudflare Pages: cada git push na branch main gera um novo deploy, e cada pull request ganha uma URL de pré-visualização. A configuração do build no painel se resume a três campos:

Build command:     hugo --gc --minify
Output directory:  public
HUGO_VERSION:      0.167.0

Fixar a versão em HUGO_VERSION importa: sem ela, o Pages usa a versão padrão da imagem de build, que costuma estar bem atrás da atual.

O que vem por aí

A ideia é usar este espaço para registrar o que vou aprendendo no dia a dia com React Native, Expo, Cloudflare Workers e desenvolvimento de produtos. Se quiser acompanhar, assine o feed RSS.