Guía de TinaCMS para miguelordonez.com

Este sitio ahora incluye TinaCMS como sistema de gestión de contenido, facilitando la edición de contenido desde cualquier navegador.

¿Qué es TinaCMS?

TinaCMS es un sistema de gestión de contenido (CMS) moderno que:

• Se integra directamente con Git
• Permite editar contenido desde cualquier navegador
• Guarda los cambios directamente en el repositorio
• Ofrece una interfaz intuitiva y moderna
• Funciona tanto en local como en producción

Acceso al CMS

En desarrollo local

Una vez iniciado el servidor de desarrollo con TinaCMS:

http://localhost:8080/admin/index.html

En producción

https://www.miguelordonez.com/admin/index.html

Configuración

Client ID

El proyecto está configurado con el siguiente Client ID de TinaCloud:

09643ce6-c39f-42db-bb1d-d844eeb6369e

Este Client ID está configurado en:

• El archivo tina/config.js (valor por defecto)
• Variable de entorno NEXT_PUBLIC_TINA_CLIENT_ID (en .env para desarrollo local)

Variables de Entorno

Para desarrollo local, crea un archivo .env en la raíz del proyecto con tus tokens reales:

NEXT_PUBLIC_TINA_CLIENT_ID=09643ce6-c39f-42db-bb1d-d844eeb6369e
TINA_TOKEN=your_read_only_token_here
TINA_SEARCH_TOKEN=your_search_token_here
TINA_PUBLIC_IS_LOCAL=true

Para producción (Vercel/Netlify), configura estas variables de entorno en tu plataforma de hosting:

• NEXT_PUBLIC_TINA_CLIENT_ID: Tu Client ID de TinaCloud
• TINA_TOKEN: Tu Read-only token de TinaCloud
• TINA_SEARCH_TOKEN: Tu Search token de TinaCloud

Importante: Los tokens son credenciales sensibles. Nunca los compartas públicamente ni los incluyas en el control de versiones.

Desarrollo Local

Iniciar el servidor con TinaCMS

Para desarrollar con TinaCMS localmente:

npm run dev:tina

Este comando:

1. Inicia el servidor de Eleventy en http://localhost:8080
2. Inicia el servidor de TinaCMS
3. El editor estará disponible en http://localhost:8080/admin/index.html

Solo Eleventy (sin TinaCMS)

Si solo quieres el sitio sin TinaCMS:

npm start

Build de Producción

Para generar el sitio con TinaCMS:

npm run build

Este comando construye el sitio con Eleventy. Los archivos se generarán en la carpeta _site/.

Build de TinaCMS Admin

Para construir la interfaz de administración de TinaCMS para producción:

npm run build:tina

Nota: Este comando requiere una conexión activa a TinaCloud y que el repositorio esté correctamente configurado. La interfaz de administración se generará en public/admin/.

Build Completo (Eleventy + TinaCMS)

Para generar ambos (sitio + admin):

npm run build:all

Despliegue en Producción

Variables de Entorno Requeridas

Configura estas variables en tu plataforma de hosting (Vercel/Netlify):

NEXT_PUBLIC_TINA_CLIENT_ID=tu_client_id_aqui
TINA_TOKEN=tu_read_only_token_aqui
TINA_SEARCH_TOKEN=tu_search_token_aqui

Nota: Reemplaza los valores con tus credenciales reales de TinaCloud.

Comando de Build

En la configuración de tu hosting, usa:

npm run build:all

O si prefieres solo construir el sitio (sin la interfaz admin de TinaCMS):

npm run build

La interfaz de TinaCMS funcionará en modo de desarrollo local incluso en producción, conectándose al servidor de TinaCloud.

Acceso en Producción

Una vez desplegado:

• Sitio web: https://www.miguelordonez.com/
• Editor TinaCMS: https://www.miguelordonez.com/admin/index.html

El editor requerirá autenticación a través de TinaCloud.

Colecciones Configuradas

Blog Posts

• Ruta: content/blog/
• Campos:
  • Título (requerido)
  • Fecha de Publicación (requerido)
  • Borrador (opcional)
  • Tags (lista)
  • Contenido (markdown/rich-text)

Tips

• Ruta: content/tips/
• Campos:
  • Título (requerido)
  • Fecha de Publicación (requerido)
  • Borrador (opcional)
  • Tags (lista)
  • Contenido (markdown/rich-text)

Nota sobre Páginas (about.md, cv.md)

Las páginas about.md y cv.md no están gestionadas por TinaCMS porque utilizan frontmatter en formato JavaScript (una característica específica de Eleventy) en lugar del formato YAML estándar. Estas páginas deben editarse directamente en el código o mediante Decap CMS que está configurado para gestionarlas.

Uso del Editor

Crear un nuevo post de blog

1. Accede a http://localhost:8080/admin/index.html (o la URL de producción)
2. Haz clic en "Blog Posts" en el menú lateral
3. Haz clic en "Create New Blog"
4. Rellena los campos:
   • Título: El título del post
   • Fecha de Publicación: Selecciona la fecha
   • Borrador: Marca si es un borrador (no se publicará en producción)
   • Tags: Añade tags (uno por línea o separados por comas)
   • Contenido: Escribe el contenido usando el editor rich-text
5. Haz clic en "Save" para guardar los cambios

Editar contenido existente

