Keystatic y Astro

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

Si estás comenzando un nuevo proyecto Astro + Keystatic desde cero, puedes usar la CLI de Keystatic 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!

Prerrequisitos

Un proyecto existente de Astro con renderizado del lado del servidor (SSR) y output: 'hybrid' o output: 'server' configurado.

Instalación de dependencias

Agrega tanto la integración de Markdoc (para las entradas de contenido) como la de React (para el panel de control de la interfaz de usuario de Keystatic) a tu proyecto Astro, usando 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

Agregar la integración de Astro

Agrega la integración de Astro desde @keystatic/astro en el 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: 'hybrid',
})

Crear un archivo de configuración de Keystatic

Un archivo de configuración de Keystatic es necesario para definir el esquema de tu 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 agrega el siguiente código para definir tanto el tipo de almacenamiento (local) como una sola 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.document({
          label: 'Content',
          formatting: true,
          dividers: true,
          links: true,
          images: true,
        }),
      },
    }),
  },
});

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

Ejecutar Keystatic localmente

Para iniciar el panel de control de UI de administrador de Keystatic, inicia el servidor dev de Astro:

npm run dev

Visita http://127.0.0.1:4321/keystatic en el navegador para ver la UI de administrador de Keystatic corriendo.

Crear una nueva entrada

En el panel de control de administrador de Keystatic, haz clic en la colección “Posts”.
Usa el botón para crear una nueva entrada. Agrega el título “Mi primera entrada” y algo de contenido, luego guarda la entrada.
Este post debería ser visible desde tu colección “Posts”. Puedes ver y editar tus posts individuales desde esta página del panel de control.
Regresa para ver tus archivos del proyecto Astro. Ahora encontrarás un nuevo archivo .mdoc dentro del directorio src/content/posts para esta nueva entrada:
- Directorysrc/
  - Directorycontent/
    Directoryposts/
    my-first-post.mdoc

Navega a ese archivo en tu editor de código y verifica que puedes ver el contenido Markdown que ingresaste. Por ejemplo:

---
title: Mi Primera Entrada
title: Mi primer artículo
---

Este es mi primer artículo. ¡Estoy **súper** emocionado!

Renderizar contenido de Keystatic

Usa la API de Colecciones de Contenido de Astro para consultar y mostrar tus posts y colecciones, tal como lo harías en cualquier proyecto de Astro.

Mostrar una lista de colecciones

El siguiente ejemplo muestra una lista de cada título de post, con un enlace a una página de post individual.

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

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

Mostrar una entrada individual

Para mostrar contenido de una entrada 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 mayor información sobre consultas, filtrado, visualización de tu contenido de colecciones y más, consulta la documentación completa de colecciones de contenido.

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.

También probablemente querrás conectar Keystatic a GitHub para que puedas gestionar el contenido en la instancia desplegada del proyecto.