Installation homepage avec Docker

Introduction

homepage est un concentrateur de liens statique auto hébergé très simple à configurer avec un simple fichier en ‘yaml’. Il vous permettra d’accéder rapidement à tous vos services ou sites internet préférés. Je l’utilise pour accéder de façon conviviale à tous les containeurs de mon Homelab. Il n’est pas le seul outil dans cette catégorie (voir article installation homer) mais il a l’avantage d’être très léger, rapide et customisable.

Voici ce que vous pourrez obtenir après quelques minutes de configuration :

Pour cette installation j’utilise l’image officielle qui est présente ici : github.com/gethomepage/homepage.

Remarque : J’ai créé au préalable un utilisateur omdocker (voir l’article création d’un utilisateur). J’ai créé aussi un répertoire qui contiendra toutes mes installations docker. Dans ce blog, j’utiliserais pour exemple le chemin /volume/docker.

Nous allons créer aussi le répertoire ‘homepage’ en ligne de commande sur le NAS (connexion en SSH) dans notre répertoire docker : /volume/docker. Cette étape est facultative, le containeur créera le répertoire automatiquement lors du déploiement si celui-ci n’existe pas.

cd /volume/docker
mkdir homepage

Le fichier de configuration

Si vous souhaitez sécuriser le lancement de ‘homepage‘, je vous engage à parcourir l’article sécuriser Docker.

Il est important de bien respecter l’indentation des fichiers de configurations : pas de tabulation. Attention aussi à la version du fichier, il y a des légères évolutions de syntaxe d’une version à l’autre.

Le fichier yml en détails. Il faut remplacer pour votre configuration :

port 8200 : numéro de port par défaut pour accéder à l’interface avec votre navigateur,
ip_local : à remplacer par l’adresse IP de votre serveur Docker,
TZ : Votre zone de temps,
/data/docker : Le chemin vers le répertoire de votre application.

Remarque : Si vous voulez utiliser les ‘widgets’, il faudra installer le container en tant que root et monte le volume /var/run/docker.sock en lecture seule. Il est déconseillé de le faire pour un accès extérieur sans ‘Reverse-proxy’ comme Nginx/Swag.

Remarque : Dans le cas ou vous n’avez pas besoin des widgets, vous pouvez installer le container en tant qu’utilisateur. Il faudra alors rajouter dans les variables d’environnements, le ‘PUID’et le ‘PGID’.

    version: "3.3"
    services:
      homepage:
        image: ghcr.io/gethomepage/homepage:latest
        container_name: homepage
        environment:
          - TZ=Europe/Paris
        ports:
          - ip_local:8200:3000
        volumes:
          - /data/docker/config/homepage:/app/config
          - /data/docker/config/images:/app/public/images     # optionnel
          - /data/docker/config/icons:/app/public/icons       # optionnel
          - /var/run/docker.sock:/var/run/docker.sock:ro      # optionnel
        restart: unless-stopped

Vous copiez le contenu de ce fichier dans votre interface de gestion Portainer en allant dans ‘Stacks‘ et ‘Add stack‘.

Donnez un nom à votre pile, par exemple ‘homepage‘, puis déployer cotre containeur en cliquant en bas sur ‘Deploy the stack’.

Après une phase de téléchargement de l’image, puis d’installation de l’application, vous devriez arriver sur cet écran si tout s’est bien passé :

Nous pouvons maintenant nous connectez à ‘homepage’ localement avec l’URL http://IP_SERVER:8200 (l’adresse et le port est a adapté suivant votre fichier de configuration).

Configuration de Homepage

La configuration du tableau de bord s’effectue via des fichiers aux formats ‘yaml’. Vous pouvez personnaliser le thème de votre tableau de bord grace à un fichier de customisations du ‘css’ et ‘javascript’.

Il y a plusieurs fichiers utilisés pour la configuration :

settings.yml : contient la configuration globale du tableau de bord,
services.yaml : contient vos services configurés,
bookmarks.yaml : contient des simples liens,
widhets.yaml : contient les widgets.

fichier settings.yml

Ce fichier permet de définir l’agencement des services pour votre tableau de bord. Voici le mien :

    --
    # For configuration options and examples, please see:
    # https://gethomepage.dev/latest/configs/settings

    theme: dark
    title: HomeLab yannick.lan
    #background: /images/fond.png
    language: fr
    headerStyle: clean
    showStats: true

    providers:
    openweathermap: openweathermapapikey
    weatherapi: weatherapiapikey

    layout:
    Zone DMZ:
        style: row
        columns: 4
    Docker:
        style: row
        columns: 4
    Incus1 LXC:
        style: row
        columns: 4
    Incus2 LXC:
        style: row
        columns: 4
    Serveurs:
        style: row
        columns: 4

Je définis 4 services par ligne pour chaque séction.

fichier services.yaml

Ce fichier est utilisé pour définir chaque service de mon tableau de bord. Je vous met un extrait du fichier, La logique est la même pour chaque section :

Remarque : Le service ‘Jellyfin’ utilise un ‘widget’ pour l’affichage des statistiques.

    - Zone DMZ:
        - Hugo:
            href: https://omvprox.cloud.yannickinformatik.fr/
            description: Homelab proxmox
            icon: /icons/hugo.png
        - Portainer:
            href: http://192.168.3.12:9000
            description: Docker supervisor
            icon: portainer.png
        - FileBrowser:
            href: https://xx.subdomain.domain.tld/
            description: Partage de fichiers FileBrowser
            icon: /icons/filebrowser.png
        - Matomo:
            href: https://xx.subdomain.domain.tld/
            description: Analyse sites Internet
            icon: matomo.png
        - Authelia:
            href: http://192.168.3.19/
            description: Portail identification
            icon: authelia.png
        - Gitea:
            href: https://xx.subdomain.domain.tld/
            description: Lightweight DevOps Platform
            icon: gitea.png
        - Nextcloud:
            href: https://xx.subdomain.domain.tld/
            description: Personnal Cloud
            icon: nextcloud.png
            # ... etc... section 1
    - Docker:
        - Portainer:
            href: http://192.168.2.252:9000
            description: Docker supervisor
            icon: portainer.png
        - Grafana:
            href: http://192.168.2.252:8204
            description: Create graph
            icon: grafana.png
        # .. etc... 
    - Incus1 LXC:
        - Jellyfin:
            href: http://192.168.2.53:8096/
            description: Streaming multimédia
            icon: jellyfin.png
            widget:
            type: jellyfin
            url: http://192.168.2.53:8096
            key: yourkey
            enableBlocks: true # optional, defaults to false
            enableNowPlaying: true # optional, defaults to true
        # ... etc...

Fichier bookmarks.yaml

Ce fichier contient des simples liens qui seront placés par défaut en bas de votre tavbleau de bord.

    - LAN:
        - Ban and Block:
            - abbr: BnB
            href: http://192.168.2.59/main/
        - Compta:
            - abbr: CP
            href: http://192.168.2.55/main/
        - YannickInformatik:
            - abbr: YI
            href: http://192.168.2.54/
        - SecuNAS:
            - abbr: SN
            href: http://192.168.2.249:8250/
        - HomeLab Proxmox:
            - abbr: HL
            href: http://localhost:1313/
        - Creality K1:
            - abbr: K1
            href: http://192.168.2.170/

    - Social:
        - FaceBook:
            - icon: facebook.png
            href: https://facebook.com/
        - Twitter:
            - icon: twitter.png
            href: https://twitter.com/
    #... etc...