Documentation

Avant de lire !

Cette documentation va expliquer étape par étape comment générer un site web avec HzMycelium, mais attention !!!

▒ Oui il y a beaucoup de texte :( Désolé j'essaie de faire court mais j'aime bien expliquer les choses en détails. C'est long pour les bonnes raisons, tout est détaillé pour que ce soit le plus simple possible à comprendre et utiliser, donc ça prend quelques lignes en plus.

▒ 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.
Toutes les étapes peuvent faire peur ou donner la flemme si c'est la première fois que tu touches à ce genre de choses, mais c'est plus facile et plus rapide que ce que tu penses (promis).

▒ 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, et je donne plein de conseils et d'explications supplémentaires.

▒ 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)

Mise en place avec Python

Toute cette partie détaille les étapes d'installation et de préparation nécessaires avant de pouvoir parler du générateur de sites.
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.
Peut-être qu'un jour je me chaufferai à bricoler une vraie interface avec des boutons etc, mais pour l'instant j'y connais rien.

▓ Télécharger le script depuis Codeberg

Le plus simple, c'est de commencer par télécharger tout le dossier qui contient le script et les éléments dont on aura besoin pour générer le site.
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 ».
Tu n'auras besoin de toucher qu'au dossier modèle « Artiste », mais juste pour information, voilà tout ce qu'il y a dans le zip :

▒ les fichiers python qui forment le script (main, build, buildpage, utils etc)

▒ le fichier requirements.txt qui liste les librairies à installer pour fonctionner correctement

▒ le dossier « Templates » dans lequel il y a les modèles pour l'apparence du site

▒ le fameux dossier modèle « Artiste » dans lequel tu vas travailler

▓ 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 (de préférence Windows Powershell qui devrait être installé par défaut) et en entrant simplement la commande « python --version », la version que tu viens de télécharger devrait s'afficher. python terminal 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

Maintenant, il va falloir choisir le dossier dans lequel on va travailler. Le plus simple, c'est de tout faire directement dans le dossier obtenu après l'avoir téléchargé depuis Codeberg. Tu peux le déplacer et le renommer si tu veux.

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ù.

Une fois que ton dossier est choisi, on va ouvrir une fenêtre du terminal et se déplacer dans le dossier.
Ç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. Bon ici on est sur mon bureau, c'est pas le top. Sur Windows tu peux copier le chemin d'accès à un dossier en faisant clic droit sur la barre du haut.

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.

▓ Activer l'environnement virtuel

Le venv est créé, il n'y aura plus besoin de le faire, c'était juste pour la première fois !
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. venv activé

/!\ Attention, l'environnement reste actif tant que tu gardes cette fenêtre de terminal ouverte, mais il faudra le remettre en route à chaque fois que tu ouvriras un nouveau terminal pour modifier ton site, ou le générer à nouveau...

▓ Installer les librairies requises (requirements)

