How To Create A Simple Dashboard Using Homer

I’ve tried and tested many of the available self-hosted dashboard apps such as heimdall, dashy and flame to name a few, but ultimately I have settled on using homer. For me it has the right level of functionality combined with aesthetics that I like to create a simple dashboard.

Dark Mode / List Layout

Light Mode / Table Layout

Here is a ‘slightly sanitized’ version of the config.conf for the above dashboard:

---
# Homelab Dashboard Main Page Configuration
# See https://fontawesome.com/v5/search for icons options

title: "Homelab Dashboard"
#subtitle: "lab.homelab.net"
#logo: "logo.png"
icon: "fas fa-house-laptop" # Optional icon

header: true
footer: '<p>Homelab Dashboard | Maintained by <a href="mailto:[email protected]">Lee Woodhouse</a> | Sponsored by <a href="http://192.168.1.22:8686">Supermario</a> | Logoff Auth server <a href="https://auth.homelab.net">here</a></p>'
columns: "4" # Options "auto" or must be a factor of 12: 1,2,3,4,6,12
connectivityCheck: true

#proxy:
#  useCredentials: true

defaults:
  layout: list
  colorTheme: dark


# Optional theme customization
theme: default # 'default' or one of the themes available in 'src/assets/themes'
colors:
  light:
    highlight-primary: "#2b2b2b"
    highlight-secondary: "#363636"
    highlight-hover: "#565656"
    background: "#f5f5f5"
    card-background: "#ffffff"
    text: "#363636"
    text-header: "#ffffff"
    text-title: "#303030"
    text-#subtitle: "#424242"
    card-shadow: rgba(0, 0, 0, 0.1)
    link: "#3273dc"
    link-hover: "#363636"
  dark:
    highlight-primary: "#2b2b2b"
    highlight-secondary: "#363636"
    highlight-hover: "#565656"
    background: "#1c1c1c"
    card-background: "#2b2b2b"
    text: "#eaeaea"
    text-header: "#ffffff"
    text-title: "#fafafa"
    text-#subtitle: "#f5f5f5"
    card-shadow: rgba(0, 0, 0, 0.4)
    link: "#3273dc"
    link-hover: "#ffdd57"

# Optional message | DuckDuckGo Search Bar
message:
  #style: "is-link"
  title: "Search"
  icon: "fa fa-magnifying-glass"
  content: '<iframe src="https://duckduckgo.com/search.html?prefill=Search
    DuckDuckGo&focus=yes&kz=1&kac=1&kn=1&kp=-2&k1=-1" style="overflow:hidden;margin:0;
    padding:0;width:calc(100% - 70px);height:40px;" frameborder="0"></iframe>'

# Optional navbar
links:
  - name: "Wordpress"
    icon: "fab fa-wordpress"
    url: "https://www.myblog.io/"
    target: "_blank"    
  - name: "Linkedin"
    icon: "fab fa-linkedin"
    url: "https://www.linkedin.com/feed/"
    target: "_blank"
  - name: "Github"
    icon: "fab fa-github"
    url: "https://github.com/lpwoodhouse"
    target: "_blank" # optional html a tag target attribute
  - name: "Reddit"
    icon: "fab fa-reddit"
    url: "https://www.reddit.com/user/"
    target: "_blank"
  - name: "Twitter"
    icon: "fab fa-twitter"
    url: "https://twitter.com/home"
    target: "_blank"
  - name: "Facebook"
    icon: "fab fa-facebook"
    url: "https://www.facebook.com"
    target: "_blank"
  - name: "Work Dashboard (local)"
    icon: "fas fa-tools"
    url: "https://dashboard-work.homelab.net"
    target: "_blank"

