Avant de lire !
Cette documentation va expliquer étape par étape comment générer un site web avec HzMycelium, mais attention !!!
▒ Ici, le but c'est d'accompagner toustes les artistes depuis le début, donc partant d'un niveau de connaissances techniques de ZÉRO.
Si tu es déjà à l'aise avec le système de dépôt sur git, l'utilisation et le lancement de scripts Python, tu vas pouvoir sauter une grosse partie des explications du début (cool).
▒ Toute cette page est aussi dispo sous la forme d'un tuto sur YouTube, pour celleux qui préfèrent ! Ce sera peut-être plus facile à suivre.
▒ Je travaille sur Windows, donc les images pour illustrer la doc le seront aussi, mais je préciserai quand des manipulations seront différentes sur Mac (si t'es sur Linux t'es déjà habitué·e à trouver les réponses tout·e seul·e)
▒ Je te conseille d'éteindre la lumière en bas à gauche de l'écran (ou tout en haut sur mobile). L'effet est marrant mais c'est pas le top pour lire à la longue :)
Mise en place avec Python
Si tu sais déjà créer un environnement virtuel et installer les requirements.txt, tu peux télécharger le dossier sur Codeberg et passer directement à la présentation de l'outil !
Avec HzM, on va surtout travailler depuis le terminal. Je sais que l'interface est rude, ça fait un peu peur et c'est un fonctionnement différent auquel il faut s'habituer, mais tu vas voir qu'en expliquant bien on s'habitue très vite et y'a rien de trop compliqué en fait.
▓ Télécharger le script depuis Codeberg
Il y a juste à aller sur la page Codeberg du projet, cliquer sur les trois petits points à droite au-dessus de la liste des fichiers, et choisir «Télécharger le ZIP».
Juste pour information, voilà tout ce qu'il y a dans ce dossier :
▒ les fichiers python qui forment le script
▒ le fichier requirements.txt qui liste les librairies à installer pour fonctionner correctement
▒ les templates pour choisir l'apparence du site
▒ un modèle du dossier artiste que tu pourras utiliser pour remplir les infos de ton site
▓ Installer Python
Ensuite, on va devoir installer Python sur ton ordinateur. Le plus simple c'est de le faire depuis le site officiel, en prenant la dernière version en date (normalement proposée par défaut).
Une fois l'installeur téléchargé et exécuté, on va juste vérifier que Python est bien détecté par l'ordinateur.
En ouvrant le terminal et en entrant simplement la commande «python --version», la version que tu viens de télécharger devrait s'afficher.
Si tout est ok, tu peux passer à l'étape suivante !
Si le terminal t'a renvoyé une erreur, il va peut-être falloir indiquer à ton ordinateur où aller chercher Python. Ça va se faire en ajoutant une variable d'environnement système, plus précisément dans le path.
C'est terrifiant écrit comme ça mais en suivant les étapes de ce tuto tout devrait bien se passer (pour Linux et Mac il faut descendre un peu plus sur la page).
Une fois que le terminal a bien accès à Python, go suivant !
▓ Créer un environnement virtuel
Le nom du dossier n'a pas d'importance, mais petit conseil : quand on travaille avec ce genre d'outil, il vaut mieux garder ses noms de fichiers les plus «propres» possibles. Pas de majuscules, d'accents ou de caractères spéciaux, et les espaces sont remplacés par des tirets du 6 ou du 8 (- ou _).
Exemple : «J'ai passé 10 heures sur le mix !.mp3» devient «j_ai_passe_10_heures_sur_le_mix.mp3».
Normalement le script prévoit ce cas de figure et nettoie les noms des fichiers pour ne pas que ça casse, mais c'est toujours bien de prendre l'habitude au cas où.
Ça se fait avec la commande « cd » + le chemin d'accès au dossier
cd chemin/dacces/au/dossier
On voit que l'adresse à laquelle s'exécute la commande a changé et affiche maintenant le nom de notre dossier, ce qui indique qu'on se situe bien dedans. Pour faire fonctionner le générateur, le script Python a besoin d'accéder à plein de librairies extérieures qu'il va falloir installer (le fichier requirements.txt dont on parlera juste après).
Pour éviter qu'elles aillent se mettre n'importe où dans ton ordinateur, on va créer un dossier : l'environnement virtuel (que je vais abréger en venv, c'est plus court), qui va stocker tous ces modules. Pour ça, on entre cette commande dans le terminal, qui est toujours la même à peu près partout :
python -m venv venv
Le deuxième « venv » sert à nommer le dossier, ça pourrait être n'importe quoi d'autre mais la norme c'est de garder ça, c'est plus simple.Le venv est créé, maintenant il va falloir l'activer pour qu'on puisse travailler dedans, dans son contexte.
Ça se fait avec cette commande sur Windows :
./venv/Scripts/activate.ps1
Et celle-là sur Mac :source venv/bin/activate
Si un gros message rouge terrifiant est apparu, c'est que ton ordinateur bloque l'exécution des scripts (plutôt logique, en temps normal on évite de lancer des scripts inconnus comme ça). Pour contourner cette règle (dans cette fenêtre de terminal seulement), copie et entre cette commande (sur Windows uniquement):Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process -Force
Une fois que cette commande est entrée, réécrire la commande d'activation donnée plus haut devrait activer le venv, ce qui est indiqué par un petit «(venv)» vert avant le chemin.
▓ Installer les librairies requises (requirements)
Heureusement pour ne pas les installer une par une, Python a un outil, Pip, qui permet de gérer l'installation des librairies en le faisant en une seule commande :
python -m pip install -r requirements.txt
Normalement l'installation devrait se terminer sans problème, mais si tu veux vraiment vérifier que tout est ok, tu peux rentrer cette toute petite commande pour faire la liste des paquets installés et comparer avec ceux indiqués dans le requirements.txt.
pip list
Utiliser HzMycelium (enfin)
▓ Présentation des templates
▒ une page d'accueil avec présentation de l'artiste, liste des sorties, liens vers les réseaux...
▒ une page par sortie avec les morceaux, un player audio, et l'affichage aléatoire d'images pendant l'écoute des morceaux
Choisir une template définit l'aspect GÉNÉRAL de ton site : deux pages de sorties différentes ne pourront pas utiliser une template chacune.
(ça pourrait être rendu possible si vraiment trop de gens sont frustré·es par ce choix, mais ça compliquerait les choses, au niveau du code mais surtout au niveau de la cohérence graphique des sites)
Voilà les trois templates, avec trois exemples d'utilisation chacune :▒ Hyphe :
En lançant un morceau, les images forment un scroll infini en bas de la page, position et taille aléatoires. Exemple de site généré avec la template Hyphe ici !
▒ Spore :
Les images sont placées en nuage 3D navigable pendant la lecture des morceaux. Exemple de site généré avec la template Hyphe ici !
▒ Psilo :
En lançant un morceau, les images s'accumulent sur l'écran jusqu'à le recouvrir. Position, taille et rotation aléatoires. Exemple de site généré avec la template Hyphe ici !
▓ Polices de caractères
(encore une fois ça pourrait être rendu possible, cette fois beaucoup plus facilement au niveau du code, mais je ne pense pas que ce soit une bonne idée graphiquement).
Il y a cinq polices au choix (pour l'instant ?) :
Wondertype
Actuellement utilisée par ce site :) Une sérif, avec des jolis détails pour les gros titres.
Inter Semibold
Sans sérif passe-partout, ultra sobre mais ultra efficace et lisible, impossible de se tromper.
GNF
Police en pixels qui imite celle de Minecraft, pour coller avec les univers numériques des scènes underground !
La Machine Company
À utiliser avec précaution, pour aller avec des identités visuelles très FORTES et expressives.
MBA Mono Sice
Pour les personnes qui trouvaient que la GNF était un peu trop sage, c'est la version un cran au-dessus.
▓ Palette de couleurs
Que ce soit pour la page d'accueil ou pour une page de sortie, le fonctionnement d'une palette de couleurs est toujours le même. Il y a quatre paramètres à écrire, un pour chaque couleur, mais on verra cette partie technique plus tard, pour l'instant on veut juste savoir ce qu'ils déterminent.
▒ la couleur principale
Sur toutes les templates, elle détermine la couleur du player en bas de l'écran (même si elle ne sert qu'à ça, ça donne le ton de la page, d'où le nom «principale»). Sur Psilo, elle est aussi utilisée dans pas mal de détails de l'interface comme les bordures des boites, les boutons lecture/pause, et les liens de la page d'accueil.
▒ la couleur secondaire
Elle est utilisée dans les détails de l'interface. La barre de progression pendant l'écoute d'un morceau, les liens vers d'autres sites... On s'en sert soit pour contraster, soit pour venir en complément de la couleur principale.
▒ la couleur du fond
Le nom dit tout, c'est juste le fond de la page.
▒ la couleur de la police
Pareil, le nom dit tout. Dans beaucoup de palettes, la couleur de la police ne compte pas vraiment comme une couleur : tu verras qu'il est plus efficace (et plus joli) qu'elle soit la même que la couleur principale, ou qu'elle reste noire ou blanche pour contraster suffisamment avec le fond.
HzM n'impose pas de limitations sur la palette de couleurs, donc ça peut être difficile d'en trouver une jolie et lisible à la fois.
Le plus simple c'est sûrement de la prendre directement depuis ta cover. Avec un outil comme un color picker, choisis les trois/quatre teintes les plus présentes et teste les différentes associations entre elles.
Évidemment, pense toujours à garder un contraste entre ta couleur de fond et celle de la police pour que ce soit lisible. Tu peux utiliser une couleur de fond très forte (rouge vif par exemple) à condition que celle de la police soit plus terne en comparaison (noir ou rouge très foncé, voire blanc si ça fonctionne). Inversement, si tu veux une couleur de police flashy (vert fluo, bleu fluo...), garde une couleur de fond sombre.
▓ Organisation des dossiers (audios, images...)
Dans le zip téléchargé plus tôt, il y avait un dossier nommé «artiste», qui est celui qui sera utilisé par le script (attention à ne pas le renommer !). Il contient déjà une arborescence type qui montre le modèle à suivre pour organiser les fichiers :
Au niveau 0 de l'aborescence, donc en entrant dans le dossier principal, on trouve : ▒ le fichier config_artist pour la page d'accueil (on parlera de ça juste après)
▒ la photo de l'artiste qui sera utilisée sur la page d'accueil
▒ un dossier pour chaque sortie (album, ep, ou même single si tu veux)
En entrant dans le dossier d'une sortie, on trouve :
▒ tous les audios de tes morceaux
▒ le fichier config_release pour cette page
▒ le fichier image pour la cover
▒ le fichier image pour la cover
▒ le dossier «medias» dans lequel sont stockées toutes les images qui apparaîtront pendant la lecture d'un morceau. Leur nom n'a pas d'importance. Si tu ne veux pas d'images pendant l'écoute, laisse le dossier vide !
Les éléments indiqués en violet sur le schéma sont ceux qui peuvent (et même doivent) être renommés comme tu veux, donc les noms des sorties pour chaque dossier, et des morceaux pour chaque fichier audio.
Pour tous les autres fichiers ou dossiers, il faut bien respecter les noms indiqués et ne PAS LES RENOMMER, sinon le script ne pourra plus les détecter :(
Voici un exemple d'arborescence sous Windows :
Dossier artiste principal
À l'intérieur du dossier «3_la_pieuvre» Truc cool à noter : comme on est sur le web, on peut faire un peu ce qu'on veut avec les formats et les dimensions d'images. Ça veut dire que les covers des sorties ne sont pas obligatoirement carrées (ratio 16:9, 9:16, 4:3...), ou qu'elles peuvent même être animées avec des fichiers .gif !
▓ Écriture des fichiers configs
Un fichier config se compose en deux parties : les clés et les valeurs.
Une clé, c'est la partie avant les deux points, qui définit l'information qu'on va donner. Pour une sortie, on a besoin du titre de l'album, des artistes ayant participé, de la date de sortie etc. Ce sont les clés qui sont déjà écrites dans les fichiers du zip.
Tout ce que tu as à faire, c'est d'écrire les informations de ta sortie après les deux points : ce sont les valeurs de ces clés. Puis évidemment enregistrer le fichier pour que les modifications soient prises en compte.
release_title: J'ai passé 10 heures sur le mix
release_date: 01/01/2026
Pourquoi récupérer les infos comme ça et pas directement depuis le titre du fichier ? Déjà parce que ça permet l'utilisation d'accents, de caractères spéciaux etc dans les titres des morceaux, mais aussi parce que ça permet de regrouper beaucoup plus d'informations, notamment celles relatives au style du site.
Pas de pression si tout n'est pas parfait en remplissant les fichiers ! Tu peux faire des tests, refaire tourner le script pour générer le site autant de fois que tu veux. Commence par remplir une première version des configs, regarde comment ça rend et modifie petit à petit.
▒ Remplir la config artiste
Puisque ce fichier config sert pour la page d'accueil, il n'y aura besoin de la remplir qu'une seule fois !Valeurs à remplir :
▒ nom de l'artiste (toi quoi)
artist: XXXXXX
▒ description de l'artiste
artist_description: XXXXXX XX XX XXXXXXX XXX XX XX XXXXX X
▒ liens vers des réseaux sociaux.
Ici c'est plus compliqué puisque tu pourras ajouter le nombre de liens que tu veux. La syntaxe est un peu différente puisqu'on crée un dictionnaire «links» qui, lui, va stocker des valeurs et des clés que tu détermines. Ce sont les noms des clés que tu écris qui seront affichés sur ta page d'accueil.
Il faut faire
links:
Spotify: https://XXXXXXX
Deezer: https://XXXXXXX
YouTube: https://XXXXXXX
Mon autre site web super cool: https://XXXXXXX
etc
▒ choix de la template
template: Hyphe
outemplate: Spore
outemplate: Psilo
▒ choix de la police. J'ai raccourci le nom de certaines polices pour éviter de se tromper dans l'ortographe, les espaces etc.
font: Wondertype
font: Inter
oufont: GNF
oufont: LaMachine
oufont: MBA
▒ couleur principale
maincolor: #ffffff
▒ couleur secondaire
secondarycolor: #ffffff
▒ couleur du fond
backgroundcolor: #ffffff
▒ couleur de la police
fontcolor: #ffffff
Si t'es paumé·e sur ce que sont ces 4 valeurs, il faut lire la partie sur la palette de couleurs.
Toutes les couleurs sont écrites en code hexadécimal, donc pense à inclure le dièse (je sais on dit croisillon askip).
Ooook tous les paramètres pour la config artiste sont là ! Le fonctionnement est à peu près le même pour les configs des sorties, mais il y a quelques différences à noter.
▒ Remplir une config release
Pour chaque page de sortie, il faudra remplir le fichier config qui lui est associé.▒ nom de l'artiste (ou des artistes)
release_artist: XXXXXX(, XXXX)
▒ titre de la sortie
release_title: XXXXXX
▒ date de publication de la sortie. Le format jj/mm/année n'est pas obligatoire, tu peux y écrire n'importe quoi comme «quelque part, l'été dernier» !
release_date: XX/XX/XXXX
▒ description de la sortie. Raconte une histoire, crédite les personnes ayant participé, donne des détails sur les morceaux...
release_description: XXXXXX
▒ morceaux.
Ici, c'est presque pareil que pour les liens dans la config artiste, mais au lieu d'un dictionnaire, c'est une liste que tu vas remplir pour y ajouter les morceaux de ta sortie.
Je sais que tout est déjà écrit dans les titres des fichiers et que c'est pas hyper pratique de les réécrire ici, mais pour permettre les accents et caractères spéciaux, pas d'autre choix...
Si on voulait déterminer l'ordre des morceaux depuis cette liste, il faudrait check si les titres des fichiers audios correspondent à l'élément de la liste, donc aucune faute d'ortographe possible, bref c'est l'enfer. Si quelqu'un a une meilleure solution contactez-moi :)
release_tracks:
- XXXXXX
- XXXXXX
- XXXXXX
etc
▒ couleur principale.
Pour la palette de couleur c'est exactement le même fonctionnement que dans la config artiste !
maincolor: #ffffff
▒ couleur secondaire
secondarycolor: #ffffff
▒ couleur du fond
backgroundcolor: #ffffff
▒ couleur de la police
fontcolor: #ffffff
▓ Écriture de la commande pour lancer le script
▓ Ouvrir, vérifier, modifier le site généré
▓ Hébergement du site
Questions et réponses
▓ J'ai pas d'images à mettre dans mon dossier médias, je peux en trouver où ?
Il y a pas mal de sites qui mettent à disposition des images du domaine public, ça conviendra pas à tout le monde mais ça vaut le coup d'aller chercher là-bas :
▒ Musée de Chicago : attention à bien taper «public domain» dans leur barre de recherche.
▒ Librairie du Congrès de Washington : catalogue assez grand, trié selon plein de catégories
▒ Bibliothèque Nationale de France. Attention à cocher le paramètre «libre de droit» dans la recherche, juste au cas où.
/!\ Je recommande pas vraiment Pinterest pour plusieurs raisons. L'algorithme de recommandation est certes très puissant et recommande plein d'images similaires, donc ça fait envie pour se constituer un dossier très joli en 5 minutes.
C'est déjà assez risqué car la provenance et les auteur·ices des images sont très rarement crédité·es, donc assez problématique au pire et pas franchement sympa au mieux.
Ensuite, je trouve que les images présentes et recommandées ont tendance à se répéter, et à perdre en originalité, aussi à cause de cet algorithme peut-être trop efficace. Je trouve ça beaucoup plus intéressant de regrouper soi-même un ensemble d'images qu'on trouve cools, sans qu'elles soit servies sur un plateau.
▓ Pourquoi mes sons sont disponibles en téléchargement ???
C'est un choix que j'ai fait pour rester dans cette démarche d'écosystème indépendant et de circulation des morceaux. On est sur internet, tout se partage, se réutilise, et est accessible librement d'une manière ou d'une autre (même si une personne ou plutôt une entreprise veut vous empêcher d'accéder à des fichiers, il y aura toujours un moyen de les récupérer).
De toute façon, si vous publiez vos morceaux sur YoutubeMusic (proposé par Distrokid), tout le monde peut les télécharger avec un simple convertisseur Youtube vers mp3, alors autant simplifier les choses dès le début :)
Profitez-en pour faire des remix, des playlists, les graver sur des CDs, des K7 !!!
▓ J'ai envie de modifier quelque chose sur mon site qui n'est pas prévu par les templates :(
Bonne nouvelle, c'est possible ! Il va juste falloir mettre les mains dans la machine en allant fouiller dans les fichiers HTML ou CSS.
Si tu maîtrises déjà le web, c'est super : t'auras juste à travailler sur ton dossier généré (built_site) comme sur n'importe quelle page web.
Si la mention de HTML et CSS t'as fait paniquer, ça va prendre un peu plus de temps, mais t'inquiètes. Ce sont des langages de programmation simples à comprendre, avec des milliers de tutos et forums adressés aux débutant·es qui partent de zéro.
Je parle rapidement des notions de base dans la documentation, c'est déjà un point de départ qui te permettra de modifier pas mal de trucs !
▓ J'ai trouvé un bug / j'ai envie de faire quelque chose qui ne fonctionne pas ou qui n'est pas prévu
Ça devait arriver, et franchement ça m'étonne pas ! Comme je suis pas développeur à la base, il y a plein de cas de figure et de façon d'utiliser l'outil que je n'ai pas prévu.
Si la réponse au problème ne se trouve pas dans la documentation, contacte-moi via un des liens en bas de la page et j'essaierai de répondre et d'aider.
Si c'est un bug, merci de me le signaler, il faut que je corrige ça !
Si c'est une fonctionnalité qui n'existe pas, c'est peut-être quelque chose sur lequel je peux travailler pour l'ajouter et en faire profiter tout le monde !
Fonctionnalités futures ? (roadmap)
Fonctionnalités prévues, ou que j'aimerais bien implémenter dans le futur.▒ écrire en Markdown dans les fichiers config, notamment pour les descriptions : remplacer les balises br en HTML.
▒ webrings : mettre en place un dictionnaire dans la config artiste :
friend_links: nom_artiste: lien_artiste nom_artiste: lien_artiste etc
▒ sur Spore, les images se mettent à tourner lentement si aucune interaction avec le canvas
Ressources et outils utilisés :
▒ AmplitudeJS et leur documentation ultra pratique pour toute la partie audio
▒ ThreeJS et cet exemple par Julien Bidoret pour la disposition d'images sur la template Spore
▒ cet exemple pour attraper et bouger les images sur la template Psilo
Les ressources, exemples et liens vers les forums dont je me suis servi sont aussi crédités en commentaires dans les fichiers HTML, CSS, JS, Python etc (quand j'ai pensé à le faire).
Polices utilisées :
▒ Wondertype par Clémence Fontaine
▒ Inter Semibold par Rasmus Andersson
▒ GNF par Nyt Rock
▒ La Machine Company par Woodcutter
▒ MBA Slice Mono par Maksym Baluiev