Skip to content

Ansible role to run a simple, static site that shows an overview of available services.

License

Notifications You must be signed in to change notification settings

mother-of-all-self-hosting/ansible-role-hubsite

Repository files navigation

Hubsite

status-badge

Hubsite is an ansible role to run a simple, static site that shows an overview of available services.

It is powered by the official nginx docker image.

You can alternativly use it manually with

python cli.py render -i services_example.yml

How does it look?

A screenshot of hubsite hosting different services like Miniflux and Nextcloud. The site and service logos are expressed in grey an white tones

It uses prefers-color-scheme to automatically set the color scheme to light or dark. Check out this live preview to see an example with all pre-configured services.

Configuration

You can use the following variables to control your hubsite:

hubsite_enabled: true
hubsite_hostname: "example.com"
hubsite_title: "My services"
hubsite_subtitle: "Just click on a service to use it"

# Use `hubsite_service_list_auto` if you develop a playbook. A user can then add additional services via `hubsite_service_list_additional`

# Nextcloud
hubsite_service_nextcloud_enabled: "{{ nextcloud_enabled }}"
hubsite_service_nextcloud_name: Nextcloud
hubsite_service_nextcloud_url: "'https://{{ nextcloud_hostname }}{{ nextcloud_path_prefix }}"
hubsite_service_nextcloud_logo_location: "{{ role_path }}/assets/nextcloud.png"
hubsite_service_nextcloud_description: "Sync your files & much more"
hubsite_service_nextcloud_priority: 1000

# Peertube
hubsite_service_peertube_enabled: "{{ peertube_enabled }}"
hubsite_service_peertube_name: Peertube
hubsite_service_peertube_url: "'https://{{ peertube_hostname }}{{ peertube_path_prefix }}"
hubsite_service_peertube_logo_location: "{{ role_path }}/assets/peertube.png"
hubsite_service_peertube_description: "Watch and upload videos"
hubsite_service_peertube_priority: 1000

hubsite_service_list_auto: |
  {{
    ([{'name': hubsite_service_nextcloud_name, 'url': hubsite_service_nextcloud_url, 'logo_location': hubsite_service_nextcloud_logo_location, 'description': hubsite_service_nextcloud_description, 'priority': hubsite_service_nextcloud_priority}] if hubsite_service_nextcloud_enabled else [])
    +
    ([{'name': hubsite_service_peertube_name, 'url': hubsite_service_peertube_url, 'logo_location': hubsite_service_peertube_logo_location, 'description': hubsite_service_peertube_description, 'priority': hubsite_service_peertube_priority}] if hubsite_service_peertube_enabled else [])
  }}

If you don't have a fitting logo for your service just use logo_location': ''

Logos

There are some logos provided, so you can get started with a nice look immediately.

Service/Purpose Licence Author Changes made Use it with
Generic Docs Icon CCO moanos {{ role_path }}/assets/docs.png
Generic Shield CC0 moanos {{ role_path }}/assets/shield.png
Generic Mail Icon CCO moanos {{ role_path }}/assets/mail.png
Appsmith Apache License Appsmith contributers {{ role_path }}/assets/appsmith.png
Authentik CC-BY-SA 4.0 Jens Langhammer {{ role_path }}/assets/authentik.png
Docker Apache 2.0 dotCloud, Inc. {{ role_path }}/assets/docker.png
Firezone Apache License Firezone contributers {{ role_path }}/assets/firezone.png
Focalboard AGPL v.3.0 Mattermost, Inc. {{ role_path }}/assets/focalboard.png
FreshRSS AGPL v.3.0 FreshRSS contributors {{ role_path }}/assets/freshrss.png
Funkwhale CC BY-SA 3.0 Francis Gading {{ role_path }}/assets/funkwhale.png
Gitea CC BY-SA 4.0 Lauris BH {{ role_path }}/assets/gitea.png
GoToSocial CC BY-SA 4.0 Anna Abramek {{ role_path }}/assets/gotosocial.png
Grafana AGPL v3.0 Grafana Labs {{ role_path }}/assets/grafana.png
Healthchecks BSD 3-Clause Pēteris Caune and other contributors {{ role_path }}/assets/healthchecks.png
Jitsi Apache License 2.0 Jitsi contributers {{ role_path }}/assets/jitsi.png
Keycloak Apache License 2.0 Keycloak contributers {{ role_path }}/assets/keycloak.png
Lago AGPL v3.0 Lago contributers {{ role_path }}/assets/lago.png
Linkding MIT Linkding {{ role_path }}/assets/linkding.png
Miniflux CC-BY 4.0 Frédéric Guillot {{ role_path }}/assets/miniflux.png
Mobilizon AGPL v.3.0 Mobilizon contributers {{ role_path }}/assets/mobilizon.png
n8n Sustainable Use License n8n {{ role_path }}/assets/n8n.png
Navidrome GPL 3.0 Navidrome contributers {{ role_path }}/assets/navidrome.png
Nextcloud Public Domain Nextcloud {{ role_path }}/assets/nextcloud.png
Owncast MIT Owncast contributors {{ role_path }}/assets/owncast.png
Peertube Public Domain PeerTube contributors {{ role_path }}/assets/peertube.png
Prometheus Apache 2.0 - {{ role_path }}/assets/prometheus.png
Radicale GPL 3.0 Unrud {{ role_path }}/assets/radicale.png
Redmine CC-BY-SA 2.5 Martin Herr {{ role_path }}/assets/redmine.png
Semaphore MIT Castaway Consulting LLC {{ role_path }}/assets/semaphore.png
Syncthing MPLv2 Syncthing contributors {{ role_path }}/assets/syncthing.png
Uptime Kuma MIT Louis Lam {{ role_path }}/assets/uptime-kuma.png
Vaultwarden AGPL v3.0 Mathijs van Veluw {{ role_path }}/assets/vaultwarden.png
WG Easy custom Emile Nijssen {{ role_path }}/assets/wg_easy.png
Woodpecker CI Apache 2.0 Woodpecker contributors {{ role_path }}/assets/woodpecker.png

Custom CSS

If you want to provide custom styling (CSS), you can add it (by appending it on top of the default styles) via the hubsite_extra_css variable like this:

hubsite_extra_css: |
  html {
    background-color: #001a28;
    color: white;
  }

  .flexblock a {
      border: 5px solid #906000;
      padding: 20px;
      border-radius: 30px;
      margin: 15px;
      text-align: center;
      background-color: #046;
      width: 25%;
  }

  .logo {
      background-color: #046;
  }