Saltearse al contenido
v5-beta

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.

Prerrequisitos

Sección titulada Prerrequisitos

Instalación de dependencias

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

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

Agregar la integración de Astro

Sección titulada Agregar la integración de 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.markdoc({
          label: 'Content',
        }),
      },
    }),
  },
});

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

Ejecutar Keystatic localmente

Sección titulada Ejecutar Keystatic localmente

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.

Crear una nueva entrada

Sección titulada Crear una nueva entrada

  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:

    • Directorysrc/
      • Directorycontent/
        • Directoryposts/
          • 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!

Renderizar contenido de Keystatic

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

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

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

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

Recursos oficiales

Sección titulada Recursos oficiales

Más guías de CMS

Contribuir

¿Qué tienes en mente?

Crear un problema en GitHub

La forma más rápida de alertar a nuestro equipo de un problema.

Comunidad