Link do Repositório: https://github.com/alissonrms/blog
Para colocar este blog em produção, eu precisava de, pelo menos, um artigo publicado. Então, nada melhor do que documentar a própria experiência de construir essa estrutura e compartilhar como tirei o Alishot Labs do papel.
A ideia era ter algo simples e que não me custasse muito (o ideal era que fosse 0800 😂), então comecei a pesquisar um pouco sobre as tecnologias que estavam em alta. Eu sempre gostei de React e tive experiências bem positivas com o Next.js, então queria algo na mesma pegada: que gerasse páginas estáticas e resultasse naquele site rápido.
Pesquisando um pouco, decidi o seguinte:
A Stack
Umas das leis em desenvolvimento de software é nunca reinventar a roda, portanto aqui vai a stack que eu escolhi:
- Framework: Astro (pela performance de site estático e porque está bem em alta no mercado).
- Template: Astro Paper (um sistema de blog pronto, minimalista e focado em conteúdo).
- Domínio: Eu já tinha um domínio .dev, então aqui só criei um subdomínio. (Você deve gastar perto de uns 15 dólares por ano; recomendo comprar pela Cloudflare, gostei muito da plataforma deles).
- Hospedagem: Vercel (deploy fácil, integrado com o GitHub e grátis — pelo menos na época).
- CMS: Keystatic (para não precisar escrever Markdown na mão e conseguir criar e atualizar as coisas pelo próprio celular).
Posso dizer que foi tudo muito rápido: só tive que clonar o repo do Astro Paper, instalar as dependências e pronto — ele já vem com alguns artigos de exemplo e tudo funciona perfeitamente de primeira.
O que fiz depois disso foi apenas ajustar os estilos (light/dark) com as cores que preferi e configurar o idioma para português, traduzindo tudo o que ficasse visível para o usuário.
Eu não quero que esse artigo fique obsoleto muito rapidamente, portanto não vou colocar um passo a passo aqui de tudo o que eu fiz, se tu tiver interessado recomendo clonar meu repo, alterar as configs e rodar localmente, prometo que é muito simples.
Link do Repositório: https://github.com/alissonrms/blog
Aqui vai algumas fotos de como fica o Keystatic e a criação de um novo post:
Por que Astro Paper?
O Astro é incrível porque entrega zero JavaScript por padrão. O template Astro Paper já vem com boas práticas de SEO, modo escuro/claro e uma estrutura limpa de arquivos.
O desafio do CMS: Keystatic
Eu não queria depender de um banco de dados externo ou de um CMS pesado como WordPress. O Keystatic foi a escolha perfeita porque ele é um “CMS baseado em Git”.
Basicamente, ele roda localmente (ou no navegador), me dá uma interface visual bonita para escrever, mas no final ele apenas cria arquivos Markdown no meu repositório.
O Pulo do Gato: Markdown vs MDX
Aqui foi onde quebrei a cabeça. O Astro Paper vem configurado nativamente para ler arquivos .md (Markdown simples). Porém, o Keystatic trabalha melhor com .mdx (Markdown + JSX), que permite componentes mais ricos.
Tive que fazer algumas adaptações:
- Instalar a integração
@astrojs/mdx. - Renomear os arquivos antigos de conteúdo.
- Ajustar o
keystatic.config.tspara entender que o título do post é a chave de tudo.
Conclusão
Agora o fluxo é simples: abro o painel do Keystatic (/keystatic) pelo próprio site, logo com meu github, escrevo o post ou edito o que quero editar, salvo e pronto, automaticamente o keystatic já dá um git push, a Vercel detecta a mudança e em menos de um minuto o site está atualizado.
Se eu quiser testar alguma coisa antes de ir para o site em produção, posso somente mudar para alguma branch separada no próprio painel do keystatic e abrir um pull request, desse modo a Vercel já cria um link para teste com meus updates e eu só preciso dar merge se tudo estiver ok.
Este é apenas o começo. Pretendo usar este espaço para compartilhar aprendizados sobre código, esportes e vida.
Se você curtiu essa stack, dá uma olhada no repositório do Astro Paper e tente subir o seu!