Montei meu portfólio na VPS, lutei com o GitHub e sobrevivi

Comecei querendo um blog bonito e simples. Terminei com Node 22 na VPS, três variáveis de ambiente com nomes parecidos e a certeza de que favicon é coisa séria.

Este é o primeiro post — um registro do que rolou, com vídeos nos lugares certos.

Antes: triângulo verde e menu demais

O blog tinha paleta própria (verde, creme, latão) e um header cheio de links. Pedido simples: mesmas cores do portfólio e só meu nome no topo.

Ficou preto, branco e cinza, igual ao resto do site. O menu sumiu; a barra de baixo (dock) continua cuidando da navegação. Menos ruído, mais leitura.

Deploy na VPS (porque OAuth não perdoa localhost)

Para o login do painel Escrever funcionar de verdade, o app precisava de uma URL pública estável. Subi o portfólio na VPS, com HTTPS no estilo dos outros projetos:

https://otavioxavier.com.br/

Node 12 do sistema? Nem brincando. Instalei Node 22, systemd, nginx na frente, certificado Let's Encrypt. Clássico.

OAuth: quatro variáveis e um redirect URI

A página /blog/escrever pede:

• AUTH_SECRET
• AUTH_GITHUB_ID e AUTH_GITHUB_SECRET (OAuth App)
• ADMIN_GITHUB_LOGIN (só minha conta entra)

No GitHub, o callback é:

/api/auth/callback/github

Ou seja, na produção:

https://otavioxavier.com.br/api/auth/callback/github

GITHUB_TOKEN é outra história: token de escrita no repositório para gravar os .md dos posts. OAuth entra; PAT grava. Confundi os dois uma vez. Não recomendo.

Depois de copiar o .env para /etc/portifolio/portifolio.env na VPS e reiniciar o serviço, o botão Entrar com GitHub finalmente levou… ao GitHub. Milagre.

Cards de projeto com vídeo (o Instagram do dev)

Gravei a tela dos apps e coloquei nos cards — loop mudo, estilo demo de produto.

Estudar+

Plataforma de estudo com IA: tema, resumos, questões, correção. O link de produção mudou para a VPS:

https://estuda-mais.143-95-220-102.sslip.io/

Acompanhador (FinTrack)

Controle financeiro: saldo do mês, categorias, transações, metas, calendário. O vídeo no card é deste app — não misturei com o Estudar+.

Detalhes que parecem pequenos (mas não são)

Favicon: troquei o da Vercel por óculos do Lucide — preto no modo claro do sistema, branco no escuro. Não é o toggle do site; é o tema do macOS. Detalhe nerd aprovado.

Steve Jobs: nova foto ao lado de “Design é como funciona.” A antiga saiu; a do biógrafo entrou.

Currículo: Escola SAGA agora aparece de 2021 a 2023.

Meta: este post

Ironia boa: o primeiro artigo do blog documenta como o blog foi parar no ar. Escrevi em Markdown em content/blog/, com mídia em public/blog/. Links que terminam em .mp4 viram player embutido — truque novo no renderer.

Se você chegou até aqui, provavelmente:

1. curte overengineering honesto, ou
2. está debugando OAuth às 01h, ou
3. os dois.

De qualquer forma, bem-vindo. O próximo post promete ser menos systemctl restart e mais código — mas não garanto nada.