Como construí o gor.dev.br: Astro, Docker e Cloudflare Pages

Este site tem três trabalhos: mostrar o que eu sei fazer, guardar o que eu aprendo em forma de artigo e servir de vitrine para as ferramentas que vou publicar. Aqui está como ele foi montado e por quê.

Um site estático, sem servidor

Portfólio e blog são conteúdo que muda pouco e é lido muito. Por isso o site é estático: o build gera HTML e CSS uma vez, e uma CDN entrega os arquivos. Não existe processo rodando em produção, banco de dados ou servidor para manter.

O gerador é o Astro. Ele envia zero JavaScript por padrão e só carrega código interativo onde ele é necessário. As animações deste site, por exemplo, são CSS puro.

Conteúdo em Markdown, validado no build

Projetos e artigos são arquivos Markdown no repositório. Cada um tem um cabeçalho com campos obrigatórios:

title: "Pipeline ELK com mais de 100 mil registros por dia"
org: Ardeo
period: { start: "2022-09", end: "2023-12" }
domain: dados
stack: [Elasticsearch, Kibana, Python]

O Astro valida esses campos com um schema. Se faltar um campo ou o tipo estiver errado, o build falha antes de qualquer coisa ir para o ar. Publicar um artigo novo é escrever um arquivo, abrir um pull request e fazer o merge.

Docker para rodar no meu computador

Para rodar localmente igual à produção, o projeto tem um Dockerfile em dois estágios:

Um contêiner Node instala as dependências e gera o build.
Um contêiner NGINX serve apenas os arquivos estáticos gerados.

docker compose up --build

Existe também um modo de desenvolvimento, com recarga automática a cada alteração.

Deploy automático no Cloudflare Pages

O repositório está ligado ao Cloudflare Pages. Cada push na branch principal gera um build e publica em gor.dev.br; cada pull request ganha uma URL de pré-visualização. O analytics também é do Cloudflare, sem cookies.

Identidade visual

A marca é um g desenhado como trilha de circuito dentro de um anel aberto, com um nó amarelo na ponta. O amarelo é o do golden wattle, flor da Austrália, que também lembra o ipê-amarelo brasileiro. Os títulos usam Sora, o texto usa Newsreader, e a interface usa IBM Plex.

Próximos passos

A seção Projetos vai receber as primeiras ferramentas que estou construindo, cada uma em um subdomínio próprio. Os próximos artigos vão contar os projetos de dados por trás dos números que aparecem na home.