Payload CMS y Astro

PayloadCMS es un sistema de gestión de contenido headless de código abierto que se puede utilizar para proporcionar contenido para tu proyecto Astro.

Integración con Astro

Sección titulada Integración con Astro

Prerequisitos

Sección titulada Prerequisitos

1. Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra guía de instalación te pondrá en marcha en poco tiempo.
2. Una base de datos de MongoDB - PayloadCMS te pedirá una cadena de conexión de MongoDB al crear un nuevo proyecto. Puede configurar uno localmente o usar MongoDBAtlas para alojar una base de datos en la web de forma gratuita.
3. Una API REST de PayloadCMS - Crea un proyecto de PayloadCMS y conéctalo a tu base de datos MongoDB durante la configuración.

Escogiendo una plantilla

Durante la instalación de PayloadCMS, se te preguntará si deseas utilizar una plantilla.

Escoger cualquiera de las plantillas disponibles en este paso (como ‘blog’) genera automáticamente colecciones adicionales para que las utilices. De lo contrario, deberás crear manualmente tus colecciones de PayloadCMS.

Configurando Astro para tu colección de PayloadCMS

Sección titulada Configurando Astro para tu colección de PayloadCMS

Tu proyecto de plantilla Payload contendrá un archivo llamado Posts.ts en src/collections/. Si no escogiste una plantilla durante la instalación que creara una colección de contenido para ti, puedes crear una nueva colección de PayloadCMS agregando este archivo de configuración manualmente. El siguiente ejemplo muestra este archivo para una colección llamada posts que requiere los campos title, content y slug:

src/collections/Posts.ts

import { CollectionConfig } from "payload/types";

const Posts: CollectionConfig = {
  slug: "posts",
  admin: {
    useAsTitle: "title",
  },
  access: {
    read: () => true,
  },

  fields: [
    {
      name: "title",
      type: "text",
      required: true,
    },
    {
      name: "content",
      type: "text",
      required: true,
    },
    {
      name: "slug",
      type: "text",
      required: true,
    },
  ],
};

export default Posts;

1. Importa y agrega tanto Users (disponible en todos los proyectos de PayloadCMS) como cualquier otra colección (por ejemplo, Posts) a las colecciones disponibles en el archivo payload.config.ts.

   src/payload.config.ts

   import { buildConfig } from "payload/config";
   import path from "path";
   import Users from "./collections/Users";
   import Posts from "./collections/Posts";
   export default buildConfig({
     serverURL: "http://localhost:4321",
     admin: {
       user: Users.slug,
     },
     collections: [Users, Posts],
     typescript: {
       outputFile: path.resolve(__dirname, "payload-types.ts"),
     },
     graphQL: {
       schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
     },
   });

   Esto hará que aparezca una nueva colección llamada “Posts” en tu panel de control de PayloadCMS junto a la colección “Users”.

2. Ingresa a la colección “Posts” y crea una nueva publicación. Después de guardarla, notarás que la URL de la API aparece en la esquina inferior derecha.

3. Con el servidor de desarrollo en ejecución, abre http://localhost:4321/api/posts en tu navegador. Deberías ver un archivo JSON que contiene la publicación que has creado como un objeto.

   {
     "docs":[
         {
           "id":"64098b16483b0f06a7e20ed4",
           "title":"Astro & PayloadCMS Title 🚀",
           "content":"Astro & PayloadCMS Content",
           "slug":"astro-payloadcms-slug",
           "createdAt":"2023-03-09T07:30:30.837Z",
           "updatedAt":"2023-03-09T07:30:30.837Z"
         }
     ],
     "totalDocs":1,
     "limit":10,
     "totalPages":1,
     "page":1,
     "pagingCounter":1,
     "hasPrevPage":false,
     "hasNextPage":false,
     "prevPage":null,
     "nextPage":null
   }

Consejo

Por defecto, tanto Astro como PayloadCMS utilizarán el puerto 4321. Es posible que desees cambiar el puerto de PayloadCMS en el archivo src/server.ts. No olvides actualizar el serverURL en src/payload.config.ts también.