Maintenant que le venv est créé et activé, on va pouvoir y installer les librairies Python dont le script a besoin pour fonctionner (ça aussi il n'y a besoin de le faire que la première fois).
Elles sont toutes listées avec leurs versions correspondantes dans le fichier requirements.txt, qui est présent dans le zip téléchargé.
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

Une fois cette commande rentrée, tu pourras mettre ta capuche et regarder les lignes défiler hyper vite comme les hackeurs dans les films.
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

C'est bon !!! On a fini toute la préparation pas très marrante, maintenant on peut passer à ce qui nous intéresse vraiment : organiser tes fichiers dans des dossiers pour en faire un site internet.

Utiliser HzMycelium (enfin)

Avant d'organiser tes fichiers, on va parler des différents choix visuels possibles pour que tu puisses mieux t'imaginer à quoi va ressembler ton site. Tu auras la possibilité de choisir une template, une police de caractères, et une palette de couleurs.

▓ Présentation des templates

Il y a (pour l'instant) trois templates au choix. Leur aspect visuel change, mais l'interface fonctionne toujours de la même manière :

▒ 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 :

La plus simple des templates, avec une interface très proche des plateformes.
En lançant un morceau, les images forment un scroll infini en bas de la page, position et taille aléatoires.
Si tu ne veux pas afficher d'images pendant l'écoute, c'est sûrement avec celle là que ça marchera le mieux !
Exemple de site généré avec la template Hyphe ici !

▒ Spore :

Template avec l'interface d'écoute la plus réduite possible pour laisser toute la place aux images. Elles sont placées en nuage dans lequel on peut se déplacer en 3D, zoomer etc, adapté si tu veux vraiment faire le lien entre tes morceaux et tes images.
Exemple de site généré avec la template Spore ici !

▒ Psilo :

Template inspirée des blogs et sites du début du web. Plus difficile à utiliser, elle ne conviendra pas à tout le monde mais elle marche bien avec les esthétiques de l'underground qui en mettent plein les yeux et les oreilles.
En lançant un morceau, les images s'accumulent sur l'écran jusqu'à le recouvrir. Position, taille et rotation aléatoires. Avec des images transparentes (au format png), ça fait un effet stickers vraiment cool !
Exemple de site généré avec la template Psilo ici !

▓ Polices de caractères

Comme pour les templates, le choix d'une police va influer sur la totalité de ton site. Deux pages de sorties ne pourront pas avoir une police différente chacune.

(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
Une sérif avec des jolis détails pour les gros titres (comme sur cette page), mais qui reste très lisible aussi pour le texte.

Inter Semibold
Sans sérif passe-partout, ultra sobre mais ultra efficace et lisible, impossible de se tromper. La version Regular est actuellement utilisée par ce site :)

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

Bonne nouvelle, contrairement aux templates et aux polices, chaque page de sortie possède sa propre palette de couleurs ! Tu vas voir que ça suffit largement pour différencier les pages des sorties les unes des autres, surtout quand la cover et les images qui apparaissent changent elles aussi.

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. /!\ Attention, sur Psilo, c'est un peu différent parce que le fond est composé avec plusieurs couches (avec modes de fusion etc), dont un dégradé entre les couleurs principale et secondaire. Le plus simple c'est de le mettre gris clair pour cette template, mais tu peux tester des trucs cools avec !

▒ 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...)

Pour générer ton site web, HzM utilise un script Python pour récupérer les fichiers et les insérer dans la template que tu as choisi. Pour que ce soit possible, il faut organiser tes fichiers selon une arborescence de dossiers.
Dans le zip téléchargé plus tôt, il y avait un dossier nommé « artiste » : c'est celui qui sera utilisé par le script par défaut. Il contient déjà une arborescence type qui montre le modèle à suivre pour organiser les fichiers : arborescence des dossiers

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 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 !

/!\ ATTENTION, 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, tant que tu gardes les parties écrites en blanc devant.
Pour les dossiers des sorties et les fichiers des morceaux, ce numéro + tiret du bas au début du nom détermine leur ordre d'affichage (sur la page d'accueil, et dans la tracklist).
Pour les covers et la photo de l'artiste c'est le même principe : la partie du nom en blanc est détectée par le script qui utilisera comme cover n'importe quel fichier image commençant par « cover » par exemple.
Pour les configs, le nom n'a pas d'importance mais il n'y a pas beaucoup d'intérêt à le changer (après tu fais comme tu veux).
Voici un exemple d'arborescence sous Windows : arborescence 0

Dossier artiste principal arborescence 1

À l'intérieur du dossier « 3_la_pieuvre »

▓ Écriture des fichiers configs

Bon avec tout ce nom compliqué, c'est quoi un fichier de configuration ??? En fait, c'est juste un fichier texte qui s'ouvre et se modifie dans le bloc-notes par défaut de Windows ou Mac, rien de plus.
Pour bien comprendre le fonctionnement, 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 configs 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: 13/12/2026

/!\ Attention à bien respecter la syntaxe (c'est du yaml pour celleux qui veulent les détails, donc syntaxe très fragile), pas d'espace entre la clé et les deux points, mais un espace après les deux points ! Pareil pour les indentations qu'on verra après (le texte qui s'avance après un retour à la ligne) : 4 espaces forment une indentation, pas de tabulation !

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

On commence par le gros morceau, c'est le plus complet des fichiers de configuration, avec pas mal de paramètres (donc certains optionnels). Bonne nouvelle, comme 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
Les descriptions sont un peu spéciales. Tu peux écrire directement dans le fichier config si ce n'est pas trop long et compliqué. Il faut juste respecter l'indentation après un retour à la ligne (4 espaces).
Par exemple ça, ça ne marchera pas :

artist_description: |
XXXXXX XX XX XXXXXXX XXX XX XX XXXXX X
XXX XX XXXXXXX XX XXXXXX X
XXXXX XX XX

Avec les 4 espaces devant, ça marche :

