Infrastructure Intermediate 15 min

Homelab Dashboarding: Homepage, Backstage, & Authelia

Building the ultimate developer portal for the home lab. We integrate 'gethomepage', Spotify Backstage, and secure it all with Authelia SSO.

By Victor Robin Updated:

When I first started building dashboards for my homelab, I had a sprawling bookmarks folder with dozens of service URLs that I could never keep straight. I tried Heimdall, then Organizr, then a simple Nginx landing page with hardcoded links — none of them stuck. The breakthrough came when I realized I needed two different views: a quick-glance operational dashboard for “is everything healthy?” and a deeper developer portal for “what services do we run and who owns them?” Combining gethomepage with Backstage behind Authelia SSO gave me exactly that, though getting Authelia’s ForwardAuth headers to play nicely with Backstage’s own auth took more debugging than I care to admit.

Introduction

A homelab isn’t complete without a proper landing page. But as services grow, a static list of links isn’t enough. We need observability, service catalogs, and unified authentication. In this guide, we combine gethomepage for the “monitor” view and Backstage for the “developer” view.

Why This Stack Matters:

  • Quick Access: gethomepage loads instantly and shows live stats (Docker, Traefik).
  • Service Catalog: Backstage documents APIs and tracks ownership of our microservices.
  • Unified Security: Authelia provides a single login for everything, passing headers downstream.

What We’ll Build

  1. Landing Page: A beautiful dashboard with live service widgets.
  2. Developer Portal: A Backstage instance tracking our our microservices.
  3. SSO Gateway: Enforcing 2FA in front of all internal tools.

Architecture Overview

Traffic flows through Traefik, which checks Authelia before allowing access to the dashboards.

[Traefik ForwardAuth Middleware] — Traefik Labs , 2024-05-10
flowchart TD
    User((User)) -->|HTTPS| Traefik[Traefik Ingress]
    
    subgraph Auth ["Authentication"]
        Traefik -- ForwardAuth --> Authelia
    end
    
    subgraph Dashboards ["Portals"]
        Traefik -->|/| Homepage[gethomepage]
        Traefik -->|/catalog| Backstage
    end

    Homepage -->|Stats| K8s[K8s API]
    Backstage -->|Catalog Info| Git[GitHub]

    classDef primary fill:#7c3aed,color:#fff
    classDef secondary fill:#06b6d4,color:#fff
    classDef db fill:#f43f5e,color:#fff
    classDef warning fill:#fbbf24,color:#000

    class Traefik,Homepage primary
    class Authelia secondary

Section 1: Configuring Homepage

We use gethomepage because it’s fast and config-driven (YAML).

[Homepage - A modern, fully static, fast, secure fully proxied, highly customizable application dashboard] — gethomepage , 2024-12-01
# services.yaml
- Group: Core Infrastructure
  services:
    - Authelia:
        icon: authelia.png
        href: https://auth.bluerobin.local
        description: SSO Provider
        widget:
            type: authelia
            url: http://authelia.authelia.svc.cluster.local

Section 2: Implementing Backstage

Backstage allows us to treat our homelab like a production platform. We map our catalog-info.yaml files.

[Backstage Software Catalog] — Spotify / CNCF , 2024-10-22
# catalog-info.yaml
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: myapp-api
  description: The main API for document archives.
  tags:
    - dotnet
    - api
spec:
  type: service
  lifecycle: production
  owner: user:victor

Section 3: Protecting with Authelia

Finally, we ensure no one accesses these dashboards without credentials.

[Authelia - Authentication and Authorization Server] — Authelia Project , 2024-08-30

In our IngressRoute:

apiVersion: traefik.io/v1alpha1
kind: Middleware
metadata:
  name: authelia
  namespace: data-layer
spec:
  forwardAuth:
    address: http://authelia.authelia.svc:9091/api/verify?rd=https://auth.bluerobin.local/
    trustForwardHeader: true
    authResponseHeaders:
      - Remote-User
      - Remote-Groups
[Kubernetes RBAC Authorization] — Kubernetes Documentation , 2024-09-05 [Building Developer Portals with Backstage] — Suzanne Daniels , 2024-03-15

Conclusion

By layering these three tools, we get the best of both worlds: a flashy “NOC-style” dashboard for quick checks, and a deep, enterprisey catalog for managing the complexity of the our microservices.

Looking back, the effort of setting up Backstage alongside gethomepage might seem like overkill for a homelab with fewer than twenty services. But the discipline of writing catalog-info.yaml for each service forced me to think about ownership, documentation, and API contracts in ways I had been neglecting. The dashboard became not just a tool for monitoring but a forcing function for better engineering practices at home.

Next Steps

  • Add custom Backstage plugins for NATS JetStream stream visualization
  • Integrate Homepage widgets for Flux reconciliation status
  • Set up Authelia notifications via the Telegram bot for failed login attempts
  • Explore Backstage TechDocs for rendering Markdown documentation from each service repo

Further Reading

[gethomepage Documentation] — Gethomepage , 2024 [Backstage Getting Started Guide] — Backstage , 2024 [Authelia Configuration Reference] — Authelia , 2024 [Traefik Middleware Documentation] — Doc , 2024
  • See how we deploy this with Flux CD.
  • Check out the Glassmorphism guide to see how we styled the custom Backstage theme.