3 min de lectura

Cómo hacer un blog con IA

Créditos del software

La IA aunque lleva años dando que hablar, todavía hoy se siente novedosa, aunque es accesible para todo el que disponga de conexión a internet y cualquiera puede usar la IA generativa para crear un cartel o hacer un resumen, para diseñar ilustraciones, reconstruír imágenes, editar vídeos o escribir código con cierta complejidad, sigue siendo bastante impredecible.

Según el modelo de IA que utilices y qué instrucciones le indicas, la IA puede devolver unos resultados u otros, según las entradas de información que haya obtenido o que tú mismo le hayas proporcionado. Es decir, no son deterministas, si tu le das la misma instrucción dos veces a un modelo de IA u otro, puede devolverte resultados diferentes (a veces incluso al mismo modelo si éste ha sido alimentado por ti con otro contexto y necesidades diferentes).

Hace poco leía que podría resultar interesante que, a medida que la IA se vuelve omnipresente, recordemos cómo construimos los primeros proyectos como si se tratasen de las notas de un laboratorio.

Al final del artículo dejo apuntadas aclaraciones por si algún término te parece marciano o por si quieres profundizar.

Las instrucciones

Monta un blog llamado codecantor en el que vamos a escribir todos los contenidos a mano:

1. Seguir los guidelines del diseño en Figma¹.
2. Usa un generador de páginas estáticas como Jekyll²: HTML en build, sin framework de cliente; quiero escribir los posts con Markdown y HTML.
3. Estilos con Tailwind CSS³, tokens en tailwind.config.js y cumplimiento de estándares WCAG 2.2 AA⁴.
4. Tres vistas: home, índice de artículos (/blog/) y post individual (/blog/title-post) .
5. Todo el contenido en español.
6. Estructura predecible: layouts en _layouts/, fragmentos en _includes/, autores en _data/authors.yml.
7. Deploy en GitHub Pages⁵ al mergear a main vía GitHub Actions.
8. SEO por página: títulos y descripciones únicos, JSON-LD⁶ en posts, RSS y Open Graph⁷ con imágenes generadas en build (Satori + Resvg)⁸.
9. Crea un fichero README.md⁹ con la documentación necesaria para arrancar, editar y publicar el proyecto.
10. Crea un fichero front-end-prompt.md¹⁰ con reglas básicas para cambios de UI: fidelidad al diseño, accesibilidad y convenciones del código, cuando acabes añadiremos más directrices del front.
11. Escribe 3 posts de ejemplo para trabajar en los detalles del diseño.

A medida que iba hablando con la IA me sugería si le podía dar información de los autores etc, haciendo muy fácil construir la base. En poco más de 15 minutos tenía una base sobre lo que trabajar, y tuve que darle 30 directrices de diseño (micro-interacciones, detalles del diseño muy dificiles de apreciar etc), así como incluir el contenido que quería que fuese 100% humano.

Quería un sitio sencillo en el que poder escribir y publicar, y quitando alguna corrección de código que hizo mal (como el contador de minutos de los artículos que lo metió manual y yo quiero que lo haga automático), el resultado para mi fué el deseado.

Es increíble además que me sugería ciertas dudas que yo sabía que tenía que resolver pero que no supe detallar a la hora de darle las primeras instrucciones, pero son detalles que iré resolviendo sobre la marcha.

Ahora sí, podemos centrarnos en construir, documentarlo y en aprender de todo lo que vendrá próximamente.

Notas

1. Figma. Es la herramienta más popular de diseño UI. Diseñé usando Figma dos pantallas (la home y un post) con el grid que se ve en desktop, la intro y todos los elementos del logo etc, usé 4 colores y 4 tamaños de letra, suficiente para generar un sistema de diseño que luego reutilizo en el resto de la web.
2. Jekyll. Generador de sitios estáticos en Ruby. Toma Markdown y plantillas Liquid y produce HTML listo para servir; no hay servidor de aplicación en producción.
3. Tailwind CSS. Framework de utilidades CSS: clases como text-subtitle o px-gutter en el HTML, compiladas a un CSS minificado. Los tokens del diseño viven en tailwind.config.js.
4. WCAG 2.2 AA. Pautas de accesibilidad web (contraste, teclado, HTML semántico). En este proyecto significa, por ejemplo, un solo h1 por página y foco visible en enlaces.
5. GitHub Pages. Hosting estático gratuito de GitHub. Un push a main dispara el workflow que construye el sitio y lo publica.
6. JSON-LD. Datos estructurados en JSON embebidos en el HTML (schema.org/BlogPosting) para que buscadores entiendan título, autor y fecha del artículo.
7. Open Graph. Metaetiquetas (og:image, og:title…) que controlan la vista previa al compartir un enlace en redes o mensajería.
8. Satori + Resvg. Satori convierte HTML/SVG en una imagen vectorial; Resvg la rasteriza a PNG. Las usamos en CI para generar automáticamente la imagen OG de cada post con el logo y el título.
9. README.md. Es un fichero (que suele existir por defecto en los proyectos de código), ahí se incluyen las instrucciones e información relacionada con el proyecto.
10. front-end-prompt.md. Es un fichero con todas las reglas de front-end que queramos incluir y tener en cuenta siempre que hagamos cambios de código (cumplir accesibilidad, usar este framework o este js, estos colores…) para mejorar la precisión de diseño y desarrollo que usa la IA.