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.
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:
gethomepageloads 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
- Landing Page: A beautiful dashboard with live service widgets.
- Developer Portal: A Backstage instance tracking our our microservices.
- 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-10flowchart 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).
# 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.
# 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-30In 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.