Decap CMS & Astro

Decap CMS (anteriormente Netlify CMS) es un sistema de gestión de contenidos de código abierto basado en Git.

Decap te permite aprovechar al máximo todas las funciones de Astro, incluyendo la optimización de imágenes y las colecciones de contenido.

Decap añade una ruta (normalmente /admin) a tu proyecto que cargará una aplicación de React para permitir a los usuarios autorizados gestionar el contenido directamente desde el sitio web desplegado. Decap enviará los cambios directamente al repositorio de código fuente de tu proyecto de Astro.

Instalar DecapCMS

Hay dos opciones para añadir Decap a Astro:

Instala Decap a través de un gestor de paquetes con el siguiente comando:
- npm
- pnpm
- Yarn
Ventana de la terminal
npm install decap-cms-app
Ventana de la terminal
pnpm add decap-cms-app
Ventana de la terminal
yarn add decap-cms-app

Importa el paquete en una etiqueta <script> en el <body> de tu página.

<body>
  <!-- Include the script that builds the page and powers Decap CMS -->
  <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
</body>

Configuración

Crea una carpeta de administración estática en public/admin/.
Añade config.yml en public/admin/:
- Directoriopublic
  - Directorioadmin
    config.yml

Para añadir soporte para colecciones de contenido, configura cada esquema en config.yml. El siguiente ejemplo configura una colección de blog, definiendo una etiqueta (label) para la propiedad de frontmatter de cada entrada:

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "src/content/blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields for each document, usually in frontmatter
      - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Featured Image", name: "thumbnail", widget: "image" }
      - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" }
      - { label: "Body", name: "body", widget: "markdown" }

Añade la ruta admin para tu aplicación de React en src/pages/admin.html.

Directoriopublic
- Directorioadmin
  - config.yml
Directoriosrc
- Directoriopages
  - admin.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <link href="config.yml" type="text/yaml" rel="cms-config-url" />
    <title>Content Manager</title>
  </head>
  <body>
    <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
  </body>
</html>

Para permitir la subida de archivos multimedia a una carpeta específica a través del editor de Decap, añade una ruta adecuada:

media_folder: "src/assets/images" # Location where files will be stored in the repo
public_folder: "src/assets/images" # The src attribute for uploaded media

Consulta la documentación de configuración de Decap CMS para obtener instrucciones y opciones completas.

Uso

Navega a tusitio.com/admin/ para usar el editor de Decap CMS.

Autenticación

Decap CMS con Netlify Identity

Decap CMS fue desarrollado originalmente por Netlify y cuenta con soporte de primer nivel para Netlify Identity.

Al desplegar en Netlify, configura Identity para tu proyecto a través del panel de control de Netlify e incluye el Netlify Identity Widget en la ruta admin de tu proyecto. Opcionalmente, incluye el Identity Widget en la página de inicio de tu sitio si planeas invitar a nuevos usuarios por correo electrónico.