TinaCMS y Astro

TinaCMS es un sistema de gestión de contenidos headless basado en Git.

Integración con Astro

Para comenzar, necesitarás un proyecto Astro existente.

Ejecuta el siguiente comando para instalar Tina en tu proyecto Astro.
- npm
- pnpm
- Yarn
Terminal window
npx @tinacms/cli@latest init
Terminal window
pnpm dlx @tinacms/cli@latest init
Terminal window
yarn dlx @tinacms/cli@latest init
- Cuando se te pida un Cloud ID, presiona Enter para omitirlo. Generarás uno más tarde si deseas usar Tina Cloud.
- Cuando se te pregunte “¿Qué framework estás usando?”, elige Other.
- Cuando se te pregunte dónde se almacenan los assets públicos, presiona Enter.
Una vez que esto haya finalizado, ahora deberías tener una carpeta .tina en la raíz de tu proyecto y un archivo hello-world.md generado en content/posts.

Cambia el script dev en package.json:

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

TinaCMS ahora está configurado en modo local. Prueba esto ejecutando el script dev y luego navegando a /admin/index.html#/collections/post.

Editar la publicación “Hello, World!” actualizará el archivo content/posts/hello-world.md en el directorio de tu proyecto.

Configura tus colecciones de Tina editando la propiedad schema.collections en .tina/config.ts.

Por ejemplo, puedes agregar una propiedad obligatoria de frontmatter de “fecha de publicación” a tus publicaciones:

import { defineConfig } from "tinacms";

// Tu proveedor de hosting probablemente expone esto como una variable de entorno
const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

export default defineConfig({
  branch,
  clientId: null, // Obtén esto de tina.io
  token: null, // Obtén esto de tina.io
  build: {
    outputFolder: "admin",
    publicFolder: "public",
  },
  media: {
    tina: {
      mediaRoot: "images",
      publicFolder: "public",
    },
  },
  schema: {
    collections: [
      {
        name: "posts",
        label: "Publicaciones",
        path: "src/content/posts",
        format: 'mdx',
        fields: [
          {
            type: "string",
            name: "title",
            label: "Título",
            isTitle: true,
            required: true,
          },
          {
            type: "datetime",
            name: "posted",
            label: "Fecha de publicación",
            required: true,
          },
          {
            type: "rich-text",
            name: "body",
            label: "Contenido",
            isBody: true,
          },
        ],
      },
    ],
  },
});

Aprende más sobre las colecciones de Tina en la documentación de Tina.

En producción, TinaCMS puede hacer commits de los cambios directamente en tu repositorio de GitHub. Para configurar TinaCMS para producción, puedes elegir usar Tina Cloud o autoalojar el Tina Data Layer. Puedes leer más sobre cómo registrarte en Tina Cloud en la documentación de Tina.