1. Accede al editor de TinaCMS
2. Selecciona la colección (Blog Posts, Tips, o Páginas)
3. Selecciona el contenido que quieres editar
4. Realiza los cambios
5. Haz clic en "Save" para guardar

Gestión de Imágenes

Ubicación de Imágenes

TinaCMS almacena las imágenes en public/img/ y genera rutas absolutas como /img/foto.jpg. Esto asegura que las imágenes funcionen correctamente tanto en el CMS como en el sitio web generado.

Nota sobre imágenes existentes:

• Las imágenes antiguas en content/img/ con rutas relativas (../img/foto.png) continúan funcionando
• Nuevas imágenes subidas vía TinaCMS se guardan en public/img/ con rutas absolutas (/img/foto.jpg)
• Ambos formatos son soportados por Eleventy

Subir Imágenes

1. En el editor de contenido, coloca el cursor donde quieres insertar la imagen
2. Haz clic en el botón de imagen en el editor rich-text
3. Sube la imagen o selecciona una existente
4. Las imágenes se guardarán automáticamente en public/img/
5. TinaCMS insertará la imagen con la ruta /img/nombre-archivo.jpg

Configuración de TinaCloud

Estado Actual

✅ Completado:

• TinaCMS está instalado y configurado
• El servidor de desarrollo funciona correctamente en local
• Las colecciones de Blog y Tips están configuradas
• Variables de entorno configuradas con Client ID

⚠️ Pendiente (requiere acceso a TinaCloud):

• Conectar el repositorio mordonez/miguelordonezv3 en TinaCloud
• Configurar los tokens con los permisos correctos
• Confirmar que la rama main está configurada correctamente en el proyecto

Configurar Tokens de TinaCloud

Para que el sitio funcione en producción, necesitas crear tokens en TinaCloud:

1. Read-only Token: Para lectura de contenido en producción
2. Search Token: Para funcionalidad de búsqueda

Cómo crear los tokens:

1. Ve a https://app.tina.io/projects/09643ce6-c39f-42db-bb1d-d844eeb6369e/tokens
2. Inicia sesión con tu cuenta de TinaCloud
3. Crea los tokens necesarios
4. Configúralos como variables de entorno en tu archivo .env (local) y en tu hosting (producción)

Seguridad: Los tokens son credenciales sensibles. Guárdalos en un lugar seguro y nunca los compartas públicamente.

Conectar el Repositorio

El proyecto está configurado con el Client ID: 09643ce6-c39f-42db-bb1d-d844eeb6369e

Para completar la integración:

1. Ve a https://app.tina.io/projects/09643ce6-c39f-42db-bb1d-d844eeb6369e
2. Inicia sesión con tu cuenta de TinaCloud
3. Asegúrate de que el repositorio mordonez/miguelordonezv3 esté conectado
4. Configura la rama principal como main
5. Verifica que los tokens tengan los permisos correctos para leer/escribir en el repositorio

Estructura de Archivos

.
├── tina/
│   ├── config.js          # Configuración de TinaCMS
│   ├── .gitignore         # Ignora archivos generados
│   └── __generated__/     # Archivos generados (no se incluyen en git)
├── public/
│   └── admin/             # Interfaz de administración de TinaCMS (generada)
├── .env                   # Variables de entorno (no se incluye en git)
└── content/               # Contenido del sitio
    ├── blog/              # Posts del blog
    ├── tips/              # Tips
    ├── about.md           # Página "Sobre mí"
    └── cv.md              # Página CV

Consejos y Buenas Prácticas

Formato de Fechas

• Las fechas deben estar en formato ISO: YYYY-MM-DD
• Ejemplo: 2025-11-26

Borradores

• Marca un post como "Borrador" si no quieres que se publique
• Los borradores solo se muestran en desarrollo local con npm start
• No se incluyen en la build de producción

Tags

• Usa minúsculas para los tags
• Separa palabras con guiones: ia-generativa, desarrollo-web
• Mantén consistencia con los tags existentes

Imágenes

• Las imágenes se guardan automáticamente en public/img/uploads/
• Usa formatos web optimizados: WebP, PNG, o JPEG
• Nombra las imágenes de forma descriptiva

Solución de Problemas

Error: "Failed to fetch"

• Verifica que el token TINA_TOKEN esté correctamente configurado
• Asegúrate de que el Client ID sea correcto
• Revisa que la rama configurada exista en el repositorio

El editor no carga

• Verifica que hayas ejecutado npm run dev:tina y no solo npm start
• Comprueba que la URL sea http://localhost:8080/admin/index.html
• Revisa la consola del navegador para errores

Los cambios no se guardan

• Verifica tu conexión a internet
• Asegúrate de tener permisos de escritura en el repositorio
• Revisa que TinaCloud tenga acceso al repositorio

Referencias

• Documentación oficial de TinaCMS
• TinaCMS con Eleventy
• TinaCloud Dashboard
• Proyecto en TinaCloud

Comparación con Decap CMS

Este sitio anteriormente usaba Decap CMS. TinaCMS ofrece:

✅ Ventajas:

• Interfaz más moderna y rápida
• Mejor experiencia de desarrollo
• Editor rich-text más potente
• Mejor integración con Git
• Actualización en tiempo real

⚖️ Consideraciones:

• Requiere configuración de TinaCloud
• Necesita token para producción
• Archivo de configuración más complejo

Ambos CMS pueden coexistir temporalmente durante la transición.