Installer Homepage
Pour créer une page pour ses applications avec Homepage, on va devoir rajouter à notre stack le conteneur officiel de gethomepage:
homepage:
image: ghcr.io/gethomepage/homepage:latest
container_name: homepage
ports:
- 3000:3000
volumes:
- /chemin/vers/config:/app/config
- /var/run/docker.sock:/var/run/docker.sock
environment:
- HOMEPAGE_ALLOWED_HOSTS=*
Faites bien attention à modifier /chemin/vers/config par l’emplacement où vous souhaitez conserver les fichiers. Si vous avez suivi le guide de Création d’un média-center avec Jellyfin, Sonarr, Radarr et Prowlarr, cela devrait ressembler à /home/votre-user/server/configs/homepage
Configurer Homepage
Pour configurer Homepage, on va devoir modifier directement ses fichiers de configuration, services.yaml, settings.yaml, bookmarks.yaml et widgets.yaml. Ces fichiers se trouve dans le dossier config que vous avez spécifié précédement.
Pour plus de simplicité, vous pouvez utiliser Visual Studio Code avec l’extension Remote – SSH, comme ca vous pourrez directement modifier les fichiers.
Avant toute chose, nous allons aussi modifier le fichier docker.yaml afin de faire fonctionner les intégrations Docker avec Homepage. Rajoutez ceci dans le fichier:
my-docker:
socket: /var/run/docker.sock
Configurer widgets.yaml
widgets.yaml est là où vous pouvez mettre en place des widgets d’information, qui seront toujours au-dessus des icones des widgets de vos autres services, comme par exemple un titre, la météo, les ressources sytème, etc…
- logo:
- openweathermap:
label: Current
units: metric
apiKey: votre-clé-API
cache: 5
- greeting:
text_size: xl
text: Bienvenue sur mon serveur
- resources:
expanded: true
cpu: true
memory: true
uptime: true
- resources:
label: Média Disque
expanded: true
disk: /dev/sda1 #à modifier
- resources:
label: OS Disque
expanded: true
disk: /dev/sdb1 #à modifier
Attention ! Si vous voulez afficher vos disques, vous devez les liés à votre conteneur, pour cela ajouter, comme par exemple, /:/mnt/os:ro pour le disque de votre sytème, et /mnt/data:/mnt/media:ro pour le disque de vos médias. Utilisez la commande df pour voir les ponts de montage de vos disques.
Configurer services.yaml
services.yaml est le fichier où vous pourrez créer vos icones de services pour de vrai, comme Radarr, Sonarr, etc… Le fichier suit le format suivant:
- nom de la catégorie:
- nom du service:
href: le lien externe ouvert lors du clique sur celui-ci
description: la description
icon: le lien vers l'icone
ping: le lien pour avoir le ping à votre service
server: my-docker
container: le nom du conteneur du service, généralement le même
widget:
type: le type du service
url: le lien entre conteneur
key: une clée API si nécessaire
Par exemple, avec l’image d’introduction, le fichier ressemblerait à ça pour la catégorie média:
- Media:
- Jellyfin:
href: https://jellyfin.domain.com/sso/OID/p/authentik #ici, le lien diffère car j'utilise le plugin SSO
description: Media Server
icon: jellyfin.png
ping: https://jellyfin.domain.com
server: my-docker
container: jellyfin
widget:
type: jellyfin
url: http://jellyfin:8096
key: clé API
enableBlocks: true
enableNowPlaying: false
- Ombi:
href: https://ombi.domain.com
description: Media Requests
icon: ombi.png
ping: https://ombi.domain.com
server: my-docker
container: ombi
widget:
type: ombi
url: http://ombi:3579
key: clé API
- Jellystat:
href: https://jellystat.domain.com
description: Jellyfin Stats
icon: jellystat.png
ping: https://jellystat.domain.com
server: my-docker
container: main-jellystat-1
Les icones sont incluses et proviennent soit de Dashboard Icons, en utilisant nom-de-l’icone.png, soit de Material Design Icons, en utilisant mdi-nom-de-l’icone.png ou encore de Simple Icons, en utilisant si-nom-de-l’icone.png
Certain widget inclu des options supplémentaires donc allez voir la liste de tous les types de widgets présent. Ici, Jellystat n’a pas de widget car il n’en existe pas.
Configurer bookmarks.yaml
Les bookmarks fonctionnent principalement comme les services, mais ils sont bien plus simple, plus petits, et ne contiennent seulement un lien. Vous pouvez utiliser des abréviations ou des icones. Par exemple:
- Developer:
- Github:
- abbr: GH
href: https://github.com/
- Social:
- Reddit:
- icon: reddit.png
href: https://reddit.com/
description: The front page of the internet
- Entertainment:
- YouTube:
- abbr: YT
href: https://youtube.com/
Configurer settings.yaml
Dans settings.yaml vous allez pouvoir modifier la mise en page et l’esthétique générale. Vous pourrez modifier le nombre de colonne par ligne, rajouter un arrière plan, le style de l’entête, etc… Par exemple:
background:
image: https://images.unsplash.com/photo-1502790671504-542ad42d5189?auto=format&fit=crop&w=2560&q=80
brightness: 75
layout:
home:
style: row
columns: 4
header: false
Media:
style: row
columns: 3
icon: mdi-play
Media Management:
style: row
columns: 3
icon: mdi-multimedia
File Management:
style: row
columns: 3
icon: mdi-folder
Network Management:
style: row
columns: 2
icon: mdi-wifi
Calendar:
icon: mdi-calendar-month
Other:
style: row
columns: 2
icon: mdi-dots-horizontal
headerStyle: clean
useEqualHeights: true
hideVersion: true
La liste de toutes les options disponibles se trouve sur le site de homepage.
Bravo ! Vous savez maintenant comment créer une page pour ses applications avec Homepage. IL ne vous reste plus qu’à exploré toutes les options et libérez votre créativité.
Maintenant, si vous avez déjà suivi le guide pour Accéder à son serveur depuis internet avec NPM et Cloudflare, il est recommandé d’aller voir Comment sécurisez vos services grâce au Fournisseur d’Identité Authentik, par souci de sécurité de votre page d’accueil.