TPTito Pinardo Gutiérrez
← Volver al rack
English
1U · HOMEPAGEHomepage · 29 servicios · generado En producción

Posición 10 de 25 en el rack · En producción

Unidad 1U · Panel de entrada

Homepage · la puerta a todo

Una sola fuente de verdad

Una página con todos los servicios del homelab, agrupados por categoría y con su icono. No se toca a mano: Ansible la genera desde la misma lista de servicios con la que se crean las rutas de Traefik, así que lo que se publica y lo que aparece en el panel no pueden desincronizarse.

Por qué generado
Un panel editado a mano envejece: servicios que ya no existen, enlaces rotos. Si sale de la lista de servicios, siempre está al día.
Qué enseña
29 servicios en ocho categorías y tres pestañas: control, biblioteca y comunidad. Sin indicadores de salud de adorno: para eso está la monitorización.
Dónde se ve
Solo desde casa o la VPN, detrás de la puerta interna. Se retiró de internet: sus descripciones dicen demasiado de la red.
  • 29servicios en el panel
  • 8categorías, en tres pestañas
  • 0ficheros editados a mano en el servidor
  • 5plantillas que generan todo

Su código, en abierto Versión pública del repositorio: sin IPs ni secretos.

El panel por dentro

Nadie edita este panel a mano: se genera. Elige un recorrido para ver de dónde sale cada tarjeta.

Recorridos Pulsa uno y sigue el paquete.

Fuera Contenedor de Homepage · Proxmox Node.js + systemd, sin Docker De dónde sale El rol de Ansible La aplicación Cómo se comprueba un cambio Repositorio Mi portátil Puerta interna Traefik Lista servicios Solo locales Aspecto Fondo Plantillas Solo config Copias Regenerar Compilación Servicio Hosts válidos Pestañas Sintaxis --check --diff Navegador Sin cambios
Hermesde visita en la unidad

