Tina CMS & Astro

Tina CMS es un sistema de gestión de contenido sin servidor respaldado por Git.

Integración con Astro

Para empezar, 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
pnpx @tinacms/cli@latest init
Terminal window
yarn dlx @tinacms/cli@latest init
- Cuando se te pregunte ingresar un Cloud ID, presione Enter para omitir. Generará uno más tarde si desea usar Tina Cloud.
- Cuando se te pregunte “¿Qué framework estás usando?”, escoge Otro.
- Cuando se te pregunte donde se almacenan los archivos del directorio public, presione Enter.
Depués de haber terminado lo anterior, deberías tener una carpeta .tina en la raíz de tu proyecto y un archivo hello-world.md generado en content/posts/hello-world.md.

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\""
    }
}

Ahora TinaCMS está configurado en modo local. Prueba esto ejecutando el script dev, luego navega a /admin/index.html#/collections/post.

Editando el archivo “Hello, World!” actualizará el archivo content/posts/hello-world.md en el directorio de tu proyecto.

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

Por ejemplo, puedes agregar una propiedad frontmatter requerida “date posted”(fecha de publicación) a nuestros posts:

import { defineConfig } from "tinacms";

// Tu proveedor de hosting probablemente exponga 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: "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,
          },
        ],
      },
    ],
  },
});

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

En producción, TinaCMS puede hacer commit de los cambios directamente a tu repositorio de GitHub. Para configurar TinaCMS para producción, puedes elegir usar Tina Cloud o auto-hospedar la Tina Data Layer. Puedes leer más sobre el registro para Tina Cloud en la documentación de Tina.