Astro + Keystatic Starter

Una plantilla inicial mínima que combina el rendimiento de Astro con el CMS basado en git de Keystatic. Perfecta para sitios con mucho contenido que necesitan velocidad y edición fácil.

Stack: Astro, Keystatic, Tailwind CSS, TypeScript
Ver código

Astro + Keystatic Starter

Una plantilla inicial que construí para crear rápidamente sitios orientados a contenido con un editor visual. Esta alimenta varios proyectos de clientes y mi propio portafolio.

Por Qué Este Stack

Después de probar varias opciones de CMS, elegí Keystatic porque:

  • Basado en Git: Sin base de datos, el contenido vive en el repositorio
  • Edición visual: Los clientes pueden editar sin tocar código
  • Local-first: Funciona sin conexión, sincroniza cuando está listo
  • Type-safe: Soporte completo de TypeScript con esquemas de contenido

Características

Colecciones de Contenido

Colecciones preconfiguradas para tipos comunes de contenido:

  • Posts de blog con soporte MDX
  • Páginas de proyecto/portafolio
  • Páginas simples (about, contacto)

Integración Tailwind

  • Soporte de modo oscuro incluido
  • Tokens de diseño personalizados
  • Utilidades responsivas

Experiencia de Desarrollador

  • Hot reload en desarrollo
  • Consultas de contenido type-safe
  • ESLint + Prettier configurados

Inicio Rápido

# Clonar el repo
git clone https://github.com/jaimesolis/astro-keystatic-starter

# Instalar dependencias
npm install

# Iniciar desarrollo
npm run dev

El panel de administración de Keystatic está disponible en /keystatic.

Estructura del Proyecto

├── src/
│   ├── content/
│   │   ├── blog/
│   │   └── pages/
│   ├── components/
│   ├── layouts/
│   └── pages/
├── keystatic.config.ts
└── astro.config.mjs

Personalización

Agregar una Nueva Colección

  1. Define el esquema en keystatic.config.ts
  2. Crea la carpeta de contenido en src/content/
  3. Agrega la ruta de página en src/pages/

Estilos

La plantilla usa Tailwind con colores personalizados:

// tailwind.config.js
colors: {
  brand: {
    green: '#14F195',
    purple: '#9945FF',
  }
}

Despliegue

Funciona con cualquier hosting estático:

  • Vercel (recomendado)
  • Netlify
  • Cloudflare Pages

Para las funciones de sincronización en la nube de Keystatic, necesitarás configurar GitHub OAuth.

Casos de Uso

He usado este starter para:

  • Sitios de portafolio (como este)
  • Sitios web de pequeñas empresas
  • Sitios de documentación
  • Blogs personales

Creado: Octubre 2025 Licencia: MIT Estado: Mantenido activamente