Painel Homer, Nosso site personalizado

Tenha cuidado, esta é a bomba… hoje temos aqui o Homer Dashboard, que é uma das melhores descobertas deste 2021… É apenas um site leve e estático… mas… Para quê? Para fazer uma página inicial personalizada e bonita com os serviços da web que usamos, em casa ou em empresas, Prepare-se, é 1000 legal…

Poço, 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 solution que simplifique su access, una manera mejor de organizarse. Homer Dashboard es una web que no pesa, que la podemos tener en 2 minutos instalada, que es mega adaptável e que pensemos que seria o sítio que aglomera los servicios webs fundamentes. Para nós o para la empresa, Isso é, una web corporativa de início 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 “Painel Homer” y en 'Imágenes’ ver exemplos, es una chulada. E o que eu disse, es un sitio web totalmente personalizável y facil, num ficheiro em formato YAML configuramo-lo de maneira simples. Podemos implantá-lo num contentor Docker, por exemplo, ou num Nginx ou Apache que tenhamos por aí exatamente, não será mais do que fazer o download da web e pronto. Têm toda a informação do projeto aqui. E aqui tens uma demo online caso queiras ver do que se trata. E se quiserem, também existem outras soluções semelhantes, olhem DashMachine, Organizr, Heimdall ou SUI entre outros.

Para o instalar, como dito, podem através de contentor ou diretamente num servidor web que já tenhamos implantado. Neste caso usarei Nginx como exemplo, se não tiveres o serviço instalado, instalamos:

sudo apt install nginx unzip -y
sudo systemctl enable nginx

E nada, para instalar o Homer Dashboard, apenas será necessário fazer o download, descompactá-lo, corrigir as permissões e criar um ficheiro de configuração para personalizar o nosso 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 criar um ficheiro de configuração no Nginx para publicar o site, deixo-vos este como exemplo, ou até modificando o ficheiro de configuração do site predefinido com o caminho correto para o site Homer.

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

# Caminho para a raiz da sua instalação
    root /usr/share/nginx/homer/;

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

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

sudo nginx -t
sudo systemctl reload nginx

E nada, accedemos com um navegador al sitio que hemos criado y tendremos el Dashboard inicial, con ele podremos partir y en un periquete tener el nosso próprio.

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

Y te quedará algo tan chulo como esto! O que eu disse, É 100% personalizável, como véis le quité el encabezado, le puse un cuadro de búsqueda a Google… También quedó como página de início 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 íconos por si os facilita y que podréis utilizar, assim como qualquer imagem 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: "Serviços abertos de TI - Dashboard de servicios"
subtitle: "Homer"
logo: "logo_openservicesit.png"
cabeçalho: false
footer: false
columns: 4
theme: default
colors:
  Leve:
    highlight-primary: "#7D0458"
    highlight-secondary: "#9e0770"
    highlight-hover: "#ffffff"
    fundo: "#f5f5f5"
    card-background: "#ffffff"
    Texto: "Branco"
    text-header: "#ffffff"
    text-title: "#303030"
    text-subtitle: "#424242"
    card-shadow: rgba(0, 0, 0, 0.1)
    link-hover: "#363636"
    imagem de fundo: "/imagenes/fondo.jpg"
  Escuro:
    highlight-primary: "#7D0458"
    highlight-secondary: "#9e0770"
    highlight-hover: "#2b2b2b"
    fundo: "#131313"
    card-background: "#2b2b2b"
    Texto: "#7D0458"
    text-header: "#ffffff"
    text-title: "#fafafa"
    text-subtitle: "#f5f5f5"
    card-shadow: rgba(0, 0, 0, 0.4)
    link-hover: "#ffdd57"
    imagem de fundo: "/imagenes/fondo.jpg"
Mensagem:
  conteúdo: '<form action="https (em inglês)://google.com/search" method="get"><input type="Texto" name="q" placeholder="Puedes buscar en Google lo que quieras" style="Largura: 100%" spellcheck="Falso" autofocus="Verdadeiro" onkeydown="handleKeyPress(evento)"/></form>'
links:
  - Nome: "Serviços abertos de TI"
    URL: "https (em inglês)://www.openservices.eus"
  - Nome: "Webmail"
    ícone: "fas fa-envelope"
    URL: "https (em inglês)://webmail.bujarra.com"
Serviços:
  - Nome: "Infraestruturas"
    ícone: "fas fa-cloud"
    itens:
      - Nome: "Servidor VMware vCenter"
        logo: "/imagenes/vmware.png"
        subtitle: "Gestión de la plataforma virtual"
        URL: "https (em inglês)://os-vc-01.openservices.local/ui/"
        #Alvo: "_blank" # optional html a tag target attribute
      - Nome: "Fortalecer"
        logo: "/imagenes/fortigate.png"
        subtitle: "Acceso al Fortigate"
        URL: "https (em inglês)://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. O que eu disse, pensad en esas webs iniciales para departamentos, sitios de IT…

Como sempre um prazer, os cuidáis mucho, que vaya muy bien y agradecer a los que mueven estas cosas por redes sociais, é a única forma de chegar a mais gente que le possam vir bem este tipo de soluções open source, ¡Abraços!

Postagens recomendadas

Autor

nheobug@bujarra.com
Autor del blog Bujarra.com Cualquier necesidad que tengas, Não hesite em contactar-me, Vou tentar ajudá-lo sempre que puder, Compartilhar é viver ;) . Desfrute de documentos!!!