Obteniendo los datos

Sección titulada Obteniendo los datos

Obtén los datos de PayloadCMS a través de la URL única de la API REST de tu sitio y la ruta de tu contenido. (Por defecto, PayloadCMS montará todas las rutas a través de /api.) Luego, puedes renderizar las propiedades de tus datos utilizando la directiva set:html="" de Astro.

Juntos con tu publicación, PayloadCMS devolverá algunos metadatos de nivel superior. Los documentos reales están anidados dentro del arreglo docs.

Por ejemplo, para mostrar una lista de títulos de publicaciones y su contenido:

src/pages/index.astro

---
import HomeLayout from "../layouts/HomeLayout.astro";

const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts by default
const posts = await res.json()
---

<HomeLayout title='Astro Blog'>
  {
    posts.docs.map((post) => (
        <h2 set:html={post.title} />
        <p set:html={post.content} />
    ))
  }
</HomeLayout>

Construyendo un blog con PayloadCMS y Astro

Sección titulada Construyendo un blog con PayloadCMS y Astro

Crea una página índice de blog src/pages/index.astro para listar cada una de tus publicaciones con un enlace a su propia página.

La búsqueda a través de la API devuelve un arreglo de objetos (publicaciones) que incluyen, entre otros, las siguientes propiedades:

• title
• content
• slug

src/pages/index.astro

---
import HomeLayout from "../layouts/HomeLayout.astro";

const res = await fetch("http://localhost:5000/api/posts") // http://localhost:4321/api/posts by default
const posts = await res.json()
---

<HomeLayout title='Astro Blog'>
  <h1>Astro + PayloadCMS 🚀</h1>
  <h2>Blog posts list:</h2>
  <ul>
    {
      posts.docs.map((post) =>(
        <li>
          <a href={`posts/${post.slug}`} set:html={post.title} />
        </li>
      ))
    }
  </ul>
</HomeLayout>

Usando la API de PayloadCMS para generar páginas

Sección titulada Usando la API de PayloadCMS para generar páginas

Crea una página src/pages/posts/[slug].astro para generar dinámicamente una página para cada publicación.

src/pages/posts/[slug].astro

---
import PostLayout from "../../layouts/PostLayout.astro"

const {title, content} = Astro.props

// La función getStaticPaths() es necesaria para sitios estáticos de Astro.
// Si estás usando SSR, no necesitarás esta función.
export async function getStaticPaths() {
    let data = await fetch("http://localhost:5000/api/posts")
    let posts = await data.json()

    return posts.docs.map((post) => {
        return {
            params: {slug: post.slug},
            props: {title: post.title, content: post.content},
        };
    });
}
---
<PostLayout title={title}>
    <article>
        <h1 set:html={title} />
        <p set:html={content} />
    </article>
</PostLayout>

Publicando tu sitio

Sección titulada Publicando tu sitio

Para desplegar tu sitio visita nuestra guía de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.

Recursos de la comunidad

Sección titulada Recursos de la comunidad

• Prueba esta Plantilla de Payload CMS y Astro.
• Echa un vistazo a Astroad para un fácil desarrollo y despliegue en VPS con Docker.

Más guías de CMS

• 

  Apostrophe

• 

  Builder.io

• 

  ButterCMS

• 

  Caisy

• 

  CloudCannon

• 

  Contentful

• 

  Cosmic

• 

  Craft CMS

• 

  Crystallize

• 

  DatoCMS

• 

  Decap CMS

• 

  Directus

• 

  Drupal

• 

  Flotiq

• 

  Front Matter CMS

• 

  Ghost

• 

  Hashnode

• 

  Hygraph

• 

  Keystatic

• 

  KeystoneJS

• 

  Kontent.ai

• 

  microCMS

• 

  Payload CMS

• 

  Prepr CMS

• 

  Prismic

• 

  Sanity

• 

  Sitecore XM

• 

  Spinal

• 

  Statamic

• 

  Storyblok

• 

  Strapi

• 

  Tina CMS

• 

  Umbraco

• 

  WordPress