artist_description: |
XXXXXX XX XX XXXXXXX XXX XX XX XXXXX X
XXX XX XXXXXXX XX XXXXXX X
XXXXX XX XX

Pour avoir fait des tests en écrivant quelques lignes, je me suis vite rendu compte que c'était super chiant, donc j'ai mis en place une autre solution.
Toujours dans le dossier de la release, tu vas pouvoir créer un autre fichier .txt (depuis le bloc-notes) dont le nom commence par « description » (même principe qu'avec « cover » et « artiste »).
Si il y a un fichier nommé « description » dans ton dossier, le script va remplacer la valeur de « artist_description » par son contenu, donc tu peux la laisser vide !

Et dans ce fichier tu peux écrire autant que tu veux, en sautant des lignes ou pas, sans t'embêter avec l'indentation. Tu vas même pouvoir ajouter de la mise en forme (mettre le texte en gras, italique...) et des liens dans ta description ! Si ça t'intéresse j'en parle dans les trucs cools en vrac pour pas que ce soit trop long ici.

▒ liens vers des réseaux sociaux.
Ici 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.
Si tu ajoutes une nouvelle clé, /!\ attention à l'indentation pour qu'elle soit incluse dans le dictionnaire, sinon ça casse.

links:
Spotify: https://XXXXXXX
Deezer: https://XXXXXXX
YouTube: https://XXXXXXX
Mon autre site web super cool: https://XXXXXXX
etc

▒ liens vers des plateformes de soutien
Comme les morceaux que tu publies sur ton site sont écoutables gratuitement et en téléchargement libre, tu auras peut-être envie d'indiquer des endroits où les auditeur·ices pourront te soutenir. Pareil que pour les autres liens, il suffit de rajouter autant de clés que tu veux !

tips_links:
Tipeee: https://XXXXXXX
Patreon: https://XXXXXXX
Buy me a coffee: https://XXXXXXX
etc

▒ liens vers les pages d'autres artistes
En bas de chaque page d'accueil, peu importe la template, il y a une section « À écouter aussi ! ». C'est un endroit pour mettre en relation les artistes possédant leur propre site internet (généré par HzM ou pas). Si tu connais quelqu'un qui a un site cool, tu peux mettre un lien vers sa page ici.
Pour écrire la config c'est un peu plus technique : on a un dictionnaire général (friend_links) qui contient d'autres dictionnaires (les noms de tes ami·es). Ça a l'air compliqué, mais dans les faits il y a juste à rajouter un niveau d'indentation (donc 4 + 4 espaces = 8), et au pire tu pourras juste copier-coller les modèles existants si besoin.
Chaque lien possède sa propre description dans laquelle tu peux donner envie aux personnes qui visitent ton site de s'intéresser à cet artiste.

Je prévois peut-être de rajouter une image en plus de la description, ça pourrait être sympa. Coming soon ???

friend_links:
amie·e 1:
friend_link: https://XXXXXXX
friend_description: XXX XXXX XXX
amie·e 2:
friend_link: https://XXXXXXX
friend_description: XXX XXXX XXX
etc

▒ choix de la template. Les majuscules n'ont pas d'importance.

▒ choix de la police. J'ai raccourci le nom de certaines polices pour éviter de se tromper dans l'ortographe, les espaces etc. Les majuscules n'ont pas d'importance.

font: Wondertype

font: Inter

font: GNF

font: LaMachine

font: MBA

▒ couleur principale

main_color: "#ffffff"

▒ couleur secondaire

second_color: "#ffffff"

▒ couleur du fond

background_color: "#ffffff"

▒ couleur de la police

font_color: "#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, /!\ attention, à bien inclure le dièse (je sais on dit croisillon askip). Sur ces valeurs il y a des guillemets, c'est normal c'est pour inclure le croisillon dans la valeur, sinon il n'est pas détecté.

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, ça reste du texte donc 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é et les sources de tes images, donne des détails sur les morceaux...
Pareil que pour la config artiste, tu peux utiliser un fichier « description_XXX.txt » externe si besoin.

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 dans l'ordre de la tracklist.
/!\ Attention, à la syntaxe : pour inclure un nouvel élément dans la liste, plus besoin de mettre les 4 espaces avant puisqu'on est pas dans un dictionnaire. Après le retour à la ligne, écris juste un tiret puis un espace, comme dans la commande exemple en dessous.

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 ça permet d'avoir des accents et des caractères spéciaux dans les titres !
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 !

main_color: "#ffffff"

▒ couleur secondaire

second_color: "#ffffff"

▒ couleur du fond

background_color: "#ffffff"

▒ couleur de la police

font_color: "#ffffff"

Maintenant que tous les fichiers configs sont remplis, on a les infos dont le site a besoin pour être généré, y'a plus qu'à le lancer !

▓ Écriture de la commande pour lancer le script

Bon, si tout est prêt (ou juste que tu veux faire un premier test), on va pouvoir lancer le script et générer le site !
Toute la partie de préparation du début avec le terminal et l'environnement va servir ici. Toujours avec le venv activé, tu vas pouvoir écrire cette commande et appuyer sur entrée.

python main.py -af artist -of site build

Pour plus de détails, voilà comment elle se compose :

▒ « python » c'est parce qu'on appelle une commande en python.

▒ « main.py » c'est le nom du fichier principal à activer. Il va ensuite faire appel à tous les autres (build.py, buildpage.py, utils.py etc) mais ça on s'en occupe pas.

▒ « -af artist » ou « -artistfolder artist » indique le dossier dans lequel tu as organisé tes fichiers plus tôt.
Par défaut, c'est « artist », comme dans le modèle téléchargé sur Codeberg. Si tu n'as pas changé le nom, tu peux même ne pas l'écrire dans la commande, c'est plus court.
Ça peut être utile si tu veux avoir deux dossiers d'artistes différents et choisir à partir duquel générer le site.

▒ « -of site » ou « -outputfolder site » indique le nom du dossier qui sera créé par le script.
Par défaut, c'est « site », donc pas besoin d'écrire cet argument si ça te convient.
Encore une fois ça peut être utile si tu veux générer deux sites différents (pour comparer, garder une trace des différentes versions), puisque sinon chaque nouveau site généré avec le même nom va écraser le précédent.

▒ « build » c'est une instruction pour préciser le type d'opération qu'on veut faire, donc ici construire le site.

Pour l'instant il n'y a pas d'autres arguments de ce type, mais ça peut être amené à évoluer donc je le garde là.

Si t'as besoin d'aucun des arguments optionnels, tu peux l'écrire comme ça. Y'a pas plus simple !

python main.py build

Si tout se passe bien, tu vas voir s'afficher la liste des infos récupérées par le script pour ta page d'accueil et tes pages sorties : les fichiers configs, les fichiers images, audios etc.
Rien de très important, elle est juste là à titre indicatif pour tout rassembler au même endroit, et que tu puisses vérifier si tout va bien dans tes infos.

C'EST BON !!! Le site est généré !

▓ Ouvrir, vérifier, modifier le site généré

Maintenant c'est l'heure d'admirer ce qui vient d'être généré. Dans le nouveau dossier créé (« site » par défaut), tu vas trouver quelque chose comme ça :

Pour donner très rapidement un peu de contexte, une page web c'est grossièrement deux fichiers principaux : le .html qui contient les informations textuelles, et le .css qui contient tout ce qui stylise la page. Tu peux voir dans les dossiers créés que la page d'accueil et chaque sortie possèdent leur page .html et le style .css qui va avec.
En double cliquant sur un fichier .html, tu peux l'ouvrir dans ton navigateur. C'est la façon la plus simple et la plus rapide de faire, et ça donne un aperçu d'à quoi ressemble la page.

C'est déjà pas mal mais tu vas voir qu'il y a quelques problèmes d'affichage, notamment sur les pages des sorties. C'est parce que pour fonctionner correctement, certaines fonctionnalités ont besoin qu'on simule un hébergement web (je suis pas un pro, l'explication est sûrement bof).
Ça tombe bien, Python permet de le faire hyper rapidement. Ouvre une nouvelle fenêtre de terminal, et déplace toi comme tout à l'heure dans ton dossier de travail. Mais cette fois, on va aller une couche plus loin : dans le dossier qui vient d'être créé.

