Deploying Starbase 80

Introduction

Starbase 80 is a sleek, modern dashboard application designed as a homepage for your self-hosted services. It provides a clean, organized interface to access all your applications from a single page. With a retro-futuristic design inspired by classic sci-fi interfaces, Starbase 80 makes your homelab or server dashboard look as good as it functions.

Built as a lightweight, static-first application, Starbase 80 focuses on simplicity and style while providing essential features like service grouping, custom icons, and easy configuration through YAML.

Key highlights of Starbase 80:

• Beautiful Design: Retro-futuristic aesthetic with modern touches
• Service Groups: Organize services into logical categories
• Custom Icons: Support for various icon sources
• YAML Configuration: Simple configuration through YAML files
• Lightweight: Minimal resource requirements
• Responsive: Works on desktop, tablet, and mobile
• Dark Theme: Easy on the eyes with dark mode by default
• Fast Loading: Static content loads quickly
• Docker Ready: Easy containerized deployment
• Open Source: MIT licensed

This guide walks through deploying Starbase 80 on Klutch.sh using Docker for your service dashboard.

Why Deploy Starbase 80 on Klutch.sh

Deploying Starbase 80 on Klutch.sh provides several advantages:

Simplified Deployment: Klutch.sh handles the container deployment automatically.

HTTPS by Default: Secure access to your dashboard with automatic SSL.

Persistent Storage: Configuration persists across deployments.

GitHub Integration: Version control your configuration and deploy updates automatically.

Custom Domains: Use a memorable URL for your dashboard.

Always Available: Access your service links from anywhere.

Central Hub: One URL to access all your services.

Prerequisites

Before deploying Starbase 80 on Klutch.sh, ensure you have:

• A Klutch.sh account
• A GitHub account with a repository for your configuration
• A list of services you want to display
• Basic familiarity with Docker and YAML
• (Optional) A custom domain for your dashboard

Deploying Starbase 80 on Klutch.sh

Create a GitHub Repository

Create a new GitHub repository for your Starbase 80 deployment.

Create Your Dockerfile

Create a Dockerfile in your repository:

FROM ghcr.io/notclickable-jordan/starbase-80:latest

# Copy custom configuration
COPY config.yaml /app/config.yaml

EXPOSE 4173

HEALTHCHECK --interval=30s --timeout=10s --start-period=10s --retries=3 \
  CMD curl -f http://localhost:4173/ || exit 1

Create Configuration File

Create config.yaml with your services:

title: "My Dashboard"
subtitle: "Starbase Command Center"

categories:
  - name: "Media"
    icon: "mdi:play-circle"
    services:
      - name: "Plex"
        url: "https://plex.example.com"
        icon: "mdi:plex"
        description: "Media streaming"

      - name: "Jellyfin"
        url: "https://jellyfin.example.com"
        icon: "mdi:jellyfish"
        description: "Free media server"

      - name: "Sonarr"
        url: "https://sonarr.example.com"
        icon: "mdi:television"
        description: "TV show management"

  - name: "Tools"
    icon: "mdi:tools"
    services:
      - name: "Portainer"
        url: "https://portainer.example.com"
        icon: "mdi:docker"
        description: "Container management"

      - name: "Grafana"
        url: "https://grafana.example.com"
        icon: "mdi:chart-line"
        description: "Monitoring dashboards"

      - name: "Prometheus"
        url: "https://prometheus.example.com"
        icon: "mdi:fire"
        description: "Metrics collection"

  - name: "Home"
    icon: "mdi:home"
    services:
      - name: "Home Assistant"
        url: "https://homeassistant.example.com"
        icon: "mdi:home-automation"
        description: "Smart home control"

      - name: "Pi-hole"
        url: "https://pihole.example.com"
        icon: "mdi:shield-check"
        description: "Network ad blocking"

  - name: "Development"
    icon: "mdi:code-braces"
    services:
      - name: "Gitea"
        url: "https://gitea.example.com"
        icon: "mdi:git"
        description: "Git repositories"

      - name: "Jenkins"
        url: "https://jenkins.example.com"
        icon: "mdi:robot"
        description: "CI/CD automation"