Pulsa una pieza o elige un recorrido. Si vienes de una habilidad, ya están encendidas las piezas donde la uso.

      Añado un servicio
      1. Repositorio de infraestructura — Añado una entrada a la lista de servicios, con su categoría y su icono.
      2. Lista de servicios — La lista es la misma para todo el homelab.
      3. Traefik — Traefik crea su ruta, si es público.
      4. Cinco plantillas — La plantilla de servicios lo coloca en su categoría.
      5. Las tres pestañas — Y aparece en su pestaña del panel, sin tocar nada más.
      Cambio el aspecto
      1. Aspecto — Cambio título, orden o descripciones en las variables del rol.
      2. Imagen de fondo — Y la imagen de fondo, si toca.
      3. Comprobar la sintaxis — Comprobación de sintaxis.
      4. Ensayo con diferencias — Ensayo: qué cambiaría.
      5. Etiqueta de configuración — Se aplica solo la parte de configuración.
      6. Cinco plantillas — Las cinco plantillas se despliegan.
      7. Copias fechadas — Cada fichero sustituido deja su copia fechada.
      8. Regenerar la página — Se regenera la página estática, con reintentos.
      9. Comprobar en el navegador — Lo compruebo en el navegador, en escritorio y móvil.
      10. Segunda pasada sin cambios — Y una segunda pasada no cambia nada.
      Abro el panel
      1. Mi portátil — Abro el panel desde casa.
      2. Puerta interna — La puerta interna pide doble factor.
      3. Hosts permitidos — Homepage comprueba que el nombre pedido es uno de los permitidos.
      4. Servicio systemd — El servicio responde.
      5. Las tres pestañas — Con las tres pestañas.
      6. Mi portátil — Y desde ahí, a cualquier servicio.
      Actualizo de versión
      1. Repositorio de infraestructura — Cambio la versión en el repositorio.
      2. Compilación — Ansible compila la nueva en su propia carpeta.
      3. Servicio systemd — Cambia el enlace a la activa y reinicia el servicio.
      4. Hosts permitidos — Con su lista de nombres permitidos.
      5. Las tres pestañas — Y el panel sigue igual, en la versión nueva. Volver atrás es cambiar el enlace.

      1. Repositorio de infraestructura

        La lista de servicios y el aspecto del panel, versionados.

        • Git

      2. Mi portátil

        Lo abro al empezar a trabajar.

      3. Puerta interna

        Solo desde casa o la VPN, con doble factor.

      4. Traefik

        Usa la misma lista para crear sus rutas públicas.

        • Traefik

      5. Lista de servicios

        Cada servicio con su dominio, su categoría y su icono. La misma lista para Traefik y para el panel.

        • Ansible

      6. Servicios solo locales

        Los que nunca pasan por internet (monitorización, seguridad, DNS…) en una lista aparte, para que el panel los tenga sin publicarlos.

        • Ansible

      7. Aspecto

        Título, orden, nombres, descripciones y servicios ocultos, en las variables del rol.

        • Ansible

      8. Imagen de fondo

        Una imagen propia de montañas al anochecer, con tarjetas translúcidas encima.

      9. Cinco plantillas

        Ajustes, servicios, widgets, marcadores y estilos. La de servicios agrupa sola por categoría: una categoría nueva aparece sin tocar nada.

        • Ansible

      10. Etiqueta de configuración

        Cambiar el aspecto no reinstala paquetes ni recompila: solo despliega las plantillas.

        • Ansible

      11. Copias fechadas

        Cada fichero que se sustituye deja su copia al lado, para volver atrás en segundos.

        • Ansible

      12. Regenerar la página

        Reiniciar no bastaba: la página estática seguía con el título viejo. El rol llama a la regeneración con reintentos.

        • Ansible

      13. Compilación

        Homepage no publica un binario: se compila con Node y Next.js, en una carpeta por versión con un enlace a la activa.

        • JavaScript / TypeScript
        • Next.js

      14. Servicio systemd

        Node.js con su unidad de systemd, sin Docker.

        • Linux (Debian, Alpine, Arch)

      15. Hosts permitidos

        Homepage rechaza cualquier petición cuyo nombre no esté en su lista. Protección propia que hay que configurar.

        • Linux / SSH hardening

      16. Las tres pestañas

        Control, biblioteca y comunidad, con accesos rápidos en todas.

      17. Comprobar la sintaxis

        Antes de nada, el playbook tiene que ser válido.

        • Ansible

      18. Ensayo con diferencias

        Ver qué cambiaría sin cambiarlo.

        • Ansible

      19. Comprobar en el navegador

        En escritorio y en móvil: tarjetas, fondo, título, sin desbordes ni errores de JavaScript.

      20. Segunda pasada sin cambios

        Volver a aplicar no debe cambiar nada. Si cambia, algo no es idempotente.

        • Ansible

      Lo que uso de mi árbol

      Pulsa una habilidad: se encienden en el mapa las piezas donde la uso y te cuento para qué.

      Terraform
      Crea el contenedor del panel.
      Ansible
      Genera todo el panel desde la lista de servicios, con etiqueta para cambios de aspecto, copias y regeneración.
      LXC
      Corre en su propio contenedor.
      Git
      La lista de servicios y el aspecto del panel están versionados.
      Linux (Debian, Alpine, Arch)
      Node.js con systemd, versiones en carpetas separadas y un enlace a la activa.
      Traefik
      Comparte con el panel la lista de servicios.
      Linux / SSH hardening
      Lista de nombres permitidos y acceso solo desde la puerta interna.
      JavaScript / TypeScript
      Homepage es una aplicación de Next.js que se compila con Node.
      Next.js
      La página estática que hay que regenerar tras cambiar la configuración.

      Bitácora de incidencias

      Averías reales. Lee el síntoma, elige la causa que creas y mira cómo se arregló.

      1. #1

        «markAsUncloneable is not a function»

        15-09-2026 · despliegue

        La versión de Homepage elegida no arrancaba: un error de JavaScript que no decía nada del panel.

        ¿Qué crees que pasaba?

        Ver la solución
        Causa
        Esa versión de Homepage usa un Next.js que exige Node 22, y la distribución solo trae Node 20. El error salía de dentro de Node, no de Homepage.
        Solución
        Instalar Node 22 desde el repositorio oficial de NodeSource y asegurarse de que la tarea sustituye la versión previa, que ya estaba instalada de un intento anterior.
        Lección
        Leer de quién es el error antes de buscarlo: este venía del motor, no de la aplicación. Y un intento previo deja restos que la segunda ejecución tiene que limpiar.

      2. #2

        «Host validation failed» a todo

        15-09-2026 · arranque

        Ya arrancaba, pero respondía 400 «Host validation failed» a cualquier petición, desde cualquier sitio.

        ¿Qué crees que pasaba?

        Ver la solución
        Causa
        Es una protección propia de Homepage: si el nombre con el que se le llama no está en su lista, rechaza la petición.
        Solución
        Declarar los nombres permitidos en el servicio de systemd, generados también por Ansible.
        Lección
        Las protecciones por defecto se agradecen, pero hay que saber que existen. La documentación oficial estaba antes que el foro.

      3. #3

        El título viejo no se iba

        26-09-2026 · aspecto

        Cambié título, idioma y orden. Ansible aplicó todo y reinició el servicio, pero el navegador seguía enseñando el título anterior.

        ¿Qué crees que pasaba?

        Ver la solución
        Causa
        Next.js genera parte del HTML una vez y lo sirve hecho. Reiniciar el servicio no lo vuelve a generar.
        Solución
        El rol llama a la ruta de regeneración tras reiniciar, con reintentos hasta que responde.
        Lección
        «Aplicado sin errores» no es «se ve bien». Hay que mirar el resultado en el navegador.

      Cómo se construyó

      1. 15-09-2026

        De Fenrus a Homepage

        • Homepage en su contenedor, compilado y con systemd.
        • Lista de servicios compartida con Traefik, con categoría e icono.

      2. 26-09-2026

        Aspecto y retirada de internet

        • Diseño propio, tres pestañas y fondo nuevo.
        • Fuera de internet: ahora solo detrás de la puerta interna.

      Decisiones (y por qué)

      • Qué panel

        Homepage

        Configuración declarativa en YAML: encaja con generarlo todo desde la lista de servicios.

      • Indicadores de salud

        Ninguno de adorno

        Un círculo verde que no mide nada da falsa tranquilidad. La salud está en la monitorización, a un clic.

      Lo que aprendí

      • Una sola lista para todo evita que dos sitios cuenten cosas distintas.
      • Comprobar en el navegador lo que Ansible dice que aplicó.

      Lo siguiente

      • Generar también la configuración de la puerta interna desde la misma lista.

      ¿Hablamos?

      Puedo contar cualquiera de estas decisiones en detalle en una entrevista.

      Descargar CV Contactar ← Volver al rack

      Reconstrucción a partir de mi documentación: sin direcciones, puertos ni nombres internos.