Une fois dans ce dossier, tu vas pouvoir entrer la commande qui sert à démarrer un serveur local :

python -m http.server

Résultat : en copiant-collant l'adresse qui t'es indiquée dans ton navigateur, tu devrais retrouver ton site avec tout qui marche correctement !

En général, ça va être ce genre d'adresse :

http://[::]:8000/

http://localhost:8000/

Ça c'était pour visualiser le site que tu viens de créer (un peu long mais on s'y fait). Si tu veux faire des modifications, tu peux juste réarranger tes dossiers/fichiers, réécrire des trucs dans les fichiers configs, et relancer le script sans problème !
Si tu veux le modifier plus en profondeur, en changeant des trucs qui ne sont pas prévus par les fichiers configs ou les templates (comme les textes écrits dans les menus de la page d'accueil), c'est possible mais ça va demander encore un peu plus de ton cerveau, je t'invite à lire ça où j'en parle.

▓ Hébergement du site

Si tu es arrivé·e jusque là, bravo, c'est la dernière étape pour avoir ton site en ligne et visible par n'importe qui !

▓ Quelques tips en vrac à essayer pour custom ton site

Je risque de répéter quelques trucs que j'ai déjà mentionné plus haut quand j'en ai eu l'occasion, mais ça permet d'avoir un endroit pour regrouper tous les petits trucs cools qui ne rentrent pas vraiment dans une catégorie ou un paramètre.

▒ De manière générale, tous les fichiers images que tu utilises peuvent être remplacés par des gifs. Ça permet par exemple d'avoir des covers d'albums animées, ou même ta photo « de profil » d'artiste !

Malheureusement pas possible de mettre des gifs dans le nuage d'images de Spore... C'est à cause des sprites de ThreeJS qui fonctionnent uniquement avec des images fixes. Ça pourrait être possible d'y mettre des vidéos, je travaille dessus mais pas sûr que ça vaille le coup vu le poids des fichiers.

▒ La plupart des infos que tu remplis dans les fichiers configs sont juste textuelles. Je donnais l'exemple pour la date : c'est pas obligé de la garder au format jour/mois/année, tu peux être plus vague, plus original·e. Tu peux même utiliser ce champ pour complètement autre chose, genre le lieu d'enregistrement/de conception...

▒ Les descriptions (artistes et sorties) peuvent être écrites en Markdown, que ce soit dans le fichier config, ou dans le fichier description séparé.
Si tu ne connais pas, c'est un langage ultra simple qui permet de faire de la mise en forme très rapidement, en ajoutant des symboles au texte. Une astérisque pour faire de *l'italique*, deux pour faire du **gras**. Des titres à différents niveaux d'importance avec les dièses (# titre1, ## titre2, ### titre3, etc). Et surtout, des liens cliquables ! Il suffit de mettre entre crochets le texte à faire apparaître, et direct après des parenthèses contenant l'url, [comme ça](https://site-de-zinz).
Ça peut faire beaucoup d'infos là tout de suite, mais c'est hyper pratique et rapide à utiliser, et surtout utilisable dans plein d'autres logiciels de texte et outils de prise de notes !

▒ À la base, la section « À écouter aussi ! » est un endroit pour mettre en relation les artistes possédant leur propre site internet (généré par HzM ou pas). Ça crée une sorte de réseau sur le principe des webrings (il y a déjà des webrings pour musicien·nes comme celui-là.)
En pratique, tu fais ce que tu veux et tu peux y mettre n'importe quel lien vers un site internet. Tu peux transformer cette section en moodboard genre « Trucs qui m'inspirent », ou « Mes albums classiques », c'est toi qui vois !

▒ Sur Hyphe et Spore, tu peux utiliser une image comme bannière pour la page d'accueil, juste histoire d'avoir un peu plus de détails. Pour ça, il suffit de la mettre au même endroit que ta photo d'artiste (premier niveau donc, sans rentrer dans les dossiers des sorties) et de la renommer pour qu'elle commence par « banner » !

▒ Sur Psilo, si tu mets des images avec de la transparence (.png) dans ton dossier media, le script les détecte et enlève la bordure blanche, ça fait une sorte d'effet sticker assez cool, y'a moyen de s'amuser avec ça.

▒ Sur Psilo, les images qui s'accumulent peuvent être attrapées et déplacées sur la page. Juste comme ça parce que c'est marrant. Uniquement sur ordinateur (pour l'instant).

Je donne d'autres petits conseils dans le tuto vidéo, c'est plus pratique pour montrer les choses directement et ça m'évite de trop écrire, hésite pas à regarder !

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. Ok l'algorithme de recommandation est 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 ??? / pourquoi y'a pas de système de paiement, de boutique ???

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 ! 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 (cf. la roadmap!)

Outil & site réalisés, codés, designés à la main et au cerveau par Lélio :)
Soutenez-moi ici si vous voulez : Buy me a coffee !

Contactez-moi ici pour des questions/demandes/remarques etc :
insta : @lelioimphra
mail : contact@leliowww.xyz