TinaCMS y Astro

TinaCMS es un sistema de gestión de contenidos (CMS) headless respaldado por Git.

Integración con Astro

Para comenzar, necesitarás un proyecto de Astro existente.

Ejecuta el siguiente comando para instalar Tina en tu proyecto de Astro.
- npm
- pnpm
- Yarn
Ventana de la terminal
npx @tinacms/cli@latest init
Ventana de la terminal
pnpm dlx @tinacms/cli@latest init
Ventana de la terminal
yarn dlx @tinacms/cli@latest init
- Cuando se te solicite un Cloud ID, presiona Enter para omitirlo. Podrás generar uno más tarde si deseas usar Tina Cloud.
- Cuando se te pregunte "¿Qué framework estás usando?" (What framework are you using), elige Other.
- Cuando se te pregunte dónde se almacenan los archivos estáticos públicos (public assets), presiona Enter.
Una vez que esto haya terminado, deberías tener una carpeta .tina en la raíz de tu proyecto y un archivo generado hello-world.md 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. Pruébalo ejecutando el script dev, luego navega 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 “date posted” (fecha de publicación) a nuestras publicaciones:

import { defineConfig } from "tinacms";

// Your hosting provider likely exposes this as an environment variable
const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

export default defineConfig({
  branch,
  clientId: null, // Get this from tina.io
  token: null, // Get this from tina.io
  build: {
    outputFolder: "admin",
    publicFolder: "public",
  },
  media: {
    tina: {
      mediaRoot: "images",
      publicFolder: "public",
    },
  },
  schema: {
    collections: [
      {
        name: "posts",
        label: "Posts",
        path: "src/content/posts",
        format: 'mdx',
        fields: [
          {
            type: "string",
            name: "title",
            label: "Title",
            isTitle: true,
            required: true,
          },
          {
            type: "datetime",
            name: "posted",
            label: "Date Posted",
            required: true,
          },
          {
            type: "rich-text",
            name: "body",
            label: "Body",
            isBody: true,
          },
        ],
      },
    ],
  },
});

Obtén más información sobre las colecciones de Tina en la documentación de Tina.

En producción, TinaCMS puede confirmar los cambios directamente en tu repositorio de GitHub. Para configurar TinaCMS para producción, puedes optar por usar Tina Cloud o autohospedar la capa de datos de Tina (Tina Data Layer). Puedes leer más sobre cómo registrarte en Tina Cloud en la documentación de Tina.