Como Criar um Blog Dev de Alta Performance com Astro, Keystatic e GitHub Actions

No cenário atual do desenvolvimento web, construir um blog ou portal de tecnologia exige muito mais do que apenas publicar textos. Desenvolvedores e leitores técnicos esperam velocidade instantânea de carregamento, notas perfeitas no Google Lighthouse (Core Web Vitals), SEO impecável e uma experiência de escrita fluida sem a complexidade pesada de bancos de dados relacionais ou CMSs tradicionais como o WordPress.

Neste artigo autoral, compartilho em detalhes a arquitetura técnica que utilizei para projetar e implementar o snagh1, utilizando o framework Astro, o CMS git-based Keystatic, integração com TypeScript e pipelines automatizadas no GitHub Actions.

Por que Abandonamos o Modelo Tradicional de CMS?

Durante anos, o mercado de publicação web foi dominado por plataformas monolíticas baseadas em servidor (SSR) e bancos de dados SQL. Embora funcionais, essas arquiteturas apresentam gargalos conhecidos:

Latência de Banco de Dados: Cada requisição exige uma consulta ao banco de dados para montar o HTML da página, aumentando o Time to First Byte (TTFB).
Superfície de Ataque Elevada: Vulnerabilidades em plugins, injeções de SQL e ataques de força bruta no painel de administração exigem manutenção constante e patches de segurança.
Custo de Hospedagem: Manter servidores ativos 24/7 com suporte a PHP/Node dinâmico e banco de dados custa consideravelmente mais do que servir arquivos estáticos distribuídos em uma CDN global.

A solução moderna para portais de conteúdo é a adoção da Arquitetura Jamstack desacoplada, utilizando geração de sites estáticos (SSG) e gerenciamento de conteúdo baseado em arquivos Markdown/MDX dentro do próprio repositório Git.

A Escolha da Stack Técnica: Astro + Keystatic

Para alcançar máxima performance e facilidade de manutenção, selecionamos duas ferramentas de ponta no ecossistema JavaScript:

1. Astro Framework (Zero JS por Padrão)

O Astro utiliza o conceito de Island Architecture (Arquitetura de Ilhas). Por padrão, ele compila o código para HTML e CSS puros, enviando zero JavaScript para o navegador do leitor. Componentes interativos (como a busca dinâmica ou o menu mobile) são isolados e hidratados sob demanda apenas onde necessário.

2. Keystatic CMS (Git-Based Headless CMS)

Desenvolvido pela equipe da Thinkmill, o Keystatic é um CMS sem servidor que roda diretamente na aplicação. Em vez de salvar dados em um banco externo, ele lê e escreve arquivos .mdx estruturados com Frontmatter YAML diretamente no repositório GitHub.

Estrutura do Projeto e Configuração do Keystatic

Abaixo está o exemplo real da configuração do nosso arquivo keystatic.config.ts, onde definimos a coleção do blog com validações estritas de schema:

import { config, fields, collection } from '@keystatic/core';

export default config({
  storage: process.env.NODE_ENV === 'production'
    ? { kind: 'github', repo: 'snagh/snagh1-blog' }
    : { kind: 'local' },

  collections: {
    blog: collection({
      label: 'Blog',
      slugField: 'title',
      path: 'src/content/blog/*',
      format: { contentField: 'content' },
      entryLayout: 'content',
      columns: ['title', 'draft', 'category', 'pubDate'],
      schema: {
        title: fields.slug({ name: { label: 'Título do Artigo' } }),
        description: fields.text({ label: 'Descrição SEO', multiline: true }),
        pubDate: fields.date({ label: 'Data de Publicação' }),
        category: fields.select({
          label: 'Categoria',
          options: [
            { label: 'Desenvolvimento', value: 'Desenvolvimento' },
            { label: 'Hardware & Gadgets', value: 'Hardware/Gadgets' },
            { label: 'Reviews de Produtos', value: 'Reviews/Produtos' },
            { label: 'Tutoriais', value: 'Tutoriais' },
            { label: 'Games', value: 'Games' },
          ],
          defaultValue: 'Desenvolvimento',
        }),
        draft: fields.checkbox({ label: 'Rascunho', defaultValue: false }),
        heroImage: fields.image({
          label: 'Imagem de Capa',
          directory: 'src/assets/images/posts',
          publicPath: '../../assets/images/posts/',
        }),
        content: fields.mdx({
          label: 'Conteúdo MDX do Artigo',
          options: { formatting: true, links: true, images: true },
        }),
      },
    }),
  },
});

Automação e Pipeline CI/CD no GitHub Actions

Um dos maiores diferenciais dessa arquitetura é a automação da esteira de publicação. Utilizamos o GitHub Actions para executar rotinas agendadas via cron, verificando novas matérias, validando schemas e disparando builds de produção na Vercel.

Confira a estrutura simplificada do nosso workflow em .github/workflows/auto-news.yml:

name: 🤖 Pipeline Autônoma de Conteúdo

on:
  schedule:
    - cron: '0 10 * * *' # Executa diariamente às 10:00 UTC
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 📥 Checkout do Repositório
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: ⚙️ Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'

      - name: 📦 Instalação e Build Estático
        run: |
          npm install
          npm run build

      - name: 📝 Sincronização Git com Rebase
        run: |
          git config --global user.name "snagh1-bot"
          git config --global user.email "bot@snagh1.com.br"
          git pull --rebase origin main
          git push origin main

Análise de Performance e Resultados Práticos

Após implementar essa arquitetura no snagh1, alcançamos os seguintes resultados nos testes de benchmark e auditoria de campo:

Google Lighthouse: 100/100 nas métricas de Performance, Acessibilidade, Boas Práticas e SEO.
First Contentful Paint (FCP): 0.4 segundos em conexões 4G móveis.
Cumulative Layout Shift (CLS): 0.00 (Zero oscilação de layout).
Custo Operacional: R$ 0,00/mês, rodando em infraestrutura serverless global da Vercel integrada com repositório no GitHub.

Dica do Desenvolvedor

Se você está planejando criar um portal técnico ou blog de desenvolvimento em 2026, evite complicar a arquitetura desnecessariamente. A combinação de Astro + Content Collections com TypeScript + Keystatic oferece o melhor equilíbrio entre produtividade na escrita, segurança contra invasões e velocidade imbatível de carregamento para o usuário final.