Hello World: Cómo levanté este blog técnico (y este post) colaborando con una IA

¡Bienvenidos! Este es el punto de partida oficial de mi bitácora técnica. Quería que el primer artículo fuera especial y que sirviera de meta-documentación: vamos a contar exactamente cómo hemos montado este espacio y cómo hemos escrito este mismo texto.

Lo curioso de este post es que es colaborativo. No lo escribo solo; es el resultado de una conversación fluida entre yo (el humano al mando del servidor) y una Inteligencia Artificial. Juntos hemos navegado por configuraciones de Docker, errores de seguridad y ajustes finos de CSS para dejarlo todo "al gusto".

El Origen: Buscando escapar de la fricción

Vengo de probar generadores de sitios estáticos (SSG) como Jekyll con temas muy chulos como Chirpy. Son potentes, pero para documentar el día a día de DevOps, el flujo de trabajo me resultaba enrevesado:

1. Hacer captura de pantalla.
2. Guardarla en la carpeta correcta de assets.
3. Escribir la ruta relativa en Markdown.
4. Hacer commit y push a Git.
5. Esperar a que el CI/CD construyera el sitio.

Demasiados pasos. Quería algo dinámico, rápido y que me permitiera simplemente capturar, pegar y publicar. Por eso elegí Ghost. Es increíblemente rápido (corre sobre Node.js) y su editor es una maravilla: pegas una imagen del portapapeles y listo.

Ghost: The best open source blog & newsletter platform

Beautiful, modern publishing with email newsletters and paid subscriptions built-in. Used by Platformer, 404Media, Lever News, Tangle, The Browser, and thousands more.

Ghost - The Professional Publishing Platform

El Despliegue: Dockerizando Ghost 6

Como no podía ser de otra forma, todo corre sobre Docker. Elegimos la última versión estable (Ghost 6) y, siguiendo las recomendaciones oficiales para producción, usamos MySQL 8 como base de datos.

services:
  ghost:
    image: ghost:6-alpine
    container_name: ghost_blog
    restart: always
    ports:
      - "2368:2368"
    environment:
      # IMPORTANTE: Esta URL debe coincidir con la IP o dominio por el que accedes
      url: http://192.168.20.38:2368
      database__client: mysql
      database__connection__host: db
      database__connection__user: ghost
      database__connection__password: tu_contraseña_segura
      database__connection__database: ghost_db
    volumes:
      - ./content:/var/lib/ghost/content
    depends_on:
      - db

  db:
    image: mysql:8.0
    container_name: ghost_db
    restart: always
    environment:
      MYSQL_DATABASE: ghost_db
      MYSQL_USER: ghost
      MYSQL_PASSWORD: tu_contraseña_segura
      MYSQL_ROOT_PASSWORD: root_password_segura
    volumes:
      - ./mysql:/var/lib/mysql

La Puesta a Punto Técnica (Code Injection)

Instalamos el tema Attila, que es muy limpio, pero le faltaban "superpoderes" para un blog técnico. Ghost es minimalista por defecto, así que no traía resaltado de sintaxis ni botón de copiar para el código.

Aquí es donde la colaboración con la IA fue clave. Usamos la función Code Injection de Ghost para inyectar librerías y estilos sin tocar los archivos internos del tema.

1. En el Site Header (CSS para Prism.js Okaidia):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css" />
<style>
  pre[class*="language-"] {
    border-radius: 8px;
    margin: 2em 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  }
</style>

2. En el Site Footer (JavaScript para el resaltado y botón de copiar):

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script>
  Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/';
</script>

Ajustes visuales finales ("al gusto")

Para terminar, queríamos limpiar la interfaz. Desactivamos todo el sistema de miembros, registros y el botón flotante de "Portal" para que no molestara.

<style>
    .nav-list {
        display: flex;
        justify-content: flex-end; /* ¡A la derecha! */
        width: 100%;
    }
    .nav-list li {
        margin-left: 20px;
        margin-right: 0;
    }
    .nav-list li a {
        font-family: monospace; /* Toque técnico */
        text-transform: lowercase;
    }
</style>

Y así es como, colaborando con una IA, hemos creado este espacio. ¡Gracias por leer este primer capítulo!