Sitios editables
Un editor de contenido sin CMS: un esquema JSON dibuja el formulario, y publicar rearma la página estática y la commitea en git. Tres sitios de clientes corren con esto.
Dos coaches y una ingeniera en alimentos necesitaban landings que pudieran cambiar solas: textos, fotos, botones, colores, qué secciones se ven. Un CMS hosteado era una cuenta mensual, un login más y una página que pide su contenido en cada visita. Darles el HTML era romper el maquetado la primera vez que alguien pegara una cita.
Tres decisiones que lo definieron.
- 01
Git es la base de datos
Por qué. contenido.json en el repo es la fuente de verdad. Publicar lo manda a una sola función de Vercel que sube el JSON, el index.html rearmado y las fotos nuevas como blobs, arma un árbol y un commit con la Git Data API de GitHub y mueve la rama. Un commit es un solo redeploy. Deshacer es un commit nuevo con el árbol del anterior, y sólo corre si el último commit vino del editor, así nunca revierte un cambio de código.
El costo. Cada publicación espera un deploy, más o menos un minuto. El editor manda el archivo de contenido entero, así que dos pestañas abiertas se pisan. Las fotos quedan en el historial de git, por eso el editor las achica a 1600 px en el navegador antes de subirlas.
- 02
Armar al publicar, servir HTML estático
Por qué. render(plantilla, contenido) es texto entra, texto sale, así la misma función corre con node construir.mjs en local y dentro de la función que publica. Quien entra baja un HTML del CDN y nunca llama a la función. Las clientas escriben texto plano con tres marcas (*cursiva dorada*, **negrita**, Enter); todo lo demás se escapa, y un campo vacío se lleva el bloque que lo envuelve, así borrar el texto de un botón saca el botón.
El costo. Nada de la página es dinámico. Los formularios abren WhatsApp o el mail con un mensaje armado en vez de mandar a un servidor, y la vista previa necesita ir y volver de la función.
- 03
Copiar el motor en cada sitio, no empaquetarlo
Por qué. Cada sitio tiene su repo, su proyecto en Vercel, su contraseña y un token de GitHub con permiso sólo sobre ese repo. Alimentación Integral Hoy tuvo el editor primero, después Natalia y después Lole. Copiar los archivos dejó que cada sitio sumara lo suyo: Alimentación tiene listas de videos y de fotos, Lole un tipo de lista genérico, orden de secciones y una paleta que deriva once colores de seis.
El costo. Las tres copias se separaron. El editor de Natalia no tiene buscador ni orden de secciones, y el detector de campos vacíos sólo está en dos repos. Un arreglo viaja a mano.
Sitios editables
Un editor de contenido sin CMS: un esquema JSON dibuja el formulario, y publicar rearma la página estática y la commitea en git. Tres sitios de clientes corren con esto.
- Rol
- Arquitectura y desarrollo completo
- Stack
- HTML, Vanilla JS, Node.js, Vercel Functions, GitHub Git Data API
Dos coaches y una ingeniera en alimentos necesitaban landings que pudieran cambiar solas: textos, fotos, botones, colores, qué secciones se ven. Un CMS hosteado era una cuenta mensual, un login más y una página que pide su contenido en cada visita. Darles el HTML era romper el maquetado la primera vez que alguien pegara una cita.
Tres decisiones que lo definieron.
Git es la base de datos
Por qué. contenido.json en el repo es la fuente de verdad. Publicar lo manda a una sola función de Vercel que sube el JSON, el index.html rearmado y las fotos nuevas como blobs, arma un árbol y un commit con la Git Data API de GitHub y mueve la rama. Un commit es un solo redeploy. Deshacer es un commit nuevo con el árbol del anterior, y sólo corre si el último commit vino del editor, así nunca revierte un cambio de código.
El costo. Cada publicación espera un deploy, más o menos un minuto. El editor manda el archivo de contenido entero, así que dos pestañas abiertas se pisan. Las fotos quedan en el historial de git, por eso el editor las achica a 1600 px en el navegador antes de subirlas.
Armar al publicar, servir HTML estático
Por qué. render(plantilla, contenido) es texto entra, texto sale, así la misma función corre con node construir.mjs en local y dentro de la función que publica. Quien entra baja un HTML del CDN y nunca llama a la función. Las clientas escriben texto plano con tres marcas (*cursiva dorada*, **negrita**, Enter); todo lo demás se escapa, y un campo vacío se lleva el bloque que lo envuelve, así borrar el texto de un botón saca el botón.
El costo. Nada de la página es dinámico. Los formularios abren WhatsApp o el mail con un mensaje armado en vez de mandar a un servidor, y la vista previa necesita ir y volver de la función.
Copiar el motor en cada sitio, no empaquetarlo
Por qué. Cada sitio tiene su repo, su proyecto en Vercel, su contraseña y un token de GitHub con permiso sólo sobre ese repo. Alimentación Integral Hoy tuvo el editor primero, después Natalia y después Lole. Copiar los archivos dejó que cada sitio sumara lo suyo: Alimentación tiene listas de videos y de fotos, Lole un tipo de lista genérico, orden de secciones y una paleta que deriva once colores de seis.
El costo. Las tres copias se separaron. El editor de Natalia no tiene buscador ni orden de secciones, y el detector de campos vacíos sólo está en dos repos. Un arreglo viaja a mano.