# Services
services:
  
  # Section 1
  - name: "Hardware"
    icon: "fas fa-server"
    items:
      - name: "Proxmox"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/proxmox.png"
        subtitle: "Virtual Environment"
        tag: "server"
        tagstyle: "is-link" # options is-primary,is-link,is-info,is-success,is-warning,is-danger,is-small,is-medium,is-large,is-outlined,is-loading,[disabled]
        url: "https://proxmox.homelab.net"
        target: "_blank"
      - name: "Synology DSM"
        subtitle: "Diskstation DS920+"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/synology-dsm.png"
        tag: "storage"
        tagstyle: "is-link"
        url: "https://quickconnect.to/"
        target: "_blank"
      - name: "Router Configuration"
        subtitle: "Netgear Orbi RBR20"
        logo: "assets/dashboard-icons/custom/netgearorbi.png"
        tag: "router"
        tagstyle: "is-link"
        url: "https://orbilogin.com/adv_index.htm"
        target: "_blank"
      - name: "Printer Configuration"
        subtitle: "Epson ET-3750"
        logo: "assets/dashboard-icons/custom/epson.png"
        tag: "printer"
        tagstyle: "is-link"
        url: "https://192.168.0.6/PRESENTATION/PSWD"
        target: "_blank"

  # Section 2
  - name: "Container Management"
    icon: "fab fa-docker"
    items:
      - name: "Portainer 1"
        
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/portainer.png"
        tag: "docker"
        tagstyle: "is-link"
        url: "https://portainerlab1.homelab.net/#!/auth"
        target: "_blank"
      - name: "Portainer 2"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/portainer.png"
        tag: "docker"
        tagstyle: "is-link"
        url: "https://portainerlab2.homelab.net/#!/auth"
        target: "_blank"
      - name: "Portainer 3"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/portainer.png"
        tag: "docker"
        tagstyle: "is-link"
        url: "https://portainerlab3.homelab.net/#!/auth"
        target: "_blank"
      - name: "Portainer 4"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/portainer.png"
        tag: "docker"
        tagstyle: "is-link"
        url: "https://portainerlab4.homelab.net/#!/auth"
        target: "_blank"
      - name: "Portainer 5"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/portainer.png"
        tag: "docker"
        tagstyle: "is-link"
        url: "https://portainerlab5.homelab.net/#!/auth"
        target: "_blank"
      - name: "Portainer (DSM)"
        subtitle: "docker-dsm.homelab.net"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/portainer.png"
        tag: "docker"
        tagstyle: "is-link"
        url: "https://portainerlab-dsm.homelab.net/#!/auth"
        target: "_blank"
      - name: "Rancher"
        subtitle: "rancher.homelab.net"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/rancher.png"
        tag: "kubernetes"
        tagstyle: "is-link"
        url: "https://rancher.homelab.net"
        target: "_blank"
      - name: "Docker Hub"
        subtitle: "hub.docker.com"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/docker.png"
        tag: "docker"
        tagstyle: "is-link"
        url: "https://hub.docker.com/"
        target: "_blank"

  # Section 3
  - name: "Applications"
    icon: "fas fa-gears"
    items:      
      - name: "AWX"
        subtitle: "Ansible Tower"
        logo: "assets/dashboard-icons/custom/awx.png"
        tag: "app"
        tagstyle: "is-link"
        url: "https://awx.homelab.net/#/login"
        target: "_blank"
      - name: "GitLab"
        subtitle: "Self-hosted Git Service"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/gitlab.png"
        tag: "app"
        tagstyle: "is-link"
        url: "https://gitlab.homelab.net/"
        target: "_blank"
      - name: "Snippet-Box"
        subtitle: "Code Snippets Organizer"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/snippetbox.png"
        tag: "app"
        tagstyle: "is-link"
        url: "https://snippet.homelab.net/"
        target: "_blank"
      - name: "Nginx Proxy Manager"
        subtitle: "Reverse Proxy Service"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/nginxproxymanager.png"
        tag: "proxy"
        tagstyle: "is-link"
        url: "https://npm.homelab.net/"
        target: "_blank"
      - name: "Home Inventory"
        subtitle: "Snipe-IT Asset Tracker"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/snipe-it-alt.png"
        tag: "database"
        tagstyle: "is-link"
        url: "https://assets.homelab.net/"
        target: "_blank"
      - name: "Guacamole"
        subtitle: "Clientless RDP Gateway"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/guacamole.png"
        tag: "app"
        tagstyle: "is-link"
        url: "https://guac.homelab.net/"
        target: "_blank"
      - name: "Bitwarden"
        subtitle: "Password Management"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/bitwarden.png"
        tag: "app"
        tagstyle: "is-link"
        url: "https://bitwarden.homelab.net/"
        target: "_blank"
      - name: "Firefly III"
        subtitle: "Personal Finance Management"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/firefly.png"
        tag: "app"
        tagstyle: "is-link"
        url: "https://firefly.homelab.net/"
        target: "_blank"
      - name: "Node-RED"
        subtitle: "Flow-based Programming"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/nodered.png"
        tag: "app"
        tagstyle: "is-link"
        url: "https://nodered.homelab.net/"
        target: "_blank"

  # Section 4
  - name: "Media"
    icon: "fas fa-film"
    items:
      - name: "Plex"
        subtitle: "Media Server"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/plex.png"
        tag: "media"
        tagstyle: "is-link"
        url: "https://app.plex.tv/desktop/#!/"
        target: "_blank"
      - name: "Sonarr"
        subtitle: "TV Show Library Management"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/sonarr.png"
        tag: "media"
        tagstyle: "is-link"
        url: "https://sonarr.homelab.net"
        target: "_blank"
      - name: "Radarr"
        subtitle: "Movie Library Management"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/radarr.png"
        tag: "media"
        tagstyle: "is-link"
        url: "https://radarr.homelab.net"
        target: "_blank"
      - name: "Lidarr"
        subtitle: "Music Library"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/lidarr.png"
        tag: "media"
        tagstyle: "is-link"
        url: "https://lidarrl.homelab.net"
        target: "_blank"
      - name: "Jackett"
        subtitle: "Indexer Configuration"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/jackett.png"
        tag: "media"
        tagstyle: "is-link"
        url: "http://192.168.0.23:9117/"
        target: "_blank"
      - name: "qBittorrent"
        subtitle: "Download Management"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/qbittorrent.png"
        tag: "media"
        tagstyle: "is-link"
        url: "https://qbittorrent.homelab.net/"
        target: "_blank"

  # Section 5
  - name: "Monitoring"
    icon: "fas fa-heartbeat"
    items:
      - name: "Grafana"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/grafana.png"
        tag: "monitoring"
        tagstyle: "is-link"
        url: "https://grafana.homelab.net"
        target: "_blank"
      - name: "Prometheus"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/prometheus.png"
        tag: "monitoring"
        tagstyle: "is-link"
        url: "http://192.168.0.22:9090"
        target: "_blank"
      - name: "InfluxDB"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/influxdb.png"
        tag: "monitoring"
        tagstyle: "is-link"
        url: "https://influxdb.homelab.net"
        target: "_blank"
      - name: "Uptime Kuma"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/uptime-kuma.png"
        tag: "monitoring"
        tagstyle: "is-link"
        url: "https://uptime.homelab.net/"
        target: "_blank"
      - name: "Zabbix"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/zabbix.png"
        tag: "monitoring"
        tagstyle: "is-link"
        url: "https://zabbix.homelab.net/"
        target: "_blank"
      - name: "Pi-hole"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/pihole.png"
        subtitle: "Network-wide Ad Blocking" # optional, if no #subtitle is defined, PiHole statistics will be shown
        tag: "app"
        tagstyle: "is-link"
        url: "https://pihole.homelab.net/admin"
        type: "PiHole" # optional, loads a specific component that provides extra features. MUST MATCH a file name (without file extension) available in `src/components/services`
        target: "_blank" # optional html a tag target attribute
        #class: "green" # optional custom CSS class for card, useful with custom stylesheet
        #background: red # optional color for card to set color directly without custom stylesheet
      - name: "Pushover"
        subtitle: "Manage Push Notifications"
        logo: "https://pushover.net/images/icon-256.png"
        tag: "web"
        tagstyle: "is-link"
        url: "https://pushover.net/#apps"
        target: "_blank"

  # Section 6
  - name: "Web/Cloud"
    icon: "fas fa-cloud"
    items:
      - name: "Amazon Web Services"
        logo: "assets/dashboard-icons/custom/aws3.png"
        tag: "cloud"
        tagstyle: "is-link"
        url: "https://signin.aws.amazon.com"
        target: "_blank"
      - name: "Cloudflare Dashboard"
        subtitle: "DNS Management"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/cloudflare.png"
        tag: "cloud"
        tagstyle: "is-link"
        url: "https://dash.cloudflare.com/"
        target: "_blank"
      - name: "Twilio SendGrid"
        subtitle: "Email API"
        logo: "assets/dashboard-icons/custom/sendgrid.png"
        tag: "api"
        tagstyle: "is-link"
        url: "https://app.sendgrid.com"
        target: "_blank"
      - name: "Google Domains"
        subtitle: "Domain Registration"
        logo: "assets/dashboard-icons/custom/google_domains.png"
        tag: "web"
        tagstyle: "is-link"
        url: "https://domains.google.com"
        target: "_blank"

  # Section 7
  - name: "In Development"
    icon: "fas fa-tools"
    items:
      - name: "Flame"
        subtitle: "self-hosted startpage editor"
        logo: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/master/png/flame.png"
        tag: "192.168.0.22:5005"
        tagstyle: "is-link"
        url: "http://192.168.0.22:5005"
        target: "_blank"
      - name: "DashMachine (Homelab)"
        subtitle: "dashboard alternative"
        logo: "assets/dashboard-icons/custom/cogs.png"
        tag: "192.168.0.22:5000"
        tagstyle: "is-link"
        url: "http://192.168.0.22:5000"
        target: "_blank"