Homer Dashboard, nuestra web de inicio custom

/ / , , , , , , , , , , , , , , , , , , /

Atentos que esto es la bomba… hoy tenemos por aquí a Homer Dashboard que es de los mejores descubrimientos de este 2021… Es simplemente una web ligera y estática… pero… ¿para qué? Para hacer una página de inicio customizada y preciosa con los servicios webs que usamos, en casa o en las empresas, prepararos que mola 1000…

 

Bueno, creo que nos pasa a todos, cada vez tenemos más y más servicios que gestionar, que acceder… y desde hace mucho tiempo echaba en falta una solución que simplifique su acceso, una manera mejor de organizarse. Homer Dashboard es una web que no pesa, que la podemos tener en 2 minutos instalada, que es mega adaptable y que pensemos que sería el sitio que aglomera los servicios webs fundamentales. Para nosotros o para la empresa, esto es, una web corporativa de inicio en los navegadores que aglutina las webs, todo en uno.

 

Si todavía no os hacéis una idea, ir al final del post y ver el ejemplo mío particular, o poner en google «Homer Dashboard» y en ‘Imágenes’ ver ejemplos, es una chulada. Y lo dicho, es un sitio web totalmente personalizable y facilon, en un fichero en formato YAML lo configuramos de manera sencilla. Lo podremos desplegar en un contenedor de Docker por ejemplo, o en un Nginx o Apache que tengamos por ahí mismamente, no será más que bajarse la web y listo. Tenéis toda la info del proyecto aquí. Y aquí tienes una demo online por si quieres ver de qué se trata. Y si queréis, también hay otras soluciones parecidas, mirar DashMachine, Organizr, Heimdall o SUI entre otros.

 

Para instalarlo lo dicho, podéis mediante contenedor o directamente en un servidor web que tengamos ya desplegado. En este caso usaré Nginx como ejemplo, si no tienes el servicio instalado lo instalamos:

sudo apt install nginx unzip -y
sudo systemctl enable nginx

 

Y nada, para instalar Homer Dashboard tan sólo bastará con descargarlo, descomprimirlo, corregir los permisos y crear un fichero de configuración para personalizar nuestro Dashboard. 

wget https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip
sudo unzip homer.zip -d /usr/share/nginx/homer
sudo chown www-data:www-data /usr/share/nginx/homer/ -R
sudo cp /usr/share/nginx/homer/assets/config.yml.dist /usr/share/nginx/homer/assets/config.yml

 

Podemos crear un fichero de configuración en Nginx para publicar el sitio, os dejo este de ejemplo, o mismamente modificando el fichero de configuración del sitio predeterminado con la ruta correcta al sitio Homer.

server {
    listen 81;
    listen [::]:81;
    server_name homer.midominio.local;

# Path to the root of your installation
    root /usr/share/nginx/homer/;

   access_log /var/log/nginx/homer.access;
   error_log /var/log/nginx/homer.error;
}

 

Y nada, verificamos que la configuración es correcta & reiniciamos Nginx para recargar los cambios que hemos hecho:

sudo nginx -t
sudo systemctl reload nginx

 

Y nada, accedemos con un navegador al sitio que hemos creado y tendremos el Dashboard inicial, con él podremos partir y en un periquete tener el nuestro propio.

 

¿Cómo? Editando su fichero de configuración /usr/share/nginx/homer/assets/config.yml

 

 

Y te quedará algo tan chulo como esto! Lo dicho, es 100% personalizable, cómo véis le quité el encabezado, le puse un cuadro de búsqueda a Google… También quedó como página de inicio en los navegadores de la empresa, por GPO, al Internet Explorer, Chrome, Firefox, Edge… 

 

Y listo Calisto, tenemos tema oscuro también…

Os dejo un repositorio de iconos por si os facilita y que podréis utilizar, así como cualquier imagen personalizada, claro:

 

Por si os ayuda os dejo algo del código inicial de mi sitio Homer Dashboard, de verdad que es yaml y es sencillo de modificar, ¡ánimo!

---
# Homepage configuration
# See https://fontawesome.com/icons for icons options

title: "Open Services IT - Dashboard de servicios"
subtitle: "Homer"
logo: "logo_openservicesit.png"
header: false
footer: false
columns: 4
theme: default
colors:
  light:
    highlight-primary: "#7d0458"
    highlight-secondary: "#9e0770"
    highlight-hover: "#ffffff"
    background: "#f5f5f5"
    card-background: "#ffffff"
    text: "white"
    text-header: "#ffffff"
    text-title: "#303030"
    text-subtitle: "#424242"
    card-shadow: rgba(0, 0, 0, 0.1)
    link-hover: "#363636"
    background-image: "/imagenes/fondo.jpg"
  dark:
    highlight-primary: "#7d0458"
    highlight-secondary: "#9e0770"
    highlight-hover: "#2b2b2b"
    background: "#131313"
    card-background: "#2b2b2b"
    text: "#7d0458"
    text-header: "#ffffff"
    text-title: "#fafafa"
    text-subtitle: "#f5f5f5"
    card-shadow: rgba(0, 0, 0, 0.4)
    link-hover: "#ffdd57"
    background-image: "/imagenes/fondo.jpg"
message:
  content: '<form action="https://google.com/search" method="get"><input type="text" name="q" placeholder="Puedes buscar en Google lo que quieras" style="width: 100%" spellcheck="false" autofocus="true" onkeydown="handleKeyPress(event)"/></form>'
links:
  - name: "Open Services IT"
    url: "https://www.openservices.eus"
  - name: "Webmail"
    icon: "fas fa-envelope"
    url: "https://webmail.bujarra.com"
services:
  - name: "Infraestructura"
    icon: "fas fa-cloud"
    items:
      - name: "VMware vCenter Server"
        logo: "/imagenes/vmware.png"
        subtitle: "Gestión de la plataforma virtual"
        url: "https://os-vc-01.openservices.local/ui/"
        #target: "_blank" # optional html a tag target attribute
      - name: "Fortigate"
        logo: "/imagenes/fortigate.png"
        subtitle: "Acceso al Fortigate"
        url: "https://192.168.1.1"
...

 

Nada y si le dedicáis algo más de rato que yo, estoy seguro que podéis hacer algo muy chulo. Lo dicho, pensad en esas webs iniciales para departamentos, sitios de IT…

Como siempre un placer, os cuidáis mucho, que vaya muy bien y agradecer a los que mueven estas cosas por redes sociales, es la única manera de llegar a más gente que le puedan venir bien este tipo de soluciones open source, ¡abrazos!

 

Posts recomendados:

Héctor Herrero
Últimas entradas de Héctor Herrero (ver todo)