Tina CMS: Integración Rápida y Uso Sencillo
En 2024, si estás considerando crear un blog, existen varios frameworks y herramientas que te permiten hacerlo, siendo mis favoritos Astro y Next.js. En ambos casos, hay diversas plantillas gratuitas disponibles que puedes utilizar para ahorrar tiempo. Para una creación y componentización sencillas, es muy común desarrollar todo el contenido del blog utilizando archivos .md o .mdx.
Una vez que hayas completado los pasos mencionados anteriormente, podrías preguntarte si podrías integrar un CMS de manera fácil y eficiente. En este caso, te propongo que utilices Tina.
¿Qué es TinaCMS?
TinaCMS es un Sistema de Gestión de Contenidos (CMS) de código abierto que se integra perfectamente con tu flujo de trabajo de Markdown.
El Frontend del CMS
- TinaCMS proporciona una interfaz de CMS intuitiva para tus editores. Para sitios que utilizan React, TinaCMS admite la "Edición Visual" para permitir que los editores de contenido vean los cambios en tiempo real.
En su mayor parte, TinaCMS es agnóstico al framework. A menos que estés utilizando la "edición visual", la configuración es mayormente la misma independientemente del framework del sitio.
También contamos con algunas guías adaptadas para algunos frameworks populares:
Para inicializar TinaCMS, ejecuta el siguiente comando:
npx @tinacms/cli@latest init
Esto te mostrará algunas preguntas de configuración. Cuando se te solicite el "directorio de activos públicos" (public assets directory), consulta nuestra lista de frameworks para obtener ayuda.
Actualización de tus Scripts de Construcción
Dependiendo de tu framework,tina init puede intentar actualizar tus scripts de package.json:
"scripts": {
"dev": "tinacms dev -c \"next dev\"",
"build": "tinacms build && next build",
"start": "tinacms build && next start"
}
Reemplaza <your-dev-process> con el comando de desarrollo personalizado de tu sitio.
Con TinaCMS en ejecución, navega a http://localhost:3000/admin/index.html.
Modelado de Contenido con TinaCMS
El esquema de Tina define la forma de tu contenido. Tina utiliza un enfoque de "modelado de contenido como código", que ofrece varios beneficios en comparación con el modelado a través de una interfaz de usuario:
- El esquema tiene control de versiones.
- Mutar el esquema es fácil, ya que puedes probar los cambios localmente o en una rama.
- Los desarrolladores pueden extender el esquema de formas interesantes (validación personalizada, campos de interfaz de usuario personalizados, etc.).
El modelo de contenido y todo el código de configuración se definen en un archivo llamado tina/config.ts,js,tsx:
// tina/config.{ts,js,tsx}
import {defineConfig} from "tinacms";
export default defineConfig({
// ...
schema: {
collections: [
{
label: "Blog Posts",
name: "post",
path: "content/posts",
fields: [
{
type: "string",
label: "Title",
name: "title",
},
{
type: "string",
label: "Post Body",
name: "body",
isBody: true,
},
],
},
],
},
});
Definición de "Colecciones"
Cada elemento en tu array de colecciones representa su propia entidad. En el ejemplo anterior, definimos una colección post y establecimos su ruta como content/posts, que se mapea a un directorio en el repositorio de nuestro sitio. Cada colección contiene un array de campos, cada uno con un tipo definido.
