Keystatic y Astro

Keystatic es un sistema de gestión de contenidos (CMS) headless de código abierto que te permite estructurar tu contenido y sincronizarlo con GitHub.

Si estás comenzando un nuevo proyecto de Astro + Keystatic desde cero, puedes usar la Keystatic CLI para generar un nuevo proyecto en segundos:

npm create @keystatic@latest

pnpm create @keystatic@latest

yarn create @keystatic

¡Selecciona la plantilla de Astro y estarás listo para desplegar!

Requisitos previos

Un proyecto de Astro existente con un adaptador configurado.

Instalación de dependencias

Añade las integraciones de Markdoc (para las entradas de contenido) y React (para el panel de control de la UI de administración de Keystatic) a tu proyecto de Astro, utilizando el comando astro add para tu gestor de paquetes.

npx astro add react markdoc

pnpm astro add react markdoc

yarn astro add react markdoc

También necesitarás dos paquetes de Keystatic:

npm install @keystatic/core @keystatic/astro

pnpm add @keystatic/core @keystatic/astro

yarn add @keystatic/core @keystatic/astro

Adición de la integración de Astro

Añade la integración de Astro desde @keystatic/astro en tu archivo de configuración de Astro:

import { defineConfig } from 'astro/config'

import react from '@astrojs/react'
import markdoc from '@astrojs/markdoc'
import keystatic from '@keystatic/astro'

// https://astro.build/config
export default defineConfig({
  integrations: [react(), markdoc(), keystatic()],
  output: 'static',
})

Creación de un archivo de configuración de Keystatic

Se requiere un archivo de configuración de Keystatic para definir tu esquema de contenido. Este archivo también te permitirá conectar un proyecto a un repositorio específico de GitHub (si decides hacerlo).

Crea un archivo llamado keystatic.config.ts en la raíz del proyecto y añade el siguiente código para definir tanto tu tipo de almacenamiento (local) como una única colección de contenido (posts):

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

export default config({
  storage: {
    kind: 'local',
  },

  collections: {
    posts: collection({
      label: 'Posts',
      slugField: 'title',
      path: 'src/content/posts/*',
      format: { contentField: 'content' },
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.markdoc({
          label: 'Content',
        }),
      },
    }),
  },
});

Keystatic ahora está configurado para gestionar tu contenido basado en tu esquema.

Ejecución de Keystatic localmente

Para iniciar tu panel de control de la UI de administración de Keystatic, inicia el servidor de desarrollo de Astro:

npm run dev

Visita http://127.0.0.1:4321/keystatic en el navegador para ver la UI de administración de Keystatic ejecutándose.

Creación de una nueva publicación

En el panel de control de la UI de administración de Keystatic, haz clic en la colección “Posts”.
Usa el botón para crear una nueva publicación. Añade el título “My First Post” y algo de contenido, luego guarda la publicación.
Esta publicación ahora debería ser visible desde tu colección “Posts”. Puedes ver y editar tus publicaciones individuales desde esta página del panel de control.
Regresa a ver los archivos de tu proyecto de Astro. Ahora encontrarás un nuevo archivo .mdoc dentro del directorio src/content/posts para esta nueva publicación:
- Directoriosrc/
  - Directoriocontent/
    Directorioposts/
    my-first-post.mdoc
Navega a ese archivo en tu editor de código y verifica que puedes ver el contenido de Markdown que ingresaste. Por ejemplo:
```
---
title: My First Post
---

This is my very first post. I am **super** excited!
```

Renderizado del contenido de Keystatic

Consulta y muestra tus publicaciones y colecciones, tal como lo harías en cualquier proyecto de Astro.

Mostrar una lista de colección

El siguiente ejemplo muestra una lista de los títulos de cada publicación, con un enlace a una página de publicación individual.

---
import { getCollection } from 'astro:content'

const posts = await getCollection('posts')
---
<ul>
  {posts.map(post => (
    <li>
      <a href={`/posts/${post.id}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

Mostrar una sola entrada

Para mostrar el contenido de una publicación individual, puedes importar y usar el componente <Content /> para renderizar tu contenido a HTML:

---
import { getEntry } from 'astro:content'

const post = await getEntry('posts', 'my-first-post')
const { Content } = await post.render()
---

<main>
  <h1>{post.data.title}</h1>
  <Content />
</main>

Para obtener más información sobre consultas, filtrado, visualización del contenido de tus colecciones y más, consulta la documentación de colecciones de contenido completa.

Despliegue de Keystatic + Astro

Para desplegar tu sitio web, visita nuestras guías de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.

Probablemente también querrás conectar Keystatic a GitHub para poder gestionar el contenido en la instancia desplegada del proyecto.

Recursos oficiales

Consulta la guía oficial de Keystatic
Plantilla de inicio de Keystatic

Más guías de CMS

Socios de CMS destacados

CloudCannon

CMS basado en Git creado para mayor velocidad, seguridad y cero dolores de cabeza.

Todas las guías de CMS

Contribuir Comunidad Patrocinar