Push Your Repository to GitHub

Commit and push your Dockerfile and configuration.

Create a New Project on Klutch.sh

Navigate to the Klutch.sh dashboard and create a new project.

Create a New App

Within your project, create a new app and connect your GitHub repository.

Configure HTTP Traffic

In the deployment settings:

• Select HTTP as the traffic type
• Set the internal port to 4173

Deploy Your Application

Click Deploy to build and start Starbase 80.

Access Your Dashboard

Once deployment completes, access your dashboard at https://your-app-name.klutch.sh.

Configuration

Basic Settings

Configure global options in config.yaml:

title: "My Homelab"
subtitle: "Welcome to the command center"
logo: "/assets/logo.png"  # Optional custom logo

Categories

Organize services into categories:

categories:
  - name: "Category Name"
    icon: "mdi:folder"
    services:
      # ... services

Service Options

Each service supports:

Option	Description
name	Display name
url	Link URL
icon	Icon identifier
description	Short description
target	Link target (_blank, _self)

Icons

Starbase 80 supports various icon sources:

Source	Format
Material Design Icons	mdi:icon-name
Simple Icons	si:icon-name
URL	Full image URL
Local	Path to local file

Customization

Custom Styling

Add custom CSS by modifying the theme:

theme:
  primaryColor: "#00ff00"
  backgroundColor: "#0a0a0a"
  cardColor: "#1a1a1a"

Adding Custom Icons

Include custom icon files:

1. Add icons to your repository
2. Reference in configuration
3. Rebuild the container

Layout Options

Adjust the dashboard layout:

layout:
  columns: 4  # Number of columns
  gap: "1rem"  # Gap between cards

Best Practices

Organization

• Group related services together
• Use consistent icon styles
• Write clear descriptions
• Order by frequency of use

Maintenance

• Version control your configuration
• Document your services
• Update links when services move
• Review periodically for outdated entries

Example Configurations

Home Media Server

categories:
  - name: "Streaming"
    services:
      - name: "Plex"
        url: "https://plex.local"
        icon: "mdi:plex"
      - name: "Jellyfin"
        url: "https://jellyfin.local"
        icon: "mdi:jellyfish"

  - name: "Downloads"
    services:
      - name: "Radarr"
        url: "https://radarr.local"
        icon: "mdi:movie"
      - name: "Sonarr"
        url: "https://sonarr.local"
        icon: "mdi:television"
      - name: "Prowlarr"
        url: "https://prowlarr.local"
        icon: "mdi:magnify"

Development Environment

categories:
  - name: "Source Control"
    services:
      - name: "GitLab"
        url: "https://gitlab.local"
        icon: "mdi:gitlab"
      - name: "Harbor"
        url: "https://harbor.local"
        icon: "mdi:docker"

  - name: "CI/CD"
    services:
      - name: "Jenkins"
        url: "https://jenkins.local"
        icon: "mdi:robot"
      - name: "ArgoCD"
        url: "https://argocd.local"
        icon: "mdi:kubernetes"

Troubleshooting

Configuration Not Loading

• Verify YAML syntax is correct
• Check file path in Dockerfile
• Review container logs

Icons Not Displaying

• Verify icon identifier format
• Check icon source is accessible
• Try alternative icon source

Styling Issues

• Clear browser cache
• Check custom CSS syntax
• Verify theme configuration

Additional Resources

• Starbase 80 GitHub Repository
• Material Design Icons
• Simple Icons
• Klutch.sh Deployments

Conclusion

Deploying Starbase 80 on Klutch.sh gives you a beautiful, functional dashboard for all your self-hosted services. With its sleek retro-futuristic design and simple YAML configuration, Starbase 80 provides a stylish command center for your homelab or server infrastructure. Access all your services from one memorable URL with a dashboard that looks as good as it works.