Saltearse al contenido

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.

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.

Ventana de terminal
npx astro add react markdoc

También necesitarás dos paquetes de Keystatic:

Ventana de terminal
npm install @keystatic/core @keystatic/astro

Agrega la integración de Astro desde @keystatic/astro en el archivo de configuración de Astro:

astro.config.mjs
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

Sección titulada 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):

keystatic.config.ts
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.

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

Ventana de terminal
npm run dev

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

  1. En el panel de control de administrador de Keystatic, haz clic en la colección “Posts”.

  2. Usa el botón para crear una nueva entrada. Agrega el título “Mi primera entrada” y algo de contenido, luego guarda la entrada.

  3. 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.

  4. 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:

    • Directoriosrc/
      • Directoriocontent/
        • Directorioposts/
          • my-first-post.mdoc
  5. 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!

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.

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>

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.

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.

Más guías de CMS