diff --git a/docs/index.md b/docs/index.md
index b934e4e..4f360b3 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -2,10 +2,10 @@
 
 # Bienvenue dans mes notes de devops
 
-## Structure
+je note mon parcours et mes projets en SysAdmin
 
--> cours (Notes sur les cours)
+## Sommaire
 
--> projects (Notes sur des nouveaux projets) 
+-> Notes *notes de cours, apprentissages en dehors, un peu de tout*
 
--> liens cools (mes sites favoris)
\ No newline at end of file
+-> Projets *notes sur mes projets de cours/personnels, note de mes experiences*
\ No newline at end of file
diff --git a/docs/links.md b/docs/links.md
deleted file mode 100644
index 9f01127..0000000
--- a/docs/links.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Liens cools de ma poche
-
-## 🎨 Design
-
-
-## 💽 Developpement
\ No newline at end of file
diff --git a/docs/projects/2026-03-02.md b/docs/projects/2026-03-02.md
deleted file mode 100644
index c794595..0000000
--- a/docs/projects/2026-03-02.md
+++ /dev/null
@@ -1 +0,0 @@
-# Carnet de bord : Stage Admin Sys.
\ No newline at end of file
diff --git a/site/index.html b/site/index.html
index 6b2d060..411fd8c 100644
--- a/site/index.html
+++ b/site/index.html
@@ -370,10 +370,10 @@
     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
       
         <li class="md-nav__item">
-  <a href="#structure" class="md-nav__link">
+  <a href="#sommaire" class="md-nav__link">
     <span class="md-ellipsis">
       
-        Structure
+        Sommaire
       
     </span>
   </a>
@@ -1635,10 +1635,10 @@
     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
       
         <li class="md-nav__item">
-  <a href="#structure" class="md-nav__link">
+  <a href="#sommaire" class="md-nav__link">
     <span class="md-ellipsis">
       
-        Structure
+        Sommaire
       
     </span>
   </a>
@@ -1665,10 +1665,10 @@
 
 <p><img src="https://github.com/buchtioof/portfolio/blob/main/public/img/assets/projects/docs.png?raw=true" alt="image de couverture docs"></p>
 <h1 id="bienvenue-dans-mes-notes-de-devops">Bienvenue dans mes notes de devops</h1>
-<h2 id="structure">Structure</h2>
-<p>-&gt; cours (Notes sur les cours)</p>
-<p>-&gt; projects (Notes sur des nouveaux projets) </p>
-<p>-&gt; liens cools (mes sites favoris)</p>
+<p>je note mon parcours et mes projets en SysAdmin</p>
+<h2 id="sommaire">Sommaire</h2>
+<p>-&gt; Notes <em>notes de cours, apprentissages en dehors, un peu de tout</em></p>
+<p>-&gt; Projets <em>notes sur mes projets de cours/personnels, note de mes experiences</em></p>
 
 
 
diff --git a/site/search.json b/site/search.json
index 985ebca..37a9b96 100644
--- a/site/search.json
+++ b/site/search.json
@@ -1 +1 @@
-{"config":{"separator":"[\\s\\-_,:!=\\[\\]()\\\\\"`/]+|\\.(?!\\d)"},"items":[{"location":"","level":1,"title":"Bienvenue dans mes notes de devops","text":"","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"#bienvenue-dans-mes-notes-de-devops","level":1,"title":"Bienvenue dans mes notes de devops","text":"","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"#structure","level":2,"title":"Structure","text":"<p>-&gt; cours (Notes sur les cours)</p> <p>-&gt; projects (Notes sur des nouveaux projets) </p> <p>-&gt; liens cools (mes sites favoris)</p>","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"links/","level":1,"title":"Liens cools de ma poche","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#design","level":2,"title":"🎨 Design","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#developpement","level":2,"title":"💽 Developpement","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"learn/devops/2025-11-28/","level":1,"title":"Automatisation via les associations","text":"<p><code>|</code> (le pipe) -&gt; prend le résultat de la commande de gauche et le donne à celle de droite</p> <p>exemple : liste tout un répertoire, mais n'affiche que les résultats qui sont \"feur\" <pre><code>ls -la | grep \"feur\"\n</code></pre></p> <p><code>&gt;</code> et <code>&gt;&gt;</code></p> <ul> <li>envoie le résultat d'une commande dans un fichier texte</li> <li><code>&gt;</code> écrase le fichier / <code>&gt;&gt;</code> ajoute à la fin sans effacer</li> <li>ex: <code>echo \"coucou\" &gt; fichier.txt</code></li> </ul>","path":["Notes","🔌 DevOps","Automatisation via les associations"],"tags":[]},{"location":"learn/devops/2025-12-12/","level":1,"title":"Git pour les neuilles","text":"","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#creer-un-git","level":2,"title":"Créer un git","text":"","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#-si-le-projet-existe-deja","level":3,"title":"-&gt; Si le projet existe deja","text":"<ul> <li>On clone le projet au sein d'un dossier, celui-ci sera dans son dossier de travail. -&gt; <code>git clone (url du projet git)</code></li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#-sinon-creer-le-projet","level":3,"title":"-&gt; Sinon créer le projet","text":"<ul> <li>Crée le projet git à partir de ce dossier. -&gt; <code>git init (dossier de travail)</code></li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#ignorer-des-fichiersdossiers","level":2,"title":"Ignorer des fichiers/dossiers","text":"<ul> <li>Ajouter des interdictions dans .gitignore</li> </ul> <p><code>echo gbvenv/ &gt;&gt; .gitignore</code> &lt;- on indique via un echo qui écrira dans le fichier .gitignore qu'on ne veut pas push le dossier \"gbvenv\" ici, un fichier on ne mettera pas le slash (logique en amont)</p>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#une-fois-que-de-fichiers-sont-dispos-empaqueter","level":2,"title":"Une fois que de fichiers sont dispos, empaqueter !","text":"<p>Pour envoyer un projet git, c'est comme envoyer un colis à la poste, d'abord, on met nos affaires dans le colis</p> <p>Plusieures possibilités ☝️</p> <ul> <li> <p>Ajoute TOUS les fichiers du dossier via l'option -A ou --all -&gt; <code>git add -A</code></p> </li> <li> <p>Ajoute SEULEMENT les modifications et suppressions (donc pas de nouveaux fichiers) -&gt; <code>git add -u</code></p> </li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#etiqueter-le-paquet","level":2,"title":"Etiqueter le paquet","text":"<p>Ensuite, on rempli l'étiquette du colis et on la colle au colis</p> <ul> <li>On écrit une note recap courte du commit sur le git -&gt; <code>git commit -m \"(message du commit)\"</code></li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#deposer-le-colis","level":2,"title":"Déposer le colis","text":"<p>Enfin pour push, c'est a dire déposer le colis au bureau de poste pour l'envoi, on fait :</p> <ul> <li>On envoie le paquet de l'origine à la branche souhaitée dans le git -&gt; <code>git push -u origin (branche souhaitée)</code></li> </ul> <p>Info</p> <p>-u veut dire ce que dit la doc en gros</p>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#-si-erreur","level":3,"title":"-&gt; SI ERREUR","text":"<p>Dans le cas ou un fichier/dossier a été supprimé autre part avant de push nos modifs</p> <ul> <li>Merge de force les deux branches pour ne faire qu'une branche <code>git config pull.rebase false</code></li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#utiliser-deux-branches-differentes","level":2,"title":"Utiliser deux branches différentes","text":"<p>Dans le cas ou l'on veut travailler avec une seconde branche</p> <ul> <li> <p>Pour switch de branche de travail -&gt; <code>git checkout (branche souhaitée)</code></p> </li> <li> <p>Pour merge en ecrasant la branche souhaitée ⬇️ <pre><code>git merge -s ours main\ngit checkout main\ngit merge (branche à merge)\n</code></pre></p> </li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2026-01-22/","level":1,"title":"SQL pour les tung tung tung sahur","text":"","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#modele-mvc","level":2,"title":"Modèle MVC","text":"<p>Le modèle MVC est une façon de concevoir un projet logiciel, en gros on sépare celui-ci en trois grandes parties distinctes séparant la logique de la vue et rend le travail plus facile.</p> <p></p> <p>Modèle MVC en prenant celui de grabber par exemple :</p> <pre><code>- Model = Base De Donnée (ex: EMPLOYEES, COMPUTERS)\n- View = Tableau de bord, Site\n- Controller = Cerveau qui dirige les deux parties Model et View (ex: app.py)\n</code></pre>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#tuto-comment-cr2er-une-bdd-sql-facilement-en-2-minutes-super-facile","level":2,"title":"TUTO : COMMENT CR2ER UNE BDD SQL FACILEMENT EN 2 MINUTES (SUPER FACILE)","text":"","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#structure-dune-base-de-donnees","level":3,"title":"Structure d'une Base De Données","text":"<p>celle de grabber pour l'exemple</p> <pre><code>BDD (Etape 1) - grabberman\n├── TABLES (Etape 2) - COMPUTERS\n│   ├── Colonne (Etape 3) - PcId, entier/clé primaire\n│   │   └── Donnée (Etape 4)\n│   ├── Colonne (Etape 3) - Hostname, chaîne de charactère\n│   └── Colonne (Etape 3) - MacAddress, chaîne de charactère\n└── TABLES (Etape 2) - EMPLOYEES\n    ├── Colonne (Etape 3) - UserId, entier/clé primaire\n    ├── Colonne (Etape 3) - Username, chaîne de charactère\n    └── Colonne (Etape 3) - PcId, clé secondaire\n</code></pre>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#etape-1-creer-une-bdd","level":3,"title":"Etape 1 : Créer une BDD","text":"<p><code>sqlite3 grabberman.db</code> &lt;- Commande qui crée une DB qu'on appellera ici \"grabberman\"</p>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#etape-2-creer-une-table","level":3,"title":"Etape 2 : Créer une table","text":"<pre><code>CREATE TABLE \"COMPUTERS\" \n(\n    PcId INTEGER PRIMARY KEY AUTOINCREMENT, \n    Hostname VARCHAR(50) NOT NULL, \n    MacAddress VARCHAR(50)\n);\n</code></pre> <p>Note</p> <p>Ici on crée une table dans laquelle on stockera des données (des PC que l'on grab par exemple)</p>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#etape-3-ajouter-des-donnees-dans-une-table","level":3,"title":"Etape 3 : Ajouter des données dans une table","text":"<p><code>INSERT into COMPUTERS (Hostname, MacAddress) VALUES ('mypc', '1B:12:F0:FL:94');</code></p> <p>Note</p> <p>Pour ajouter une donnée dans une tableau, on INSERE dans le TABLEAU donné les VALEURS dans les Colonnes</p>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#etape-4-creer-un-autre-tableau-avec-une-cle-liee-foreign-key","level":3,"title":"Etape 4 : Créer un autre tableau avec une clé liée (foreign key)","text":"<pre><code>CREATE TABLE \"EMPLOYEES\" \n(\n    UserId INTEGER PRIMARY KEY AUTOINCREMENT, \n    Username VARCHAR(50) NOT NULL, \n    FOREIGN KEY (PcId) REFERENCES COMPUTERS(PcId)\n);\n</code></pre> <p>Note</p> <p>On recommence comme à l'étape 2, en ajoutant une clé étrangère foreign key, qui lie une clé extérieure, PcId ici, dans notre second Tableau</p>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-03-04/","level":1,"title":"C'est quoi DevOps ?","text":"","path":["Notes","🔌 DevOps","C'est quoi DevOps ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/frontend/2026-02-21/","level":1,"title":"Cheat Sheet Tailwind","text":"<p>Tailwind utilise des classes utilitaires. La logique est souvent <code>[Propriété]-[Taille/Couleur/Valeur]</code>.</p>","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#1-espacement-margin-padding","level":2,"title":"1. Espacement (Margin &amp; Padding)","text":"<p>La syntaxe : <code>[Type][Direction]-[Taille]</code>.</p> <ul> <li> <p>Type : <code>m</code> (Margin / Extérieur) ou <code>p</code> (Padding / Intérieur).</p> </li> <li> <p>Direction : <code>t</code> (Haut), <code>b</code> (Bas), <code>l</code> (Gauche), <code>r</code> (Droite), <code>x</code> (Horizontal), <code>y</code> (Vertical), ou rien (Partout).</p> </li> <li> <p>Taille : Échelle basée sur des multiples de 4px (ex: <code>1</code> = 4px, <code>2</code> = 8px, <code>4</code> = 16px).</p> </li> </ul> Classe Équivalent CSS Explication <code>p-4</code> <code>padding: 16px;</code> Espace à l'intérieur partout. <code>px-6</code> <code>padding-left: 24px; padding-right: 24px;</code> Espace à l'intérieur, à gauche et à droite. <code>mt-2</code> <code>margin-top: 8px;</code> Espace à l'extérieur, vers le haut. <code>mx-auto</code> <code>margin: 0 auto;</code> Centre un bloc horizontalement.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#2-dimensions-width-height","level":2,"title":"2. Dimensions (Width &amp; Height)","text":"<p>La syntaxe : <code>w-[Taille]</code> (Largeur) et <code>h-[Taille]</code> (Hauteur).</p> Classe Équivalent CSS Explication <code>w-full</code> <code>width: 100%;</code> Prend toute la largeur disponible. <code>w-1/2</code> <code>width: 50%;</code> Prend la moitié de la largeur. <code>w-screen</code> <code>width: 100vw;</code> Prend la largeur totale de l'écran. <code>h-screen</code> <code>height: 100vh;</code> Prend la hauteur totale de l'écran. <code>w-16</code> <code>width: 64px;</code> Échelle numérique classique (16 * 4px).","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#3-couleurs","level":2,"title":"3. Couleurs","text":"<p>La syntaxe : <code>[Cible]-[Couleur]-[Intensité]</code>.</p> <p>L'intensité va de <code>50</code> (très clair) à <code>950</code> (très foncé).</p> Cible Exemple Tailwind Ce que ça colore Texte <code>text-blue-500</code>, <code>text-white</code> La couleur de la police. Fond <code>bg-red-600</code>, <code>bg-gray-900</code> La couleur d'arrière-plan. Bordure <code>border-green-400</code> La couleur de la bordure.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#4-typographie","level":2,"title":"4. Typographie","text":"<p>Gérez la taille, la graisse et l'alignement.</p> Catégorie Classes utiles Explication Taille <code>text-xs</code>, <code>text-sm</code>, <code>text-base</code>, <code>text-lg</code>, <code>text-xl</code> Du plus petit au plus grand. Graisse <code>font-light</code>, <code>font-normal</code>, <code>font-semibold</code>, <code>font-bold</code> L'épaisseur des lettres. Alignement <code>text-left</code>, <code>text-center</code>, <code>text-right</code> L'alignement du texte.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#5-flexbox-mise-en-page","level":2,"title":"5. Flexbox (Mise en page)","text":"<p>Déclarez <code>flex</code> pour commencer à aligner vos éléments.</p> Classe Équivalent CSS Explication <code>flex</code> <code>display: flex;</code> Aligne les enfants en ligne (côte à côte). <code>flex-col</code> <code>flex-direction: column;</code> Aligne les enfants en colonne. <code>justify-center</code> <code>justify-content: center;</code> Centre sur l'axe principal. <code>justify-between</code> <code>justify-content: space-between;</code> Écarte les éléments aux extrémités. <code>items-center</code> <code>align-items: center;</code> Centre sur l'axe secondaire (souvent verticalement). <code>gap-4</code> <code>gap: 16px;</code> Ajoute 16px d'espace entre chaque enfant.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#6-bordures-et-arrondis-border-rounded","level":2,"title":"6. Bordures et Arrondis (Border &amp; Rounded)","text":"<p>Il faut toujours spécifier une épaisseur pour voir la bordure.</p> Classe Équivalent CSS Explication <code>border</code> <code>border-width: 1px;</code> Ajoute une bordure de 1px partout. <code>border-t</code> <code>border-top-width: 1px;</code> Bordure uniquement en haut. <code>rounded</code> <code>border-radius: 4px;</code> Arrondit légèrement les angles. <code>rounded-md</code> <code>border-radius: 6px;</code> Arrondi moyen (idéal pour boutons). <code>rounded-full</code> <code>border-radius: 9999px;</code> Fait un cercle parfait ou une pilule.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#7-etats-et-responsif-prefixes","level":2,"title":"7. États et Responsif (Préfixes)","text":"<p>Préfixez n'importe quelle classe avec un état ou une taille d'écran.</p> <ul> <li>Survol (Hover) : <code>hover:bg-blue-600</code></li> <li>Focus : <code>focus:border-blue-500</code></li> <li>Responsif (Mobile First) : - <code>w-full</code> (100% sur mobile par défaut)</li> <li><code>md:w-1/2</code> (50% sur tablette)</li> <li><code>lg:w-1/3</code> (33% sur grand écran)</li> </ul>","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/javascript/2026-01-30/","level":1,"title":"Javascript (30/01/26)","text":"","path":["Notes","☕ Javascript","Javascript (30/01/26)"],"tags":["Javascript"]},{"location":"learn/javascript/2026-02-06/","level":1,"title":"Asynchrone et promesses (06/02/26)","text":"<p>Info</p> <p>Pour le TP, on a besoin de manipuler des fichiers. Mais avant d'utiliser le module file system dit \"fs\" (qui s'occupe de ce besoin), il faut comprendre un fonctionnement de base en informatique, essentielle aux modules faisant des requêtes a des systemes externes comme fs, l'asynchrone. </p>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#cest-quoi-asynchrone","level":2,"title":"C'est quoi Asynchrone ?","text":"<p>Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mais avec promesse, il laisse le code continuer pour trouver une réponse et la rapporter comme promis.</p> <p>Rien de mieux qu'un exemple concret et gourmand en amont et en aval.</p>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#1-sans-asynchrone","level":3,"title":"1. SANS Asynchrone","text":"<ol> <li>Tu commandes un Tasty Crousty.</li> <li>Ce neuille de caissier part en cuisine.</li> <li>Il fait cuire le riz lui-même.</li> <li>Il coupe les tenders.</li> <li>Il met tout dans la barquette puis sauce.</li> <li>Et revient pour te donner le Tasty Crousty 67 doro party.</li> <li>SEULEMENT MAINTENANT, il prend la commande du gwer suivant.</li> </ol> <p>Résultat : La file d'attente sort du restaurant. Si la cuisson prend 10 minutes, tout le restaurant est bloqué pendant 10 minutes. Bien guez.</p>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#2-avec-asynchrone","level":3,"title":"2. AVEC Asynchrone","text":"<ol> <li>Tu commandes un Tasty Crouspy.</li> <li>La caissière crie en cuisine \"Un Crousty piquant sucré supplément poulet !\".</li> <li>Elle te donne un bipeur, faisant donc la promesse de te servir un délicieux Crouspy Tasty.</li> <li>Puis elle passe directement au client suivant.</li> <li>Toi, tu vas t'asseoir et tu attends.</li> </ol>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#mais-cest-quoi-cette-promesse-promise","level":2,"title":"Mais c'est quoi cette promesse ? (Promise)","text":"<p>Note</p> <p>☝️🤓 Node.js fonctionne sur un principe de thread unique (monothread)... En gros, il ne peut effectuer qu'une seule tâche à la fois.</p> <p>Alors pour éviter de bloquer le programme pendant de longues opérations (comme lire des données au fin fond du disque dur), il délègue ces tâches a l'ordinateur et utilise un mécanisme de Promesses.</p> <p>Dans notre exemple, la Promise, c'est le bipeur.</p> <p>Ce boîtier est une promesse. Le restaurant te dit : \"Je n'ai pas ton crousty tout de suite, mais je te promets que je te préviendrai dès qu'il y a du nouveau.\"</p> <p>Une Promise a toujours 3 états possibles, et seulement 3 :</p> <ol> <li>En attente (Pending) : Le boîtier ne fait rien. Le cuisinier travaille. Tu attends.</li> <li>Succès (Resolved) : Le boîtier vibre ! La promesse est tenue, tu as ton chicken (la donnée est arrivée).</li> <li>Échec (Rejected) : Le manager arrive et te dit \"Désolé, la cuisine a pris feu, pas de délicieux crousty pour ce soir\". La promesse est rompue (il y a une erreur).</li> </ol>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemples-async-et-await","level":2,"title":"Exemples async et await","text":"","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemple-dun-async-exo-du-tp-2-de-js","level":3,"title":"Exemple d'un async (exo du TP 2 de JS)","text":"<pre><code>files.forEach((fileName) =&gt; {\n    fs.readFile(fileName, 'utf8').then((content) =&gt; {\n        ...\n    })\n});\n</code></pre> <ul> <li><code>fs.readFile</code> : Envoie le job de lire un fichier à l'ordinateur avec des parametres et quand c'est pret, enrengistre son résultat dans <code>content</code>.</li> <li>La Promise : En lançant fs.readFile, celui-ci promet que dès qu'il a un résultat, il le renverra dans <code>content</code></li> </ul>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemple-concret-await-exo-du-tp-2-de-js","level":3,"title":"Exemple concret await (exo du TP 2 de JS)","text":"<p>On peut également demander spécifiquement d'attendre le retour d'une promesse avec <code>await</code></p> <pre><code>const stats = await fs.stat(filename);\n</code></pre> <ul> <li><code>fs.stat</code> : Envoie le job de récupérer les stats d'un fichier à l'ordinateur et quand c'est pret, enrengistre son résultat dans <code>stats</code>.</li> <li>La Promise : On te promet un résultat dans <code>stats</code></li> <li><code>**await**</code> : Tant que l'on a pas de résultat, on \"fige\" à cette ligne jusqu'à ce que la promesse est reçue.</li> </ul>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/","level":1,"title":"fetch des APIs et serveur HTTP (09/02/26)","text":"","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-et-apis","level":2,"title":"Fetch et APIs","text":"<p>Dans le cadre d'un TP, on a fait des appels à des APIs externes comme celle du CNAM ou encore openweathermap pour intégrer les données actuelles dans un script JS.</p> <p>Pour faire des appels, on utlise la méthode Asynchrone du cours précédent qui nous permettra de faire des appels des APIs sans arrêter le programme en attendant la réponse. Une fonction nous permet de faire cet appel : <code>fetch()</code></p>","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-le-coursier","level":3,"title":"<code>fetch()</code> (Le coursier)","text":"<p>fetch à le rôle de coursier, c'est lui qui effectuera la requête HTTP (GET par défaut).</p> <ul> <li> <p>Ce que ça fait : Ça envoie un ping à une URL pour aller chercher des data.</p> </li> <li> <p>Et ça renvoie une promesse en attendant la réponse de l'API</p> </li> </ul> <p>Pour traiter nos réponses proprement, on combine nos fetch avec le module json()</p>","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#json-le-traducteur","level":3,"title":"<code>json()</code> (Le traducteur)","text":"<p>Quand <code>fetch</code> revient, il te ramène un gros paquet brut (un <code>Response object</code>).</p> <ul> <li> <p>Ce que ça fait : Ça prend ce paquet et ça le transforme en Objet JavaScript utilisable (avec des accolades <code>{}</code> et tout).</p> </li> <li> <p>Note : C'est aussi asynchrone, donc il faut un <code>await</code> devant aussi.</p> </li> </ul>","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#exemple-du-tp","level":3,"title":"Exemple du TP","text":"<p>Dans une fonction async <code>fetchCityInfo()</code>, on essayera de fetch via cette fonction : <pre><code>// Attend de fetch les données d'une ville donnée par l'utilisateur via la variable cityName\nconst geoRes = await fetch(`https://geoservice.cnam.fr/api/cities?name=${encodeURIComponent(cityName)}`);\n</code></pre></p> <p>Puis on encode les données brutes reçues dans un joli tableau JSON : <pre><code>// La constante cities récupère le résultat geoRes et le range en JSON\nconst cities = await geoRes.json();\n</code></pre></p> <p>Plus tard, on refait un fetch de données avec une clé API pour openweathermap (cas concret en gros) : <pre><code>//Comme tout à l'heure, on fetch les données de l'API et on attend la réponse via await\nconst weatherRes = await fetch(`http://api.weatherapi.com/v1/current.json?q=${encodeURIComponent(cityName)}&amp;key=****`);\n</code></pre></p> <p>Bravo, tu as fait un appel d'API et l'a rangé dans un beau tableau JSON.</p>","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#serveur-http","level":2,"title":"Serveur HTTP","text":"","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/python/2026-01-16/","level":1,"title":"pip et environnements virtuels","text":"","path":["Notes","🐍 Python","pip et environnements virtuels"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/python/2026-01-16/#python-et-ses-environnements-virtuels","level":2,"title":"Python et ses environnements virtuels","text":"<ul> <li>En python, on peut travailler dans des \"sandboxes\" ou toutes les libraires installées resteront contenues dedans</li> </ul> <p>Utile de créer donc un environnement pour chaque projet afin de en pas perturber d'autres projets avec des milliers de packages inutiles en gros</p> <p><code>python3 -m venv gbvenv</code> &lt;- permet de créer un environnement (venv crée l'environnement \"gbvenv\")</p> <p><code>source gbvenv/bin/activate</code> &lt;- lance cet environnement pour travailler dedans</p> <ul> <li>En parlant de packages, parlons de ✨pip✨</li> </ul> <p>pip est le packages manager de python, en l'appelant, on peut installer des packages comme uvicorn par exemple, utile pour grabber</p> <p><code>pip install --upgrade pip</code> &lt;- update les packages</p> <p><code>python -m pip install ***</code> &lt;- installe le package qu'on notera a la place des ***</p> <p><code>pip freeze &gt;&gt; requirements.txt</code> &lt;- commande super utile pour partager les dependances necessaires pour faire fonctionner son projet sur un autre environnement</p> <p><code>deactivate</code> &lt;- désactive l'environnement virtuel</p>","path":["Notes","🐍 Python","pip et environnements virtuels"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/python/2026-01-16/#script-de-roi-qui-automatise-le-process","level":2,"title":"Script de roi qui automatise le process","text":"<ul> <li>J'ai codé un script qui automatise ce process avec une seule commande :</li> </ul> <p><code>bash &lt;(curl -fsSL https://raw.githubusercontent.com/buchtioof/venv-setup/main/venvsetup.sh)</code></p> <p>Pour en apprendre plus : le git du projet</p>","path":["Notes","🐍 Python","pip et environnements virtuels"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/python/2026-02-16/","level":1,"title":"Django en gros","text":"","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#commencer-un-projet-django","level":2,"title":"Commencer un projet Django","text":"<p>Pour commencer un projet Django, c'est super simple :</p> <p>-&gt; D'abord, créer un dossier de projet</p> <pre><code>`mkdir projet`\n</code></pre> <p>-&gt; Ensuite créer un environnement virtuel Python puis installer Django via pip</p> <pre><code>`python3 -m venv \"projetvenv\" &amp;&amp; source projetvenv/bin/activate &amp;&amp; pip install django`\n</code></pre> <p>-&gt; Maintenant, créer le projet Django dans ce dossier (le point à la fin indique que l'on crée dans ce dossier le projet)</p> <pre><code>`django-admin startproject config .`\n</code></pre> <p>-&gt; On peut maintenant travailler dans notre projet Django</p>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#projet-et-applications","level":2,"title":"Projet et applications","text":"<p>Django fonctionne sur l'utilisations de petits modules appelés \"Applications\", ceux-ci composent un projet Django. Elles peuvent être des composants gèrant une API qui prend des données JSON pour les mettre dans une BDD SQL comme dans le projet Grabber ou encore plein d'autres cas...</p> <p>Note</p> <p>En gros, on a un projet (dossier \"config\") dans lequel on gère les réglages généraux de Django (serveur, adresses, ect...) et des applications (dans leurs dossiers propres) qui gèrent leurs tâches propres à elles</p> <p>Pour créer une Application on utilise cette commande -&gt; <code>python manage.py startapp nomdel'app</code></p>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#fonctionnement-dune-application","level":2,"title":"Fonctionnement d'une Application","text":"<p>Une application se divise avec un fonctionnement en 3 parties</p> <p>Modèle &lt;--&gt; Vue -&gt; Template</p>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#modele","level":3,"title":"Modèle","text":"<p>Le Modèle sera la partie manipulation d'objets (comme en PhP), dans le projet Grabber, Django s'occupera de créer la DB sql via ce module</p> <p>Warning</p> <p>Quand on travaille sur le fichier models.py (généralement celui qui s'occupe de ce module) on doit utiliser deux commandes qui construisent le modèle</p> <pre><code>python manage.py makemigrations\npython manage.py migrate\n</code></pre>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#vue","level":3,"title":"Vue","text":"<p>La Vue ici, c'est un peu le cerveau du projet, il reçoit les requêtes (par exemple, l'utilisateur qui demande une URL ou alors un fichier bash qui envoie des données comme avec Grabber) et peut renvoyer ces requêtes au Modèle pour avoir un résultat, etc...</p>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#template","level":3,"title":"Template","text":"<p>Le template, c'est l'interface, par exemple des fichiers HTML. Il reçoit les données brutes de la Vue et les affiche proprement dans une jolie page web.</p> <p>Utiliser les données brutes dans une template</p> <p>Pour se faire, on doit utiliser cette balise <code>{{ ... }}</code> dans le HTML, cela veut dire pour Django que l'on récupère les données d'une clé spécifique</p> <pre><code>&lt;!-- Dans les crochets, on appelle la donnée \"hostname\" de la table \"data\"--&gt;\n&lt;title&gt;{{ data.hostname }} - Grabber&lt;/title&gt;\n</code></pre>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#urls","level":2,"title":"URLs","text":"<p>Un autre composant très important dans Django, c'est les URLs. C'est un fichier dans lequel on doit router ce que telle url dans le navigateur doit effectuer. </p> <p>Par exemple</p> <p>Appeler la racine (localhost:5000/) doit être routé comme ceci :</p> <pre><code>from django.urls import path\nfrom api import views\n\nurlpatterns = [\n    # Route de la racine qui appelle la fonction computers_list\n    path('', views.computers_list, name='computers'),\n]\n</code></pre>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/sysadmin/2026-02-25/","level":1,"title":"SSH et Configuration propre","text":"","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#cest-quoi","level":2,"title":"C'est quoi ?","text":"<p>SSH est un protocole de communication (comme FTP, HTTP, ect...) qui se base dans le terminal. Il permet de contrôler une fenetre de commandes d'un ordinateur à distance. Si SSH est activé sur un PC, un utilisateur connaissant les logins du PC distant pourra ouvrir un terminal à distance directement sur son ordinateur. </p> <p>Pour plus de sécurité, il est préférable d'utiliser un système de clés publiques/privées pour ne pas envoyer ces identifiants dans la nature en clair. </p> <p>On va voir comment configurer une connexion SSH proprement entre deux PC.</p>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#etape-1-creer-une-cle-sur-le-pc-hote","level":2,"title":"Étape 1 : Créer une clé sur le PC Hôte","text":"<p>On crée d'abord notre clé SSH pour authentifier notre ordinateur via cette commande :</p> <p><code>ssh-keygen -t ed25519 -C \"nom_de_votre_pc\"</code></p> <p>En résumé, on utilise la commande ssh-keygen, préinstallée sur les distros UNIX et macOS, qui crée des clé et on lui demande une clé encryptée avec le protocole ed25519 via -t, recommandé car efficace et robuste, puis on donne le nom du PC qu'on authentifie avec -C.</p> <p>On nous demandera alors dans quel répertoire stocker la clé, généralement il vous proposera dans votre répertoire home <code>/.ssh/id_ed25519</code> et aussi si l'on veut protéger la clé avec un mot de passe.</p> <p>Répertoire de la clé</p> <p>La clé donc sera stockée dans le répertoire .ssh/id_ed25519 comme dit plus tôt. Dans ce même répertoire, on y retrouvera deux fichiers : </p> <ul> <li>id_ed25519 &lt;- Celle-ci est la clé privée et ne doit EN AUCUN CAS être partagée</li> <li>id_ed25519.pub &lt;- Celle-ci c'est la publique qui sera partagée entre les ordinateurs</li> </ul>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#etape-2-envoyer-la-cle-sur-le-pc-distant","level":2,"title":"Étape 2 : Envoyer la clé sur le PC distant","text":"<p>Maintenant que l'on a notre clé, on doit la partager au PC distant, pour se faire, on devra une dernière fois utiliser les identifiants de l'utilisateur du PC distant via la commande :</p> <p><code>ssh-copy-id utilisateur@adresse_ip_du_pc_distant</code></p> <p>On nous demandera alors le mot de passe de l'utilisateur distant et enfin l'action sera effectuée, notre PC hôte est maintenant authentifié par le PC distant !</p> <p>La commande ici à tout simplement copié notre clé publique crée plus tôt id_ed25519.pub avec la commande ssh-copy-id et l'a rangée dans un registre de clés dans le fichier rangé dans le répertoire .ssh/authorized_keys.</p>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#etape-3-essayer-cette-configuration","level":2,"title":"Étape 3 : Essayer cette configuration","text":"<p>Pour tester si tout fonctionne, il faut tout simplement lancer une connexion SSH avec la commande :</p> <p><code>ssh utilisateur@adresse_ip_du_pc_distant</code></p> <p>Si aucun mot de passe n'a été demandé, c'est que le PC distant nous à bien reconnu, c'est carré dans l'axe !</p>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#optionnel-mais-recommande-desactiver-les-identifiants-utilisateur","level":2,"title":"Optionnel mais recommandé : Désactiver les identifiants utilisateur","text":"<p>Pour sécuriser le PC distant d'intrusions avec les identifiants qui auraient pu fuiter, on peut désactiver l'authentification via les identifiants utilisateur en éditant le fichier de configuration du SSH avec cette commande sur le PC distant :</p> <p><code>sudo nano /etc/ssh/sshd_config</code></p> <p>Dans ce fichier, une ligne nous interesse, celle-ci :</p> <p><code># PasswordAuthentication no</code></p> <p>On retire le # et voila, l'authentification via le mot de passe est désactivé. Plus qu'a lancer une commande qui redémarre le serveur SSH du PC :</p> <p><code>sudo systemctl restart ssh</code></p> <p>Et c'est tout bon, on a configuré un accès SSH proprement avec un PC distant.</p>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-03-04/","level":1,"title":"C'est quoi un Administrateur Système ?","text":"<p>Un Admin Système, SysAdmin en anglais (terme le plus courant), est le couteau suisse du système informatique de l'entreprise. Il se charge de gérer toute l'infrastructure d'une entreprise en quatre grands axes :</p> <ul> <li>L'Installation et la Maintenance : Il monte les serveurs (physiques ou virtuels), installe les systèmes d'exploitation (Windows Server, Linux), et s'assure qu'ils sont toujours à jour.</li> <li>La Gestion des Utilisateurs : C'est lui qui gère le fameux Active Directory (ou équivalent). Il crée les comptes des nouveaux employés, gère les mots de passe, et définit qui a le droit d'accéder à quel dossier ou à quelle application.</li> <li>La Sécurité et les Sauvegardes : C'est une mission critique. Le SysAdmin configure les pare-feu (Firewalls), gère les antivirus centralisés, et surtout, il met en place les sauvegardes (Backups). En cas de crash ou de cyberattaque, c'est lui qui doit restaurer les données (ce qu'on appelle le PRA : Plan de Reprise d'Activité).</li> <li>Le Monitoring et le Dépannage : Il a souvent les yeux rivés sur des écrans de supervision. Si un serveur manque d'espace disque ou si le réseau ralentit, il est alerté et doit résoudre le problème, souvent avant même que les utilisateurs ne s'en rendent compte (résolution des tickets d'incidents).</li> </ul>","path":["Notes","🧰 SysAdmin","C'est quoi un Administrateur Système ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/sysadmin/2026-03-04/#competences-techniques-hard-skills","level":2,"title":"Compétences techniques (Hard Skills)","text":"<p>Un bon SysAdmin ne connaît pas tout, mais il maîtrise ces fondamentaux :</p> <ul> <li>Les Systèmes d'Exploitation (OS) : Windows Server (très présent en entreprise classique) et Linux (Debian, Ubuntu, RedHat - incontournable pour le web et le Cloud).</li> <li>La Virtualisation : Aujourd'hui, on met rarement un seul système sur un serveur physique. Il utilise des outils comme VMware, Hyper-V ou Proxmox pour créer des \"machines virtuelles\" (VM).</li> <li>Le Réseau de base : Il doit comprendre comment les machines se parlent (adresses IP, DNS pour les noms de domaine, DHCP, création de VPN pour le télétravail).</li> <li>Le Scripting (L'automatisation) : Pour éviter de faire 100 fois la même action (comme créer 100 comptes utilisateurs), il écrit des scripts en PowerShell (pour Windows) ou en Bash/Python (pour Linux). C'est précisément cette compétence qui fait le pont vers la spécialité DevOps/SRE.</li> </ul>","path":["Notes","🧰 SysAdmin","C'est quoi un Administrateur Système ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/sysadmin/2026-03-04/#competences-sociales-soft-skills","level":2,"title":"Compétences sociales (Soft Skills)","text":"<p>C'est un métier qui demande un tempérament particulier :</p> <ul> <li>Une gestion du stress à toute épreuve : Quand le serveur principal tombe en panne à 10h du matin et que 500 employés ne peuvent plus travailler, il faut garder son sang-froid.</li> <li>Un esprit d'analyse (Troubleshooting) : Être capable de remonter méthodiquement à la source d'un problème complexe (Est-ce le réseau ? Le serveur ? L'application ? Le poste de l'utilisateur ?).</li> <li>Le sens du service : Même s'il travaille sur des machines, il travaille avant tout pour que les humains puissent faire leur métier.</li> </ul>","path":["Notes","🧰 SysAdmin","C'est quoi un Administrateur Système ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/sysadmin/2026-03-04/#levolution-de-carriere","level":2,"title":"L'Évolution de Carrière","text":"<p>On reste rarement SysAdmin toute sa vie. Voici l'évolution classique d'un technicien système :</p> <ol> <li>SysAdmin Junior : Support technique N2/N3, résolution de tickets, tâches d'administration quotidiennes.</li> <li>SysAdmin Confirmé / Ingénieur Système : Conception de l'architecture complexe, gestion de gros projets d'infrastructure.</li> <li>Ingénieur Cloud : On passe de la gestion manuelle des serveurs physiques à la gestion automatisée d'infrastructures externalisées (AWS, Azure).</li> <li>DevOps / SRE (Site Reliability Engineer) : Le stade ultime de l'automatisation, où l'infrastructure est gérée comme du code de développement (Infrastructure as Code).</li> </ol>","path":["Notes","🧰 SysAdmin","C'est quoi un Administrateur Système ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/sysadmin/bash/2025-11-27/","level":1,"title":"Commandes *sh pour les idiots","text":"<ol> <li> <p>sudo : lance une commande avec les superdroits, peut manipuler tout le pc avec en gros <pre><code>sudo [commande]\n</code></pre></p> </li> <li> <p>ls : liste les fichiers d'un dossier <pre><code># -a pour afficher les fichiers cachés / -l pour afficher en liste avec plus d'infos\nls [options] [fichier|dir]\n</code></pre></p> </li> <li> <p>cd : changer de dossier <pre><code># ~ pour aller au répertoire home / .. pour revenir en arriere\ncd [dir]\n</code></pre></p> </li> <li> <p>pwd : affiche le répertoire actuel <pre><code>pwd\n</code></pre></p> </li> <li> <p>touch : affiche le contenu d'un fichier <pre><code>touch [fichier]\n</code></pre></p> </li> <li> <p>nano : éditeur de texte <pre><code>nano [fichier]\n</code></pre></p> </li> <li> <p>mkdir : supprime ce qu'on lui donne <pre><code>mkdir [options] [fichier|dir]\n</code></pre></p> </li> <li> <p>rm : supprime ce qu'on lui donne <pre><code># -r pour supprimer un dossier et son contenu (recursive) (`rmdir` le fait aussi)\n# -f force la commande\nrm [options] [fichier|dir]\n</code></pre></p> </li> <li> <p>cp : copie... <pre><code>cp [options] [source] [destination]\n</code></pre></p> </li> <li> <p>mv : ...et déplace <pre><code>mv [options] [source] [destination]\n</code></pre></p> </li> </ol>","path":["Notes","🧰 SysAdmin","📚 Bases du Bash","Commandes *sh pour les idiots"],"tags":["Bash","UNIX"]},{"location":"learn/sysadmin/bash/2025-11-28/","level":1,"title":"Commandes *sh avancées","text":"","path":["Notes","🧰 SysAdmin","📚 Bases du Bash","Commandes *sh avancées"],"tags":["Bash","UNIX"]},{"location":"learn/sysadmin/bash/2025-11-28/#permissions-et-utilisateurs","level":2,"title":"Permissions et Utilisateurs","text":"<p><code>chmod [droits] [fichier]</code> - change les permissions d'un fichier (qui peut lire/écrire/exécuter) - <code>chmod +x [fichier]</code> rend un script exécutable (très important) - <code>chmod 777 [fichier]</code> donne tous les droits à tout le monde (dangereux mais ça dépanne)</p> <p><code>chown [user]:[groupe] [fichier]</code> - change le propriétaire du fichier (si t'as copié un truc en sudo et que tu peux plus le toucher)</p>","path":["Notes","🧰 SysAdmin","📚 Bases du Bash","Commandes *sh avancées"],"tags":["Bash","UNIX"]},{"location":"learn/sysadmin/bash/2025-11-28/#lecture-et-recherche-dans-les-fichiers","level":2,"title":"Lecture et recherche dans les fichiers","text":"<p><code>cat [fichier]</code> - affiche tout le contenu d'un fichier d'un coup dans le terminal - utile pour les petits fichiers, sinon ça inonde l'écran</p> <p><code>less [fichier]</code> - affiche le contenu page par page (on peut scroller) - appuyer sur <code>q</code> pour quitter</p> <p><code>head [fichier]</code> / <code>tail [fichier]</code> - affiche juste le début (<code>head</code>) ou la fin (<code>tail</code>) d'un fichier - <code>tail -f [fichier]</code> hyper utile pour voir les logs en direct (ça attend les nouvelles lignes)</p> <p><code>grep [mot] [fichier]</code> - cherche un mot ou une phrase spécifique dans un fichier (le ctrl+f du terminal) - -r pour chercher dans tous les dossiers (recursive) / -i pour ignorer les majuscules</p>","path":["Notes","🧰 SysAdmin","📚 Bases du Bash","Commandes *sh avancées"],"tags":["Bash","UNIX"]},{"location":"learn/sysadmin/linux/2025-10-30/","level":1,"title":"C'est quoi Linux ?","text":"<p>Selon Wikipédia...</p> <p>Linux (parfois nommé GNU/Linux) est un système d'exploitation open source de type Unix, basé sur le noyau Linux créé en 1991 par Linus Torvalds. (source)</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-30/#la-philosophie-derriere-linux","level":2,"title":"La philosophie derrière Linux","text":"<p>Contrairement à Windows ou macOS qui sont des systèmes fermés, Linux se différencie par son architecture totalement ouverte (Open Source).</p> <p>C'est un système d'exploitation (OS) conçu pour donner une liberté totale et qui en fait sa force avec :</p> <ul> <li>La bidouille : On a le contrôle total sur la machine. On peut tout modifier, comprendre comment ça fonctionne en profondeur et adapter l'OS aux besoins.</li> <li>La transparence : Aucun logiciels pré-installés (bloatwares), d'outils de pistage ou encore de politiques IA désastreuses.</li> </ul>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-30/#lanatomie-dun-systeme-linux-gnulinux","level":2,"title":"L'anatomie d'un système Linux (GNU/Linux)","text":"<p>Souvent, quand on dit \"J'installe Linux\", c'est un abus de langage. En réalité, un système d'exploitation basé sur Linux est composé de plusieurs couches :</p> <p>-&gt; Le Noyau (GNU/Linux) : C'est le cœur de la machine, il fait le pont entre les composants \"Hardware\" (CPU, RAM) et le logiciel \"Software\".</p> <p>-&gt; L'environnement de base et les Paquets (Packages) : Le noyau seul ne suffit pas. Pour interagir avec lui, on y ajoute des couches comme les outils de base (bash, ls, cd (ce sont des mini programmes à eux seuls !)), également les logiciels sous forme de packages (une sorte d'archive) et les gestionnaires de tout ce beau monde (Gestionnaire de Paquets comme APT chez debian ou DNF chez Red Hat)</p> <p>-&gt; L'Interface Graphique (Desktop Environment, DE) : Contrairement à Windows qui impose son design, sur Linux on peut choisir son interface visuelle. Que ce soit Gnome (très épuré, style macOS), KDE (très personnalisable, style Windows), ou Cinnamon, l'interface n'est qu'une couche graphique que l'on rajoute par-dessus.</p> <p>Info</p> <p>Il n'est pas forcément obligatoire d'avoir une Interface Graphique (GUI), Linux en dehors d'un usage d'utilisateur classique, fonctionne sous forme de terminal tout simplement (CLI). On retrouve cet usage sur quasiment tous les serveurs du monde !</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-30/#les-distributions-distros","level":2,"title":"Les Distributions (Distros)","text":"<p>Une \"Distribution\" (ou Distro), c'est simplement un pack prêt à l'emploi qui regroupe un noyau, une sélection de paquets logiciels et une interface graphique.</p> <p>Il en existe des milliers de distros, mais elles se divisent globalement en 3 grandes familles :</p> <p>1. La famille Debian (La Stabilité)</p> <p>C'est le bloc dur de Linux. Les paquets ne sont pas toujours à la dernière version, mais le système est extrêmement stable et fiable.</p> <p>Les distros connues basées dessus : Ubuntu, Linux Mint, Pop OS. (Idéal pour les débutants).</p> <p>2. La famille Arch Linux (La Liberté et la Nouveauté)</p> <p>Le système est toujours à la pointe de la dernière nouveauté grace au systeme du \"Rolling Releases (mise à jour en continu)\", mais c'est beaucoup plus compliqué à gérer et ça peut \"casser\" si on ne sait pas ce qu'on fait.</p> <p>Les distros connues basées dessus : Arch Linux, Manjaro, Steam OS (l'OS du Steam Deck).</p> <p>3. La famille Red Hat (L'Entre-deux)</p> <p>Un excellent compromis entre une grande stabilité pour les serveurs et des paquets relativement récents pour les utilisateurs.</p> <p>Les distros connues basées dessus : Fedora, CentOS, Alma Linux.</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-30/#ou-utilise-t-on-linux","level":2,"title":"Où utilise-t-on Linux ?","text":"<p>-&gt; Les Serveurs : L'immense majorité du web et des infrastructures cloud (AWS, serveurs web, bases de données) tourne sous Linux.</p> <p>-&gt; Les Smartphones : Android est basé sur le noyau Linux</p> <p>-&gt; L'embarqué et les Supercalculateurs : Les box internet, les TV connectées, les voitures...</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-31/","level":1,"title":"Arborescence type sur UNIX","text":"<p>Unix a généralement cette arborescence que ce soit sur n'importe quelle distro Linux également Android pour les téléphones et même quelques similitudes sur macOS.</p> <p><pre><code>/               # Racine du disque\n├── /bin/       # Contient les commandes de base\n├── /boot/      # Fichiers de demarrage\n├── /dev/       # Tout ce qui est lié aux périphériques\n├── /etc/       # Fichiers de configuration\n├── /home/      # Répertoires utilisateurs\n├── /lib/       # Bibliothèques logicielles\n├── /mnt/       # Point de montage pour les systèmes de fichier temporaires\n├── /media/     # Point de montage pour les disques temporaires\n├── /opt/       # Logiciels optionnels, la ou on installera des programmes maison\n├── /root/      # Répertoire du user root\n├── /var/       # Variable, contient des logs, ect...\n├── /usr/       # Contient sensiblement la même chose que la racine mais sans être utile au fonctionnement du système\n├── /srv/       # Services hébergés sur le systèmes (FTP, HTTP, ect...)\n├── /run/       # Emplacement mémoire des programmes\n└── /tmp/       # Temporaire\n</code></pre> source de l'arbo.</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","Arborescence type sur UNIX"],"tags":["Linux","UNIX","Sysadmin"]},{"location":"projects/2025-12-05/","level":1,"title":"Alternavive GLSI léger : Grabber","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#alternavive-glsi-leger-grabber","level":1,"title":"Alternavive GLSI léger : Grabber","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#introduction-au-projet","level":2,"title":"Introduction au projet","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#besoin","level":3,"title":"Besoin","text":"<p>Grabber part d'un besoin de gérer un petit parc informatique (dizaines d'ordinateurs) dans un espace de travail (type entreprise). On peut déja noter certains besoins majeurs : gérer des ordinateurs à distance, connaitre d'un coup d'oeil leur état (updates, hardware, software) et établir une liste de liens entre ordinateurs et employés.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#solution","level":3,"title":"Solution","text":"<p>Grabber donc serait dans l'idée capable de répondre à ces besoins, via une interface web administrateur consultable par la DSI d'une entreprise par exemple. Pour la gestion d'un parc informatique de petite taille/toute petite, on proposera un produit simple, léger et plug and play. Via une simple commande de terminal et une configuration au préalable des ordinateurs cibles capable de recevoir des requêtes SSH, Grabber sera capable de couvrir un maximum des besoins.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#choix-de-la-stack-technologique","level":2,"title":"Choix de la stack technologique","text":"<p>Le projet en général se basera sur du Bash et du Python pour gérer l'API et le panel Admin.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#-bash","level":3,"title":"-&gt; Bash","text":"<p>Les scripts Bash se contenteront de \"fetch\" les données système (via des commandes comme lscpu ou la librairie inxi). Ils auront aussi le rôle d'empaqueter ces données en format JSON (via jq) à un serveur qui les enregistrera dans une BDD. Et enfin, ils seront un peu l'agent qui contrôle la machine via des contrôles du systeme (vérif. admin, réglages du serveur, lanceur du serveur...)</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#-python-django-gunicorn-whitenoise","level":3,"title":"-&gt; Python (Django + Gunicorn + Whitenoise)","text":"<p>Django s'occupera de traiter les données brutes du script Bash et les enregistrer dans une BDD. De plus, il s'occupera de la logique du panel Admin via ses outil préfabriqués. Pour servir notre app Django en production, on utilise la dépendance Gunicorn qui pourra gérer le multi-tâches via des \"Workers\" et tenir les standards d'une webapp classique. Gunicorn sera accompagné de Whitenoise, un outil en plus qui gèrera les fichiers statiques (CSS/JS) que ne gère pas nativement Gunicorn.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#-sqlite","level":3,"title":"-&gt; SQLite","text":"<p>Pour le moment, SQLite est le meilleur choix pour sa simplicité et sa taille minimale, elle est stockée en local, ne nécessite pas plus de préparations spécifiques car déjà prête à l'emploi avec Django.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#architecture-technique","level":2,"title":"Architecture technique","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#chef-du-service-grabbersh","level":3,"title":"Chef du service : grabber.sh","text":"<p>Ce script aura un rôle majeur dans le projet, il sera le chef d'orchestre du service et se chargera de gérer le panel admin et le serveur Django ainsi que l'environnement Python et d'être le centre des commandes en sécurisant le service avec un token dynamique</p> <p>Entre autre, il devra :</p> <p>-&gt; Initialiser l'environnement virtuel Python (nommé gbvenv)</p> <p>-&gt; Gérer les dépendances requises (fonction requirements qui vérifie si l'hôte a bien les requis tels que jq, sqlite3 et python) </p> <p>-&gt; Génère si besoin les clés SSH nécessaires pour sécuriser la connexion de l'API</p> <p>-&gt; Vérifier la présence d'un compte super-user dans Django (important pour se logger au panel Admin, via le lancement d'un script Python \"lib/check_admin.py\")</p> <p>-&gt; Collecte les fichiers statiques depuis un dossier \"static\" afin de préparer le CSS pour Whitenoise</p> <p>-&gt; Automatiser le processus de \"migrations\" (python manage.py migrate)</p> <p>-&gt; Créer un token de session qui sécurisera les communications entre Django &lt;-&gt; Grabber &lt;-&gt; Alfred</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#lagent-de-collecte-alfredrun","level":3,"title":"L'agent de collecte : alfred.run","text":"<p>Info</p> <p>Au départ une fonction inclue dans grabber.sh, il a finalement été décidé de séparer les deux pour plus de lisibilité et de facilité sur la suite pour être executé en autonomie dans une machine cible.</p> <p>Son rôle est de fetch les données de la cible dont on a besoin pour répondre au besoin, données Hardware et Software. Toujours en Bash pour sa facilité d'utilisation dans des tâches d'extraction de données de l'OS. </p> <p>En résumé, il devra donc :</p> <p>-&gt; Récupérer les données système (avec des outils natifs comme les netutils ou bien la librairie externe inxi)</p> <p>-&gt; Empaqueter ces données en un objet JSON (avec jq)</p> <p>-&gt; Envoyer les données via une requête à l'endpoint du serveur Django (avec une requête HTTP POST curl)</p> <p>-&gt; Renvoyer le token de session pour sécuriser la communication</p> <p>-&gt; Le tout est codé dans un paquet .run qui contient les librairies requises comme jq et inxi pour être utilisable sur un maximum d'ordinateurs Linux (compilé avec makeself)</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#cerveau-serveur-api-via-django","level":3,"title":"Cerveau serveur : API via Django","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#deploiement-dalfred","level":4,"title":"Déploiement d'Alfred","text":"<p>Pour déployer Alfred sur une machine, on utilisera SSH pour envoyer le script dans un PC cible. On veut que cette tâche soit lancée directement depuis le panel Admin.</p> <p>Pour se faire, on délègue celle-ci à Python avec Django qui l'effectuera avec un formulaire qui contient l'IP sur laquelle aller, le username et le mot de passe du SSH cible.</p> <p>Warning</p> <p>Puisque l'IP envoyée à la machine cible est récupérée via request.get_host(), l'administrateur doit impérativement accéder au panel Admin de Grabber via l'adresse IP réseau de la machine (ex: 192.168.x.x:8000) et non via localhost:8000. Sinon, le PC cible tentera d'envoyer ses données à son propre localhost et la base de données restera vide. </p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#requete-avec-paramiko","level":5,"title":"Requête avec Paramiko","text":"<p>C'est la solution trouvée pour gérer cette demande, Paramiko est une librairie Python installable avec pip qui peut établir la session SSH et le fera depuis le backend Django (dans actions.py -&gt; fonction deploy_ssh)</p> <p>Le cycle de la requête est le suivant :</p> <pre><code>-&gt; Connexion SSH à la cible. \n   (Via la clé SSH d'abord, puis si refus, via les identifiants donnés par l'utilisateur)\n\n-&gt; Si l'authentification via la clé n'a pas fonctionné, \n   on envoie notre clé SSH hôte sur la machine distante\n\n-&gt; Transfert SFTP de l'exécutable alfred.run vers le répertoire temporaire /tmp/.\n\n-&gt; Exécution distante en injectant l'IP du serveur (request.get_host()) et \n   le Token de session.\n\n-&gt; Nettoyage des traces (rm /tmp/alfred.run).\n</code></pre>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#protection-de-lapi-avec-un-token-dauthentification-session_token","level":4,"title":"Protection de l'API avec un Token d'Authentification (SESSION_TOKEN)","text":"<p>Info</p> <p>Ne faut pas confondre ce token destiné aux communications inter-machines avec les sessions administrateurs du panel web, qui sont elles gérées directement par la base de données SQLite.</p> <p>Comme dit plus tôt, <code>grabber.sh</code> génère un token unique (faisant office de clé d'API) avec la commande <code>openssl rand</code> à chaque lancement du serveur. Ce token est temporairement stocké dans <code>settings.json</code> et est automatiquement réinitialisé à la fermeture du script (via la commande <code>trap</code> qui lance la fonction <code>cleanup</code>).</p> <p>Du côté serveur, lors du démarrage de l'application par Gunicorn, le fichier <code>config/settings.py</code> se charge de lire <code>settings.json</code> et de charger cette clé en mémoire dans la variable globale <code>SESSION_TOKEN</code>.</p> <p>Enfin, lorsqu'une requête est émise par Alfred, Django intercepte et vérifie cette clé via la vue dédiée dans <code>web/api.py</code>. Il extrait la clé envoyée de manière sécurisée dans les en-têtes HTTP de la requête <code>curl</code> (précisément le header <code>HTTP_X_API_KEY</code>) et la compare avec celle en mémoire. Si les clés correspondent, les données matérielles sont traitées, sinon, la connexion est immédiatement rejetée avec une erreur 401 (Accès refusé).</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#panel-admin","level":4,"title":"Panel Admin","text":"<p>Il est une partie de l'app Django et présente dans une interface HTML/CSS/JS, une liste des ordinateurs enregistrés, la table SystemInfo avec l'adresse MAC comme clé principale pour chaque PC. Le tout est sécurisé avec le login admin de Django.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#gestion-des-employes","level":5,"title":"Gestion des \"employés\"","text":"<p>Via un petit modal, il est possible d'administrer en plus des ordinateurs, une BDD d'employés (stockée dans la même BDD SQLite) et d'y effectuer des tâches basiques comme créer un employé, le supprimer, l'éditer et l'assigner à un ordinateur depuis la page d'un PC.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#gestion-des-sessions","level":5,"title":"Gestion des sessions","text":"<p>Pour gérer les sessions sur le Panel et éviter que les administrateurs soient déconnectés en naviguant (problème lié à la séparation des mémoires des différents workers de Gunicorn), le système de session de Django a été configuré pour être stocké directement dans la base de données SQLite (SESSION_ENGINE = \"django.contrib.sessions.backends.db\").</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#design","level":5,"title":"Design","text":"<p>Le CSS et le design utilisent la librairie Tailwind en mode CLI. Concrètement, on télécharge la librairie en local pour travailler avec, on la lance via une commande qui surveille \"watch\" les modifications, puis lorsque l'on a fini, on empaquete notre CSS avec le strict necessaire \"minify\". En savoir plus</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#vue-densemble-du-projet-et-conclusions-projet-a-finir-avant","level":2,"title":"Vue d'ensemble du projet et Conclusions (Projet à finir avant)","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#difficultes-rencontrees-et-apprentissages","level":3,"title":"Difficultés rencontrées et apprentissages","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#bilan","level":3,"title":"Bilan","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#axes-damelioration","level":3,"title":"Axes d'amélioration","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2026-01-23/","level":1,"title":"Docs et notes avec Zensical","text":"","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#docs-et-notes-avec-zensical","level":1,"title":"Docs et notes avec Zensical","text":"<p>Note</p> <p>Pendant la création de cette note j'ai migré de mkdocs à Zensicle (maj de mkdocs en meilleur) et donc j'utilise une config qui réutilise les fichiers et la structure mkdocs.</p>","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#pourquoi-faire","level":2,"title":"Pourquoi faire ?","text":"<ul> <li>Tester de créer un nouvel environnement en python</li> <li>Travailler avec des modules pip pour améliorer le projet</li> <li>Changer un peu de grabber</li> </ul>","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#comment-zensicle-marche","level":2,"title":"Comment Zensicle marche","text":"<ul> <li>mkdocs.yml est la navbar du site</li> <li>dossier docs est la racine du site mkdocs</li> </ul>","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#hebergement-via-github-github-actions","level":2,"title":"Hébergement via Github (Github Actions)","text":"<p>Pour héberger mon site de documentation en ligne, j'utilise Github via Github Actions qui est la solution parfaite pour un projet léger comme celui-ci.</p> <p>Docs pour host sur Github</p>","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-02-13/","level":1,"title":"Faire un portfolio en JS moderne","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#faire-un-portfolio-en-js-moderne","level":1,"title":"Faire un portfolio en JS moderne","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#but-du-projet","level":2,"title":"But du projet","text":"<p>Ce projet est un moyen de toucher concrètement au JavaScript avec l'utilisation de React, pour faire un site portfolio personnel dans le but de promouvoir mes compétences personnelles et professionnelles ainsi que mes projets et hobbies à destination des professionnels.</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#stack-de-travail","level":2,"title":"Stack de travail","text":"<p>On doit choisir quelle stack, c'est à dire quel combo d'outils on utilisera pour faire fonctionner le tout. Dans une stack de projet Web moderne, on doit choisir un Moteur, un Framework et le compilateur. Mais à quoi servent-ils ?</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#le-moteur-build-tool","level":3,"title":"Le Moteur (Build tool)","text":"<p>Souvent appelé \"moteur\" par abus de langage, c'est l'outil qui fait tourner tout l'écosystème. Il coordonne le compilateur, le serveur et les fichiers.</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#le-framework","level":3,"title":"Le Framework","text":"<p>Le framework est un ensemble d'outils et de règles de construction. Au lieu de partir d'une page blanche, on utilise des blocs déjà prêtes et ça évite de recréer du code que la communauté aurait déjà écrit.</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#le-compilateur","level":3,"title":"Le Compilateur","text":"<p>C'est le même principe que dans plein d'autres languages comme le C par exemple, il reprend notre code, ici le JSX (un JavaScript mélangé à du HTML) en JS et HTML standard pour qu'un navigateur comprenne correctement.</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#choix","level":3,"title":"Choix","text":"<p>Il existe donc plusieurs Moteurs (Vite, Next.JS, ...), Frameworks (React, Vue, Svelte, ...) et Compilateurs (Babel, SWC, ...) mais pour ce projet on retiendra une stack simple pour un débutant et efficace pour tester et déployer.</p> <p>Stack choisie</p> <ul> <li>Moteur : Vite -&gt; Le moteur le plus rapide, sans fioritures et simple d'utilisation avec des outils de bases très utiles</li> <li>Framework : React -&gt; Le framework le plus populaire avec des tonnes de librairies deja prêtes et une communauté présente</li> <li>Compilateur : JS/SWC -&gt; Très efficace et rapide et simple et utilnous permet d'utilise JS</li> </ul>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#points-importants-du-projet","level":2,"title":"Points importants du projet","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#creation-du-projet","level":3,"title":"Création du projet","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#packages-npm","level":3,"title":"Packages npm","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#hebergement-avec-vercel","level":3,"title":"Hébergement avec Vercel","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#cles-denvironnements","level":3,"title":"Clés d'environnements","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-03-02/","level":1,"title":"Carnet de bord : Stage Admin Sys.","text":"","path":["Projets","Carnet de bord : Stage Admin Sys."],"tags":[]},{"location":"projects/stage/2026-03-03/","level":1,"title":"Étape 1 - Planification et installation Hardware","text":"<p>Tout d'abord, nous définissons les premiers jours ce que nous allons concrètement faire comme projet, l'entreprise à un besoin spécifique :</p>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#definition-du-projet","level":2,"title":"Définition du projet","text":"<p>Objectif : Concevoir et déployer une solution d'infrastructure réseau et de stockage \"clé en main\" pour une TPE. Le système offre les capacités d'un NAS professionnel sécurisé, entièrement administrable via une interface web intuitive, sans nécessiter de compétences en ligne de commande pour l'utilisateur final.</p>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#1-infrastructure-et-reseau-virtualisation","level":2,"title":"1. Infrastructure et Réseau (Virtualisation)","text":"<ul> <li>Hyperviseur : Serveur physique sous Proxmox VE pour la gestion des ressources.</li> <li>Sécurité Périmétrique : Machine virtuelle pfSense gérant le routage, le pare-feu, le DHCP et le DNS local.</li> <li>Serveur Applicatif : Machine virtuelle Debian isolée derrière pfSense, avec accès direct aux ports USB physiques (passthrough) pour les sauvegardes.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#2-architecture-logicielle-stack-technique","level":2,"title":"2. Architecture Logicielle (Stack Technique)","text":"<ul> <li>Système &amp; Monitoring (C) : Développement d'un daemon interagissant avec le noyau pour remonter les métriques de santé (CPU, RAM, SMART) et détecter le branchement de périphériques de stockage (événements <code>udev</code>).</li> <li>Backend &amp; API (Python) : Création d'une API REST (FastAPI/Flask) qui traduit les requêtes web en commandes d'administration système (création d'utilisateurs, modification de <code>/etc/samba/smb.conf</code>, gestion des quotas).</li> <li>Interface Web (JavaScript) : Développement d'un tableau de bord (React ou Vue.js) permettant de piloter le serveur et de visualiser son état en temps réel.</li> <li>Automatisation (Bash / Ansible) : Scripts de déploiement \"Zero Touch\" pour l'installation complète de l'environnement, et scripts <code>rsync</code> pour les sauvegardes automatisées.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#3-enjeux-devops-et-secops","level":2,"title":"3. Enjeux DevOps et SecOps","text":"<ul> <li>Déploiement Reproductible : Industrialisation de l'installation de la VM Debian et de l'ensemble de la pile logicielle.</li> <li>Durcissement (Hardening) : Cloisonnement strict du réseau via pfSense, sécurisation locale avec <code>nftables</code>, et principe de moindre privilège appliqué à l'API Python (via une configuration <code>sudoers</code> restreinte).</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#planification-du-projet","level":2,"title":"Planification du projet","text":"","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-1-cadrage-socle-technique-infrastructure","level":3,"title":"Phase 1 : Cadrage, Socle Technique &amp; Infrastructure","text":"<p>Mise en place de l'environnement matériel, réseau et validation des concepts de base.</p> <ul> <li>Infrastructure et Virtualisation :</li> <li>Installation et configuration d'un hyperviseur Proxmox VE sur la machine physique hôte.</li> <li>Déploiement d'une machine virtuelle pfSense pour gérer le routage, le service DHCP, le DNS local et le pare-feu en amont de l'infrastructure.</li> <li>Création de la VM \"OfficeBox\" (Debian Server) isolée derrière le pfSense, avec configuration des adresses IP statiques.</li> <li>Architecture logicielle : * Définition des standards de code, choix des versions (Python, C, Node/JS) et élaboration des contrats d'API (Endpoints REST).</li> <li>Preuve de concept (POC) : * Test manuel de configuration Samba et Rsync sur la VM Debian.</li> <li>Test du \"passthrough\" USB sous Proxmox pour s'assurer que la VM Debian détecte bien les périphériques physiques branchés au serveur.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-2-developpement-bottom-up-briques-independantes","level":3,"title":"Phase 2 : Développement \"Bottom-Up\" (Briques indépendantes)","text":"<p>Création des composants logiciels isolés.</p> <ul> <li>Brique Système &amp; Backend (Dev A) :</li> <li>Développement de l'API REST en Python (FastAPI ou Flask).</li> <li>Création des fonctions d'interaction système : ajout d'utilisateurs (<code>useradd</code>), modification dynamique de <code>/etc/samba/smb.conf</code>, gestion des quotas de stockage et redémarrage des services.</li> <li>Brique Bas Niveau &amp; Hardware (Dev B) :</li> <li>Développement du Daemon en langage C (service systemd).</li> <li>Extraction des métriques de santé de la VM (CPU, RAM, I/O disques via <code>/proc</code> et <code>sysfs</code>).</li> <li>Implémentation de l'écoute des événements <code>udev</code> pour déclencher automatiquement les scripts Bash de sauvegarde (Rsync) lors de la détection d'un montage USB.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-3-interface-utilisateur-et-integration","level":3,"title":"Phase 3 : Interface Utilisateur et Intégration","text":"<p>Création du frontend et connexion de tous les modules.</p> <ul> <li>Brique Frontend (Dev B ou A) :</li> <li>Maquettage et développement de l'interface d'administration (React ou Vue.js).</li> <li>Implémentation du Dashboard de santé, du panneau de gestion des utilisateurs et du panneau de gestion des partages réseau.</li> <li>Intégration API / Daemon / Front (Dev A et B) :</li> <li>Communication inter-processus : le Daemon C remonte les métriques et alertes (ex: fin de sauvegarde) à l'API Python.</li> <li>Consommation de l'API Python par l'interface web pour un affichage en temps réel.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-4-industrialisation-devops-securite","level":3,"title":"Phase 4 : Industrialisation DevOps &amp; Sécurité","text":"<p>Automatisation du déploiement et durcissement du système.</p> <ul> <li>Scripting de déploiement (Zero Touch) : * Création d'un playbook Ansible ou d'un script Bash d'amorçage pour automatiser l'installation complète de l'application sur une VM Debian vierge (dépendances, compilation du C, services, serveurs web).</li> <li>Sécurité &amp; Hardening (SecOps) :</li> <li>Configuration stricte du pare-feu pfSense (règles NAT/Rules) et du pare-feu local de la VM (<code>nftables</code> / <code>ufw</code>).</li> <li>Isolation des privilèges : exécution de l'API via un utilisateur non-root avec des permissions <code>sudoers</code> granulaires (limitation stricte aux commandes nécessaires).</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-5-tests-grandeur-nature-recette-et-documentation","level":3,"title":"Phase 5 : Tests Grandeur Nature, Recette et Documentation","text":"<p>Validation finale et préparation des livrables.</p> <ul> <li>Tests End-to-End : * Re-déploiement complet automatisé sur une VM vierge.</li> <li>Scénarios de tests réels : simulation d'attaques basiques (pour tester pfSense), montage/démontage de disques USB physiques, tests de charge réseau via les partages Samba.</li> <li>Livrables et Documentation : * Rédaction du README technique et de la documentation de l'API.</li> <li>Création des schémas d'architecture réseau (Proxmox/pfSense/VM).</li> <li>Rédaction du manuel utilisateur simplifié destiné aux employés de la TPE.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-09/","level":1,"title":"Étape 2 : Configuration de l'Infrastructure Serveur","text":"","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#1-installation-du-routeur-pfsense-machine-virtuelle","level":2,"title":"1. Installation du Routeur pfSense (Machine Virtuelle)","text":"<ul> <li>Préparation : Décompression de l'image <code>.iso.gz</code> en <code>.iso</code>.</li> <li>Création VM : Installation avec format de disque Auto (ZFS).</li> <li>Attribution des interfaces (Proxmox) : * <code>vmbr1</code> (Lié à la carte physique branchée au mur) ➔ WAN de pfSense.<ul> <li><code>vmbr0</code> (Réseau local interne) ➔ LAN de pfSense.</li> </ul> </li> </ul>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#2-configuration-du-reseau-local-lan-resolution-de-conflit","level":2,"title":"2. Configuration du Réseau Local (LAN) &amp; Résolution de conflit","text":"<p>L'objectif était de séparer le réseau de la résidence (10.x.x.x) de notre réseau privé. * Adressage LAN : Changement de l'IP du LAN pfSense (via sa console) en 192.168.10.1/24. * Serveur DHCP : Activation sur pfSense (plage <code>192.168.10.50</code> à <code>192.168.10.200</code>) pour attribuer automatiquement des IP aux futures VMs et aux PC physiques branchés au serveur.</p>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#3-configuration-reseau-de-proxmox-lhyperviseur","level":2,"title":"3. Configuration Réseau de Proxmox (L'Hyperviseur)","text":"<p>Modification physique du fichier <code>/etc/network/interfaces</code> pour l'aligner sur le nouveau LAN. * Interface LAN (<code>vmbr0</code>) : Attribution de l'IP statique 192.168.10.2/24 avec 192.168.10.1 comme passerelle (gateway). * Interface WAN (<code>vmbr1</code>) : Passage en mode manuel sans aucune IP ni passerelle pour empêcher Proxmox d'être exposé directement au réseau du bâtiment.</p>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#4-deblocage-de-lacces-internet-wan-portail-captif","level":2,"title":"4. Déblocage de l'accès Internet (WAN &amp; Portail Captif)","text":"<ul> <li>Pare-feu pfSense : Désactivation des sécurités Block private networks et Block bogon networks sur l'interface WAN pour autoriser l'IP <code>10.x.x.x</code> fournie par la résidence.</li> <li>Authentification : Depuis un PC connecté au LAN, navigation vers <code>http://neverssl.com</code> pour déclencher et valider la page de connexion (Portail Captif) de la résidence.</li> </ul>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#5-acces-distant-securise-tailscale-subnet-routing","level":2,"title":"5. Accès Distant Sécurisé (Tailscale &amp; Subnet Routing)","text":"<p>Contournement de la sécurité \"Client Isolation\" du réseau Wi-Fi de la résidence. * Installation : Ajout du paquet Tailscale sur pfSense et connexion via une clé d'authentification (Auth Key). * Règle Pare-feu : Création d'une règle Pass All (tout autoriser) sur la nouvelle interface Tailscale dans pfSense. * Subnet Routing : * Déclaration du réseau 192.168.10.0/24 dans les Advertised Routes des paramètres Tailscale de pfSense.     * Approbation manuelle de cette route sur le panel d'administration web de Tailscale. * Bénéfice : Accès global à <code>https://192.168.10.1</code> (pfSense) et <code>https://192.168.10.2:8006</code> (Proxmox) depuis n'importe où, sans câble.</p>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#6-creation-et-configuration-de-la-vm-debian-serveur","level":2,"title":"6. Création et Configuration de la VM Debian (Serveur)","text":"<ul> <li>Optimisation Proxmox : Création de la VM avec type CPU <code>Host</code>, contrôleur <code>VirtIO SCSI single</code>, disque avec option <code>Discard</code> (TRIM), et carte réseau <code>VirtIO (paravirtualized)</code> sur le bridge <code>vmbr0</code>.</li> <li>Installation OS : Installation minimale (sans interface graphique) avec uniquement l'option SSH server cochée.</li> <li>IP Fixe (Static Mapping) : Sur pfSense (Services &gt; DHCP Server &gt; LAN), réservation d'une adresse IP fixe hors plage dynamique (ex: 192.168.10.100) liée à l'adresse MAC virtuelle de la VM Debian.</li> <li>Accès Final : Connexion SSH réussie depuis l'extérieur en utilisant l'IP locale <code>192.168.10.100</code> grâce au routage Tailscale.</li> </ul>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/projet/","level":1,"title":"Spécification de Projet : \"GrabberBoxTea\"","text":"<p>Solution d'Infrastructure \"Clé en Main\" pour TPE</p>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#contexte-et-objectif","level":2,"title":"Contexte et Objectif","text":"<p>Pour une TPE qui a des besoins sysops spécifiques mais voulant garder un controle total de leurs données sans avoir à dépendre d'outils externes (ex. Google, AWS)</p> <p>L'entreprise a des besoins spécifiques tels que : - Accéder aux données de l'entreprise partout à l'intérieur comme à l'extérieur de l'entreprise - Donner des accès spécifiques à des monteurs freelances, dans le cadre d'une amélioration de la communication - Pouvoir manager le serveur via une interface simple et accessible (Pas de DSI, gestion par les employés, niveau confirmé) - BONUS: Avoir des outils de travaux collaboratifs intégrés au cloud pour éditer des données partout (ex. Comptabilité,...)</p>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#architecture-technique","level":2,"title":"Architecture Technique","text":"<p>Le système repose sur une architecture en couches distinctes, exploitant des langages spécifiques pour chaque niveau de responsabilité :</p> <ul> <li>Linux (Base Système) : Système d'exploitation hôte (ex: Debian ou Alpine). Gestion avancée du partitionnement (LVM), durcissement de la sécurité (Hardening) et gestion des droits utilisateurs.</li> <li>Bash (Provisioning &amp; Automatisation) : Scripts d'installation \"Zero Touch\". Responsable du déploiement initial, de la configuration réseau et de l'installation des dépendances.</li> <li>C (Daemon de Monitoring) : Développement d'un service systemd léger. Il interagit directement avec le noyau pour surveiller l'intégrité matérielle (SMART, température) et système (intégrité des fichiers critiques) avec une empreinte ressource minimale.</li> <li>Python (Backend &amp; Orchestration) : API REST (Flask/FastAPI). Elle agit comme passerelle entre l'interface utilisateur et les commandes système, gérant la logique métier et l'exécution sécurisée des tâches administratives.</li> <li>JavaScript (Frontend) : Interface d'administration web (Dashboard). Permet à l'utilisateur final de piloter le serveur graphiquement.</li> </ul>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#fonctionnalites-cles","level":2,"title":"Fonctionnalités Clés","text":"","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#a-gestion-du-stockage-module-pythonbash","level":3,"title":"A. Gestion du Stockage (Module Python/Bash)","text":"<ul> <li>Configuration dynamique du serveur de fichiers (Samba/NFS) via l'interface web.</li> <li>Gestion des utilisateurs et attribution de quotas de stockage.</li> <li>Modification automatisée des fichiers de configuration (<code>/etc/samba/smb.conf</code>) et rechargement des services à la volée.</li> </ul>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#b-sauvegarde-automatisee-sur-evenement-module-cbash","level":3,"title":"B. Sauvegarde Automatisée sur Événement (Module C/Bash)","text":"<ul> <li>Système de détection matériel : le daemon en C écoute les événements <code>udev</code> pour détecter la connexion de périphériques USB spécifiques.</li> <li>Déclenchement automatique d'un script de synchronisation (Bash/Rsync) lors du montage du disque.</li> <li>Remontée du statut de la sauvegarde vers l'API.</li> </ul>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#c-tableau-de-bord-de-sante-module-cjs","level":3,"title":"C. Tableau de Bord de Santé (Module C/JS)","text":"<ul> <li>Visualisation en temps réel des métriques vitales (CPU, RAM, I/O Disque).</li> <li>Lecture optimisée des pseudo-systèmes de fichiers <code>/proc</code> et <code>/sys</code> par le module C pour une latence minimale.</li> </ul>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#4-dimension-devops-et-administration-systeme","level":2,"title":"4. Dimension DevOps et Administration Système","text":"<p>Le projet intègre les meilleures pratiques d'ingénierie système :</p> <ol> <li>Packaging et Déploiement : Livraison sous forme de script d'installation global ou d'image système pré-configurée (ISO). Utilisation possible d'Ansible pour la configuration initiale.</li> <li>Sécurité (SecOps) : Configuration de pare-feu (<code>nftables</code>), isolation des processus, et mise en place de HTTPS automatisé.</li> <li>Conteneurisation : Isolation possible des briques applicatives (Web/API) via Docker, tout en maintenant les accès privilégiés nécessaires à l'administration de l'hôte.</li> </ol>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#5-flux-operationnel-workflow","level":2,"title":"5. Flux Opérationnel (Workflow)","text":"<ol> <li>Installation : L'administrateur exécute le script Bash d'initialisation sur un serveur vierge. Le système est opérationnel en quelques minutes.</li> <li>Configuration : L'utilisateur se connecte au Dashboard Web local.</li> <li>Action : Une demande (ex: \"Créer un partage 'Compta'\") est envoyée par le Frontend (JS).</li> <li>Exécution : L'API (Python) valide la requête et orchestre les commandes système nécessaires.</li> <li>Utilisation : Les postes clients (Windows/Mac) détectent immédiatement le nouveau volume réseau sécurisé.</li> </ol>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#6-recapitulatif-de-la-stack-technologique","level":2,"title":"6. Récapitulatif de la Stack Technologique","text":"Composant Technologie Rôle Principal OS Debian 12 / Alpine Base stable et sécurisée. Infrastructure Bash + Ansible Provisioning et maintenance. Backend API Python (FastAPI) Logique métier et interface système. Système Langage C Monitoring bas niveau et gestion I/O. Frontend Vue.js / React Interface Homme-Machine (IHM). Protocoles Samba (SMB) / NFS Partage de fichiers hétérogène.","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]}]}
\ No newline at end of file
+{"config":{"separator":"[\\s\\-_,:!=\\[\\]()\\\\\"`/]+|\\.(?!\\d)"},"items":[{"location":"","level":1,"title":"Bienvenue dans mes notes de devops","text":"","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"#bienvenue-dans-mes-notes-de-devops","level":1,"title":"Bienvenue dans mes notes de devops","text":"<p>je note mon parcours et mes projets en SysAdmin</p>","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"#sommaire","level":2,"title":"Sommaire","text":"<p>-&gt; Notes notes de cours, apprentissages en dehors, un peu de tout</p> <p>-&gt; Projets notes sur mes projets de cours/personnels, note de mes experiences</p>","path":["Bienvenue dans mes notes de devops"],"tags":[]},{"location":"links/","level":1,"title":"Liens cools de ma poche","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#design","level":2,"title":"🎨 Design","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"links/#developpement","level":2,"title":"💽 Developpement","text":"","path":["Liens cools de ma poche"],"tags":[]},{"location":"learn/devops/2025-11-28/","level":1,"title":"Automatisation via les associations","text":"<p><code>|</code> (le pipe) -&gt; prend le résultat de la commande de gauche et le donne à celle de droite</p> <p>exemple : liste tout un répertoire, mais n'affiche que les résultats qui sont \"feur\" <pre><code>ls -la | grep \"feur\"\n</code></pre></p> <p><code>&gt;</code> et <code>&gt;&gt;</code></p> <ul> <li>envoie le résultat d'une commande dans un fichier texte</li> <li><code>&gt;</code> écrase le fichier / <code>&gt;&gt;</code> ajoute à la fin sans effacer</li> <li>ex: <code>echo \"coucou\" &gt; fichier.txt</code></li> </ul>","path":["Notes","🔌 DevOps","Automatisation via les associations"],"tags":[]},{"location":"learn/devops/2025-12-12/","level":1,"title":"Git pour les neuilles","text":"","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#creer-un-git","level":2,"title":"Créer un git","text":"","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#-si-le-projet-existe-deja","level":3,"title":"-&gt; Si le projet existe deja","text":"<ul> <li>On clone le projet au sein d'un dossier, celui-ci sera dans son dossier de travail. -&gt; <code>git clone (url du projet git)</code></li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#-sinon-creer-le-projet","level":3,"title":"-&gt; Sinon créer le projet","text":"<ul> <li>Crée le projet git à partir de ce dossier. -&gt; <code>git init (dossier de travail)</code></li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#ignorer-des-fichiersdossiers","level":2,"title":"Ignorer des fichiers/dossiers","text":"<ul> <li>Ajouter des interdictions dans .gitignore</li> </ul> <p><code>echo gbvenv/ &gt;&gt; .gitignore</code> &lt;- on indique via un echo qui écrira dans le fichier .gitignore qu'on ne veut pas push le dossier \"gbvenv\" ici, un fichier on ne mettera pas le slash (logique en amont)</p>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#une-fois-que-de-fichiers-sont-dispos-empaqueter","level":2,"title":"Une fois que de fichiers sont dispos, empaqueter !","text":"<p>Pour envoyer un projet git, c'est comme envoyer un colis à la poste, d'abord, on met nos affaires dans le colis</p> <p>Plusieures possibilités ☝️</p> <ul> <li> <p>Ajoute TOUS les fichiers du dossier via l'option -A ou --all -&gt; <code>git add -A</code></p> </li> <li> <p>Ajoute SEULEMENT les modifications et suppressions (donc pas de nouveaux fichiers) -&gt; <code>git add -u</code></p> </li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#etiqueter-le-paquet","level":2,"title":"Etiqueter le paquet","text":"<p>Ensuite, on rempli l'étiquette du colis et on la colle au colis</p> <ul> <li>On écrit une note recap courte du commit sur le git -&gt; <code>git commit -m \"(message du commit)\"</code></li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#deposer-le-colis","level":2,"title":"Déposer le colis","text":"<p>Enfin pour push, c'est a dire déposer le colis au bureau de poste pour l'envoi, on fait :</p> <ul> <li>On envoie le paquet de l'origine à la branche souhaitée dans le git -&gt; <code>git push -u origin (branche souhaitée)</code></li> </ul> <p>Info</p> <p>-u veut dire ce que dit la doc en gros</p>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#-si-erreur","level":3,"title":"-&gt; SI ERREUR","text":"<p>Dans le cas ou un fichier/dossier a été supprimé autre part avant de push nos modifs</p> <ul> <li>Merge de force les deux branches pour ne faire qu'une branche <code>git config pull.rebase false</code></li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2025-12-12/#utiliser-deux-branches-differentes","level":2,"title":"Utiliser deux branches différentes","text":"<p>Dans le cas ou l'on veut travailler avec une seconde branche</p> <ul> <li> <p>Pour switch de branche de travail -&gt; <code>git checkout (branche souhaitée)</code></p> </li> <li> <p>Pour merge en ecrasant la branche souhaitée ⬇️ <pre><code>git merge -s ours main\ngit checkout main\ngit merge (branche à merge)\n</code></pre></p> </li> </ul>","path":["Notes","🔌 DevOps","Git pour les neuilles"],"tags":["Git","Bash","Devops"]},{"location":"learn/devops/2026-01-22/","level":1,"title":"SQL pour les tung tung tung sahur","text":"","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#modele-mvc","level":2,"title":"Modèle MVC","text":"<p>Le modèle MVC est une façon de concevoir un projet logiciel, en gros on sépare celui-ci en trois grandes parties distinctes séparant la logique de la vue et rend le travail plus facile.</p> <p></p> <p>Modèle MVC en prenant celui de grabber par exemple :</p> <pre><code>- Model = Base De Donnée (ex: EMPLOYEES, COMPUTERS)\n- View = Tableau de bord, Site\n- Controller = Cerveau qui dirige les deux parties Model et View (ex: app.py)\n</code></pre>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#tuto-comment-cr2er-une-bdd-sql-facilement-en-2-minutes-super-facile","level":2,"title":"TUTO : COMMENT CR2ER UNE BDD SQL FACILEMENT EN 2 MINUTES (SUPER FACILE)","text":"","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#structure-dune-base-de-donnees","level":3,"title":"Structure d'une Base De Données","text":"<p>celle de grabber pour l'exemple</p> <pre><code>BDD (Etape 1) - grabberman\n├── TABLES (Etape 2) - COMPUTERS\n│   ├── Colonne (Etape 3) - PcId, entier/clé primaire\n│   │   └── Donnée (Etape 4)\n│   ├── Colonne (Etape 3) - Hostname, chaîne de charactère\n│   └── Colonne (Etape 3) - MacAddress, chaîne de charactère\n└── TABLES (Etape 2) - EMPLOYEES\n    ├── Colonne (Etape 3) - UserId, entier/clé primaire\n    ├── Colonne (Etape 3) - Username, chaîne de charactère\n    └── Colonne (Etape 3) - PcId, clé secondaire\n</code></pre>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#etape-1-creer-une-bdd","level":3,"title":"Etape 1 : Créer une BDD","text":"<p><code>sqlite3 grabberman.db</code> &lt;- Commande qui crée une DB qu'on appellera ici \"grabberman\"</p>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#etape-2-creer-une-table","level":3,"title":"Etape 2 : Créer une table","text":"<pre><code>CREATE TABLE \"COMPUTERS\" \n(\n    PcId INTEGER PRIMARY KEY AUTOINCREMENT, \n    Hostname VARCHAR(50) NOT NULL, \n    MacAddress VARCHAR(50)\n);\n</code></pre> <p>Note</p> <p>Ici on crée une table dans laquelle on stockera des données (des PC que l'on grab par exemple)</p>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#etape-3-ajouter-des-donnees-dans-une-table","level":3,"title":"Etape 3 : Ajouter des données dans une table","text":"<p><code>INSERT into COMPUTERS (Hostname, MacAddress) VALUES ('mypc', '1B:12:F0:FL:94');</code></p> <p>Note</p> <p>Pour ajouter une donnée dans une tableau, on INSERE dans le TABLEAU donné les VALEURS dans les Colonnes</p>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-01-22/#etape-4-creer-un-autre-tableau-avec-une-cle-liee-foreign-key","level":3,"title":"Etape 4 : Créer un autre tableau avec une clé liée (foreign key)","text":"<pre><code>CREATE TABLE \"EMPLOYEES\" \n(\n    UserId INTEGER PRIMARY KEY AUTOINCREMENT, \n    Username VARCHAR(50) NOT NULL, \n    FOREIGN KEY (PcId) REFERENCES COMPUTERS(PcId)\n);\n</code></pre> <p>Note</p> <p>On recommence comme à l'étape 2, en ajoutant une clé étrangère foreign key, qui lie une clé extérieure, PcId ici, dans notre second Tableau</p>","path":["Notes","🔌 DevOps","SQL pour les tung tung tung sahur"],"tags":["SQL","Devops"]},{"location":"learn/devops/2026-03-04/","level":1,"title":"C'est quoi DevOps ?","text":"","path":["Notes","🔌 DevOps","C'est quoi DevOps ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/frontend/2026-02-21/","level":1,"title":"Cheat Sheet Tailwind","text":"<p>Tailwind utilise des classes utilitaires. La logique est souvent <code>[Propriété]-[Taille/Couleur/Valeur]</code>.</p>","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#1-espacement-margin-padding","level":2,"title":"1. Espacement (Margin &amp; Padding)","text":"<p>La syntaxe : <code>[Type][Direction]-[Taille]</code>.</p> <ul> <li> <p>Type : <code>m</code> (Margin / Extérieur) ou <code>p</code> (Padding / Intérieur).</p> </li> <li> <p>Direction : <code>t</code> (Haut), <code>b</code> (Bas), <code>l</code> (Gauche), <code>r</code> (Droite), <code>x</code> (Horizontal), <code>y</code> (Vertical), ou rien (Partout).</p> </li> <li> <p>Taille : Échelle basée sur des multiples de 4px (ex: <code>1</code> = 4px, <code>2</code> = 8px, <code>4</code> = 16px).</p> </li> </ul> Classe Équivalent CSS Explication <code>p-4</code> <code>padding: 16px;</code> Espace à l'intérieur partout. <code>px-6</code> <code>padding-left: 24px; padding-right: 24px;</code> Espace à l'intérieur, à gauche et à droite. <code>mt-2</code> <code>margin-top: 8px;</code> Espace à l'extérieur, vers le haut. <code>mx-auto</code> <code>margin: 0 auto;</code> Centre un bloc horizontalement.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#2-dimensions-width-height","level":2,"title":"2. Dimensions (Width &amp; Height)","text":"<p>La syntaxe : <code>w-[Taille]</code> (Largeur) et <code>h-[Taille]</code> (Hauteur).</p> Classe Équivalent CSS Explication <code>w-full</code> <code>width: 100%;</code> Prend toute la largeur disponible. <code>w-1/2</code> <code>width: 50%;</code> Prend la moitié de la largeur. <code>w-screen</code> <code>width: 100vw;</code> Prend la largeur totale de l'écran. <code>h-screen</code> <code>height: 100vh;</code> Prend la hauteur totale de l'écran. <code>w-16</code> <code>width: 64px;</code> Échelle numérique classique (16 * 4px).","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#3-couleurs","level":2,"title":"3. Couleurs","text":"<p>La syntaxe : <code>[Cible]-[Couleur]-[Intensité]</code>.</p> <p>L'intensité va de <code>50</code> (très clair) à <code>950</code> (très foncé).</p> Cible Exemple Tailwind Ce que ça colore Texte <code>text-blue-500</code>, <code>text-white</code> La couleur de la police. Fond <code>bg-red-600</code>, <code>bg-gray-900</code> La couleur d'arrière-plan. Bordure <code>border-green-400</code> La couleur de la bordure.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#4-typographie","level":2,"title":"4. Typographie","text":"<p>Gérez la taille, la graisse et l'alignement.</p> Catégorie Classes utiles Explication Taille <code>text-xs</code>, <code>text-sm</code>, <code>text-base</code>, <code>text-lg</code>, <code>text-xl</code> Du plus petit au plus grand. Graisse <code>font-light</code>, <code>font-normal</code>, <code>font-semibold</code>, <code>font-bold</code> L'épaisseur des lettres. Alignement <code>text-left</code>, <code>text-center</code>, <code>text-right</code> L'alignement du texte.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#5-flexbox-mise-en-page","level":2,"title":"5. Flexbox (Mise en page)","text":"<p>Déclarez <code>flex</code> pour commencer à aligner vos éléments.</p> Classe Équivalent CSS Explication <code>flex</code> <code>display: flex;</code> Aligne les enfants en ligne (côte à côte). <code>flex-col</code> <code>flex-direction: column;</code> Aligne les enfants en colonne. <code>justify-center</code> <code>justify-content: center;</code> Centre sur l'axe principal. <code>justify-between</code> <code>justify-content: space-between;</code> Écarte les éléments aux extrémités. <code>items-center</code> <code>align-items: center;</code> Centre sur l'axe secondaire (souvent verticalement). <code>gap-4</code> <code>gap: 16px;</code> Ajoute 16px d'espace entre chaque enfant.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#6-bordures-et-arrondis-border-rounded","level":2,"title":"6. Bordures et Arrondis (Border &amp; Rounded)","text":"<p>Il faut toujours spécifier une épaisseur pour voir la bordure.</p> Classe Équivalent CSS Explication <code>border</code> <code>border-width: 1px;</code> Ajoute une bordure de 1px partout. <code>border-t</code> <code>border-top-width: 1px;</code> Bordure uniquement en haut. <code>rounded</code> <code>border-radius: 4px;</code> Arrondit légèrement les angles. <code>rounded-md</code> <code>border-radius: 6px;</code> Arrondi moyen (idéal pour boutons). <code>rounded-full</code> <code>border-radius: 9999px;</code> Fait un cercle parfait ou une pilule.","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/frontend/2026-02-21/#7-etats-et-responsif-prefixes","level":2,"title":"7. États et Responsif (Préfixes)","text":"<p>Préfixez n'importe quelle classe avec un état ou une taille d'écran.</p> <ul> <li>Survol (Hover) : <code>hover:bg-blue-600</code></li> <li>Focus : <code>focus:border-blue-500</code></li> <li>Responsif (Mobile First) : - <code>w-full</code> (100% sur mobile par défaut)</li> <li><code>md:w-1/2</code> (50% sur tablette)</li> <li><code>lg:w-1/3</code> (33% sur grand écran)</li> </ul>","path":["Notes","🎨 Frontend","Cheat Sheet Tailwind"],"tags":[]},{"location":"learn/javascript/2026-01-30/","level":1,"title":"Javascript (30/01/26)","text":"","path":["Notes","☕ Javascript","Javascript (30/01/26)"],"tags":["Javascript"]},{"location":"learn/javascript/2026-02-06/","level":1,"title":"Asynchrone et promesses (06/02/26)","text":"<p>Info</p> <p>Pour le TP, on a besoin de manipuler des fichiers. Mais avant d'utiliser le module file system dit \"fs\" (qui s'occupe de ce besoin), il faut comprendre un fonctionnement de base en informatique, essentielle aux modules faisant des requêtes a des systemes externes comme fs, l'asynchrone. </p>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#cest-quoi-asynchrone","level":2,"title":"C'est quoi Asynchrone ?","text":"<p>Asynchrone permet de ne pas bloquer le code même si il n'a pas de résultat mais avec promesse, il laisse le code continuer pour trouver une réponse et la rapporter comme promis.</p> <p>Rien de mieux qu'un exemple concret et gourmand en amont et en aval.</p>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#1-sans-asynchrone","level":3,"title":"1. SANS Asynchrone","text":"<ol> <li>Tu commandes un Tasty Crousty.</li> <li>Ce neuille de caissier part en cuisine.</li> <li>Il fait cuire le riz lui-même.</li> <li>Il coupe les tenders.</li> <li>Il met tout dans la barquette puis sauce.</li> <li>Et revient pour te donner le Tasty Crousty 67 doro party.</li> <li>SEULEMENT MAINTENANT, il prend la commande du gwer suivant.</li> </ol> <p>Résultat : La file d'attente sort du restaurant. Si la cuisson prend 10 minutes, tout le restaurant est bloqué pendant 10 minutes. Bien guez.</p>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#2-avec-asynchrone","level":3,"title":"2. AVEC Asynchrone","text":"<ol> <li>Tu commandes un Tasty Crouspy.</li> <li>La caissière crie en cuisine \"Un Crousty piquant sucré supplément poulet !\".</li> <li>Elle te donne un bipeur, faisant donc la promesse de te servir un délicieux Crouspy Tasty.</li> <li>Puis elle passe directement au client suivant.</li> <li>Toi, tu vas t'asseoir et tu attends.</li> </ol>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#mais-cest-quoi-cette-promesse-promise","level":2,"title":"Mais c'est quoi cette promesse ? (Promise)","text":"<p>Note</p> <p>☝️🤓 Node.js fonctionne sur un principe de thread unique (monothread)... En gros, il ne peut effectuer qu'une seule tâche à la fois.</p> <p>Alors pour éviter de bloquer le programme pendant de longues opérations (comme lire des données au fin fond du disque dur), il délègue ces tâches a l'ordinateur et utilise un mécanisme de Promesses.</p> <p>Dans notre exemple, la Promise, c'est le bipeur.</p> <p>Ce boîtier est une promesse. Le restaurant te dit : \"Je n'ai pas ton crousty tout de suite, mais je te promets que je te préviendrai dès qu'il y a du nouveau.\"</p> <p>Une Promise a toujours 3 états possibles, et seulement 3 :</p> <ol> <li>En attente (Pending) : Le boîtier ne fait rien. Le cuisinier travaille. Tu attends.</li> <li>Succès (Resolved) : Le boîtier vibre ! La promesse est tenue, tu as ton chicken (la donnée est arrivée).</li> <li>Échec (Rejected) : Le manager arrive et te dit \"Désolé, la cuisine a pris feu, pas de délicieux crousty pour ce soir\". La promesse est rompue (il y a une erreur).</li> </ol>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemples-async-et-await","level":2,"title":"Exemples async et await","text":"","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemple-dun-async-exo-du-tp-2-de-js","level":3,"title":"Exemple d'un async (exo du TP 2 de JS)","text":"<pre><code>files.forEach((fileName) =&gt; {\n    fs.readFile(fileName, 'utf8').then((content) =&gt; {\n        ...\n    })\n});\n</code></pre> <ul> <li><code>fs.readFile</code> : Envoie le job de lire un fichier à l'ordinateur avec des parametres et quand c'est pret, enrengistre son résultat dans <code>content</code>.</li> <li>La Promise : En lançant fs.readFile, celui-ci promet que dès qu'il a un résultat, il le renverra dans <code>content</code></li> </ul>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-06/#exemple-concret-await-exo-du-tp-2-de-js","level":3,"title":"Exemple concret await (exo du TP 2 de JS)","text":"<p>On peut également demander spécifiquement d'attendre le retour d'une promesse avec <code>await</code></p> <pre><code>const stats = await fs.stat(filename);\n</code></pre> <ul> <li><code>fs.stat</code> : Envoie le job de récupérer les stats d'un fichier à l'ordinateur et quand c'est pret, enrengistre son résultat dans <code>stats</code>.</li> <li>La Promise : On te promet un résultat dans <code>stats</code></li> <li><code>**await**</code> : Tant que l'on a pas de résultat, on \"fige\" à cette ligne jusqu'à ce que la promesse est reçue.</li> </ul>","path":["Notes","☕ Javascript","Asynchrone et promesses (06/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/","level":1,"title":"fetch des APIs et serveur HTTP (09/02/26)","text":"","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-et-apis","level":2,"title":"Fetch et APIs","text":"<p>Dans le cadre d'un TP, on a fait des appels à des APIs externes comme celle du CNAM ou encore openweathermap pour intégrer les données actuelles dans un script JS.</p> <p>Pour faire des appels, on utlise la méthode Asynchrone du cours précédent qui nous permettra de faire des appels des APIs sans arrêter le programme en attendant la réponse. Une fonction nous permet de faire cet appel : <code>fetch()</code></p>","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#fetch-le-coursier","level":3,"title":"<code>fetch()</code> (Le coursier)","text":"<p>fetch à le rôle de coursier, c'est lui qui effectuera la requête HTTP (GET par défaut).</p> <ul> <li> <p>Ce que ça fait : Ça envoie un ping à une URL pour aller chercher des data.</p> </li> <li> <p>Et ça renvoie une promesse en attendant la réponse de l'API</p> </li> </ul> <p>Pour traiter nos réponses proprement, on combine nos fetch avec le module json()</p>","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#json-le-traducteur","level":3,"title":"<code>json()</code> (Le traducteur)","text":"<p>Quand <code>fetch</code> revient, il te ramène un gros paquet brut (un <code>Response object</code>).</p> <ul> <li> <p>Ce que ça fait : Ça prend ce paquet et ça le transforme en Objet JavaScript utilisable (avec des accolades <code>{}</code> et tout).</p> </li> <li> <p>Note : C'est aussi asynchrone, donc il faut un <code>await</code> devant aussi.</p> </li> </ul>","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#exemple-du-tp","level":3,"title":"Exemple du TP","text":"<p>Dans une fonction async <code>fetchCityInfo()</code>, on essayera de fetch via cette fonction : <pre><code>// Attend de fetch les données d'une ville donnée par l'utilisateur via la variable cityName\nconst geoRes = await fetch(`https://geoservice.cnam.fr/api/cities?name=${encodeURIComponent(cityName)}`);\n</code></pre></p> <p>Puis on encode les données brutes reçues dans un joli tableau JSON : <pre><code>// La constante cities récupère le résultat geoRes et le range en JSON\nconst cities = await geoRes.json();\n</code></pre></p> <p>Plus tard, on refait un fetch de données avec une clé API pour openweathermap (cas concret en gros) : <pre><code>//Comme tout à l'heure, on fetch les données de l'API et on attend la réponse via await\nconst weatherRes = await fetch(`http://api.weatherapi.com/v1/current.json?q=${encodeURIComponent(cityName)}&amp;key=****`);\n</code></pre></p> <p>Bravo, tu as fait un appel d'API et l'a rangé dans un beau tableau JSON.</p>","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/javascript/2026-02-09/#serveur-http","level":2,"title":"Serveur HTTP","text":"","path":["Notes","☕ Javascript","fetch des APIs et serveur HTTP (09/02/26)"],"tags":["JavaScript","Node.JS"]},{"location":"learn/python/2026-01-16/","level":1,"title":"pip et environnements virtuels","text":"","path":["Notes","🐍 Python","pip et environnements virtuels"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/python/2026-01-16/#python-et-ses-environnements-virtuels","level":2,"title":"Python et ses environnements virtuels","text":"<ul> <li>En python, on peut travailler dans des \"sandboxes\" ou toutes les libraires installées resteront contenues dedans</li> </ul> <p>Utile de créer donc un environnement pour chaque projet afin de en pas perturber d'autres projets avec des milliers de packages inutiles en gros</p> <p><code>python3 -m venv gbvenv</code> &lt;- permet de créer un environnement (venv crée l'environnement \"gbvenv\")</p> <p><code>source gbvenv/bin/activate</code> &lt;- lance cet environnement pour travailler dedans</p> <ul> <li>En parlant de packages, parlons de ✨pip✨</li> </ul> <p>pip est le packages manager de python, en l'appelant, on peut installer des packages comme uvicorn par exemple, utile pour grabber</p> <p><code>pip install --upgrade pip</code> &lt;- update les packages</p> <p><code>python -m pip install ***</code> &lt;- installe le package qu'on notera a la place des ***</p> <p><code>pip freeze &gt;&gt; requirements.txt</code> &lt;- commande super utile pour partager les dependances necessaires pour faire fonctionner son projet sur un autre environnement</p> <p><code>deactivate</code> &lt;- désactive l'environnement virtuel</p>","path":["Notes","🐍 Python","pip et environnements virtuels"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/python/2026-01-16/#script-de-roi-qui-automatise-le-process","level":2,"title":"Script de roi qui automatise le process","text":"<ul> <li>J'ai codé un script qui automatise ce process avec une seule commande :</li> </ul> <p><code>bash &lt;(curl -fsSL https://raw.githubusercontent.com/buchtioof/venv-setup/main/venvsetup.sh)</code></p> <p>Pour en apprendre plus : le git du projet</p>","path":["Notes","🐍 Python","pip et environnements virtuels"],"tags":["Python","pip","Environnements Virtuels"]},{"location":"learn/python/2026-02-16/","level":1,"title":"Django en gros","text":"","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#commencer-un-projet-django","level":2,"title":"Commencer un projet Django","text":"<p>Pour commencer un projet Django, c'est super simple :</p> <p>-&gt; D'abord, créer un dossier de projet</p> <pre><code>`mkdir projet`\n</code></pre> <p>-&gt; Ensuite créer un environnement virtuel Python puis installer Django via pip</p> <pre><code>`python3 -m venv \"projetvenv\" &amp;&amp; source projetvenv/bin/activate &amp;&amp; pip install django`\n</code></pre> <p>-&gt; Maintenant, créer le projet Django dans ce dossier (le point à la fin indique que l'on crée dans ce dossier le projet)</p> <pre><code>`django-admin startproject config .`\n</code></pre> <p>-&gt; On peut maintenant travailler dans notre projet Django</p>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#projet-et-applications","level":2,"title":"Projet et applications","text":"<p>Django fonctionne sur l'utilisations de petits modules appelés \"Applications\", ceux-ci composent un projet Django. Elles peuvent être des composants gèrant une API qui prend des données JSON pour les mettre dans une BDD SQL comme dans le projet Grabber ou encore plein d'autres cas...</p> <p>Note</p> <p>En gros, on a un projet (dossier \"config\") dans lequel on gère les réglages généraux de Django (serveur, adresses, ect...) et des applications (dans leurs dossiers propres) qui gèrent leurs tâches propres à elles</p> <p>Pour créer une Application on utilise cette commande -&gt; <code>python manage.py startapp nomdel'app</code></p>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#fonctionnement-dune-application","level":2,"title":"Fonctionnement d'une Application","text":"<p>Une application se divise avec un fonctionnement en 3 parties</p> <p>Modèle &lt;--&gt; Vue -&gt; Template</p>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#modele","level":3,"title":"Modèle","text":"<p>Le Modèle sera la partie manipulation d'objets (comme en PhP), dans le projet Grabber, Django s'occupera de créer la DB sql via ce module</p> <p>Warning</p> <p>Quand on travaille sur le fichier models.py (généralement celui qui s'occupe de ce module) on doit utiliser deux commandes qui construisent le modèle</p> <pre><code>python manage.py makemigrations\npython manage.py migrate\n</code></pre>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#vue","level":3,"title":"Vue","text":"<p>La Vue ici, c'est un peu le cerveau du projet, il reçoit les requêtes (par exemple, l'utilisateur qui demande une URL ou alors un fichier bash qui envoie des données comme avec Grabber) et peut renvoyer ces requêtes au Modèle pour avoir un résultat, etc...</p>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#template","level":3,"title":"Template","text":"<p>Le template, c'est l'interface, par exemple des fichiers HTML. Il reçoit les données brutes de la Vue et les affiche proprement dans une jolie page web.</p> <p>Utiliser les données brutes dans une template</p> <p>Pour se faire, on doit utiliser cette balise <code>{{ ... }}</code> dans le HTML, cela veut dire pour Django que l'on récupère les données d'une clé spécifique</p> <pre><code>&lt;!-- Dans les crochets, on appelle la donnée \"hostname\" de la table \"data\"--&gt;\n&lt;title&gt;{{ data.hostname }} - Grabber&lt;/title&gt;\n</code></pre>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/python/2026-02-16/#urls","level":2,"title":"URLs","text":"<p>Un autre composant très important dans Django, c'est les URLs. C'est un fichier dans lequel on doit router ce que telle url dans le navigateur doit effectuer. </p> <p>Par exemple</p> <p>Appeler la racine (localhost:5000/) doit être routé comme ceci :</p> <pre><code>from django.urls import path\nfrom api import views\n\nurlpatterns = [\n    # Route de la racine qui appelle la fonction computers_list\n    path('', views.computers_list, name='computers'),\n]\n</code></pre>","path":["Notes","🐍 Python","Django en gros"],"tags":[]},{"location":"learn/sysadmin/2026-02-25/","level":1,"title":"SSH et Configuration propre","text":"","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#cest-quoi","level":2,"title":"C'est quoi ?","text":"<p>SSH est un protocole de communication (comme FTP, HTTP, ect...) qui se base dans le terminal. Il permet de contrôler une fenetre de commandes d'un ordinateur à distance. Si SSH est activé sur un PC, un utilisateur connaissant les logins du PC distant pourra ouvrir un terminal à distance directement sur son ordinateur. </p> <p>Pour plus de sécurité, il est préférable d'utiliser un système de clés publiques/privées pour ne pas envoyer ces identifiants dans la nature en clair. </p> <p>On va voir comment configurer une connexion SSH proprement entre deux PC.</p>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#etape-1-creer-une-cle-sur-le-pc-hote","level":2,"title":"Étape 1 : Créer une clé sur le PC Hôte","text":"<p>On crée d'abord notre clé SSH pour authentifier notre ordinateur via cette commande :</p> <p><code>ssh-keygen -t ed25519 -C \"nom_de_votre_pc\"</code></p> <p>En résumé, on utilise la commande ssh-keygen, préinstallée sur les distros UNIX et macOS, qui crée des clé et on lui demande une clé encryptée avec le protocole ed25519 via -t, recommandé car efficace et robuste, puis on donne le nom du PC qu'on authentifie avec -C.</p> <p>On nous demandera alors dans quel répertoire stocker la clé, généralement il vous proposera dans votre répertoire home <code>/.ssh/id_ed25519</code> et aussi si l'on veut protéger la clé avec un mot de passe.</p> <p>Répertoire de la clé</p> <p>La clé donc sera stockée dans le répertoire .ssh/id_ed25519 comme dit plus tôt. Dans ce même répertoire, on y retrouvera deux fichiers : </p> <ul> <li>id_ed25519 &lt;- Celle-ci est la clé privée et ne doit EN AUCUN CAS être partagée</li> <li>id_ed25519.pub &lt;- Celle-ci c'est la publique qui sera partagée entre les ordinateurs</li> </ul>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#etape-2-envoyer-la-cle-sur-le-pc-distant","level":2,"title":"Étape 2 : Envoyer la clé sur le PC distant","text":"<p>Maintenant que l'on a notre clé, on doit la partager au PC distant, pour se faire, on devra une dernière fois utiliser les identifiants de l'utilisateur du PC distant via la commande :</p> <p><code>ssh-copy-id utilisateur@adresse_ip_du_pc_distant</code></p> <p>On nous demandera alors le mot de passe de l'utilisateur distant et enfin l'action sera effectuée, notre PC hôte est maintenant authentifié par le PC distant !</p> <p>La commande ici à tout simplement copié notre clé publique crée plus tôt id_ed25519.pub avec la commande ssh-copy-id et l'a rangée dans un registre de clés dans le fichier rangé dans le répertoire .ssh/authorized_keys.</p>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#etape-3-essayer-cette-configuration","level":2,"title":"Étape 3 : Essayer cette configuration","text":"<p>Pour tester si tout fonctionne, il faut tout simplement lancer une connexion SSH avec la commande :</p> <p><code>ssh utilisateur@adresse_ip_du_pc_distant</code></p> <p>Si aucun mot de passe n'a été demandé, c'est que le PC distant nous à bien reconnu, c'est carré dans l'axe !</p>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-02-25/#optionnel-mais-recommande-desactiver-les-identifiants-utilisateur","level":2,"title":"Optionnel mais recommandé : Désactiver les identifiants utilisateur","text":"<p>Pour sécuriser le PC distant d'intrusions avec les identifiants qui auraient pu fuiter, on peut désactiver l'authentification via les identifiants utilisateur en éditant le fichier de configuration du SSH avec cette commande sur le PC distant :</p> <p><code>sudo nano /etc/ssh/sshd_config</code></p> <p>Dans ce fichier, une ligne nous interesse, celle-ci :</p> <p><code># PasswordAuthentication no</code></p> <p>On retire le # et voila, l'authentification via le mot de passe est désactivé. Plus qu'a lancer une commande qui redémarre le serveur SSH du PC :</p> <p><code>sudo systemctl restart ssh</code></p> <p>Et c'est tout bon, on a configuré un accès SSH proprement avec un PC distant.</p>","path":["Notes","🧰 SysAdmin","SSH et Configuration propre"],"tags":["SSH","Unix"]},{"location":"learn/sysadmin/2026-03-04/","level":1,"title":"C'est quoi un Administrateur Système ?","text":"<p>Un Admin Système, SysAdmin en anglais (terme le plus courant), est le couteau suisse du système informatique de l'entreprise. Il se charge de gérer toute l'infrastructure d'une entreprise en quatre grands axes :</p> <ul> <li>L'Installation et la Maintenance : Il monte les serveurs (physiques ou virtuels), installe les systèmes d'exploitation (Windows Server, Linux), et s'assure qu'ils sont toujours à jour.</li> <li>La Gestion des Utilisateurs : C'est lui qui gère le fameux Active Directory (ou équivalent). Il crée les comptes des nouveaux employés, gère les mots de passe, et définit qui a le droit d'accéder à quel dossier ou à quelle application.</li> <li>La Sécurité et les Sauvegardes : C'est une mission critique. Le SysAdmin configure les pare-feu (Firewalls), gère les antivirus centralisés, et surtout, il met en place les sauvegardes (Backups). En cas de crash ou de cyberattaque, c'est lui qui doit restaurer les données (ce qu'on appelle le PRA : Plan de Reprise d'Activité).</li> <li>Le Monitoring et le Dépannage : Il a souvent les yeux rivés sur des écrans de supervision. Si un serveur manque d'espace disque ou si le réseau ralentit, il est alerté et doit résoudre le problème, souvent avant même que les utilisateurs ne s'en rendent compte (résolution des tickets d'incidents).</li> </ul>","path":["Notes","🧰 SysAdmin","C'est quoi un Administrateur Système ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/sysadmin/2026-03-04/#competences-techniques-hard-skills","level":2,"title":"Compétences techniques (Hard Skills)","text":"<p>Un bon SysAdmin ne connaît pas tout, mais il maîtrise ces fondamentaux :</p> <ul> <li>Les Systèmes d'Exploitation (OS) : Windows Server (très présent en entreprise classique) et Linux (Debian, Ubuntu, RedHat - incontournable pour le web et le Cloud).</li> <li>La Virtualisation : Aujourd'hui, on met rarement un seul système sur un serveur physique. Il utilise des outils comme VMware, Hyper-V ou Proxmox pour créer des \"machines virtuelles\" (VM).</li> <li>Le Réseau de base : Il doit comprendre comment les machines se parlent (adresses IP, DNS pour les noms de domaine, DHCP, création de VPN pour le télétravail).</li> <li>Le Scripting (L'automatisation) : Pour éviter de faire 100 fois la même action (comme créer 100 comptes utilisateurs), il écrit des scripts en PowerShell (pour Windows) ou en Bash/Python (pour Linux). C'est précisément cette compétence qui fait le pont vers la spécialité DevOps/SRE.</li> </ul>","path":["Notes","🧰 SysAdmin","C'est quoi un Administrateur Système ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/sysadmin/2026-03-04/#competences-sociales-soft-skills","level":2,"title":"Compétences sociales (Soft Skills)","text":"<p>C'est un métier qui demande un tempérament particulier :</p> <ul> <li>Une gestion du stress à toute épreuve : Quand le serveur principal tombe en panne à 10h du matin et que 500 employés ne peuvent plus travailler, il faut garder son sang-froid.</li> <li>Un esprit d'analyse (Troubleshooting) : Être capable de remonter méthodiquement à la source d'un problème complexe (Est-ce le réseau ? Le serveur ? L'application ? Le poste de l'utilisateur ?).</li> <li>Le sens du service : Même s'il travaille sur des machines, il travaille avant tout pour que les humains puissent faire leur métier.</li> </ul>","path":["Notes","🧰 SysAdmin","C'est quoi un Administrateur Système ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/sysadmin/2026-03-04/#levolution-de-carriere","level":2,"title":"L'Évolution de Carrière","text":"<p>On reste rarement SysAdmin toute sa vie. Voici l'évolution classique d'un technicien système :</p> <ol> <li>SysAdmin Junior : Support technique N2/N3, résolution de tickets, tâches d'administration quotidiennes.</li> <li>SysAdmin Confirmé / Ingénieur Système : Conception de l'architecture complexe, gestion de gros projets d'infrastructure.</li> <li>Ingénieur Cloud : On passe de la gestion manuelle des serveurs physiques à la gestion automatisée d'infrastructures externalisées (AWS, Azure).</li> <li>DevOps / SRE (Site Reliability Engineer) : Le stade ultime de l'automatisation, où l'infrastructure est gérée comme du code de développement (Infrastructure as Code).</li> </ol>","path":["Notes","🧰 SysAdmin","C'est quoi un Administrateur Système ?"],"tags":["Métier","Domaine","Informatique"]},{"location":"learn/sysadmin/bash/2025-11-27/","level":1,"title":"Commandes *sh pour les idiots","text":"<ol> <li> <p>sudo : lance une commande avec les superdroits, peut manipuler tout le pc avec en gros <pre><code>sudo [commande]\n</code></pre></p> </li> <li> <p>ls : liste les fichiers d'un dossier <pre><code># -a pour afficher les fichiers cachés / -l pour afficher en liste avec plus d'infos\nls [options] [fichier|dir]\n</code></pre></p> </li> <li> <p>cd : changer de dossier <pre><code># ~ pour aller au répertoire home / .. pour revenir en arriere\ncd [dir]\n</code></pre></p> </li> <li> <p>pwd : affiche le répertoire actuel <pre><code>pwd\n</code></pre></p> </li> <li> <p>touch : affiche le contenu d'un fichier <pre><code>touch [fichier]\n</code></pre></p> </li> <li> <p>nano : éditeur de texte <pre><code>nano [fichier]\n</code></pre></p> </li> <li> <p>mkdir : supprime ce qu'on lui donne <pre><code>mkdir [options] [fichier|dir]\n</code></pre></p> </li> <li> <p>rm : supprime ce qu'on lui donne <pre><code># -r pour supprimer un dossier et son contenu (recursive) (`rmdir` le fait aussi)\n# -f force la commande\nrm [options] [fichier|dir]\n</code></pre></p> </li> <li> <p>cp : copie... <pre><code>cp [options] [source] [destination]\n</code></pre></p> </li> <li> <p>mv : ...et déplace <pre><code>mv [options] [source] [destination]\n</code></pre></p> </li> </ol>","path":["Notes","🧰 SysAdmin","📚 Bases du Bash","Commandes *sh pour les idiots"],"tags":["Bash","UNIX"]},{"location":"learn/sysadmin/bash/2025-11-28/","level":1,"title":"Commandes *sh avancées","text":"","path":["Notes","🧰 SysAdmin","📚 Bases du Bash","Commandes *sh avancées"],"tags":["Bash","UNIX"]},{"location":"learn/sysadmin/bash/2025-11-28/#permissions-et-utilisateurs","level":2,"title":"Permissions et Utilisateurs","text":"<p><code>chmod [droits] [fichier]</code> - change les permissions d'un fichier (qui peut lire/écrire/exécuter) - <code>chmod +x [fichier]</code> rend un script exécutable (très important) - <code>chmod 777 [fichier]</code> donne tous les droits à tout le monde (dangereux mais ça dépanne)</p> <p><code>chown [user]:[groupe] [fichier]</code> - change le propriétaire du fichier (si t'as copié un truc en sudo et que tu peux plus le toucher)</p>","path":["Notes","🧰 SysAdmin","📚 Bases du Bash","Commandes *sh avancées"],"tags":["Bash","UNIX"]},{"location":"learn/sysadmin/bash/2025-11-28/#lecture-et-recherche-dans-les-fichiers","level":2,"title":"Lecture et recherche dans les fichiers","text":"<p><code>cat [fichier]</code> - affiche tout le contenu d'un fichier d'un coup dans le terminal - utile pour les petits fichiers, sinon ça inonde l'écran</p> <p><code>less [fichier]</code> - affiche le contenu page par page (on peut scroller) - appuyer sur <code>q</code> pour quitter</p> <p><code>head [fichier]</code> / <code>tail [fichier]</code> - affiche juste le début (<code>head</code>) ou la fin (<code>tail</code>) d'un fichier - <code>tail -f [fichier]</code> hyper utile pour voir les logs en direct (ça attend les nouvelles lignes)</p> <p><code>grep [mot] [fichier]</code> - cherche un mot ou une phrase spécifique dans un fichier (le ctrl+f du terminal) - -r pour chercher dans tous les dossiers (recursive) / -i pour ignorer les majuscules</p>","path":["Notes","🧰 SysAdmin","📚 Bases du Bash","Commandes *sh avancées"],"tags":["Bash","UNIX"]},{"location":"learn/sysadmin/linux/2025-10-30/","level":1,"title":"C'est quoi Linux ?","text":"<p>Selon Wikipédia...</p> <p>Linux (parfois nommé GNU/Linux) est un système d'exploitation open source de type Unix, basé sur le noyau Linux créé en 1991 par Linus Torvalds. (source)</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-30/#la-philosophie-derriere-linux","level":2,"title":"La philosophie derrière Linux","text":"<p>Contrairement à Windows ou macOS qui sont des systèmes fermés, Linux se différencie par son architecture totalement ouverte (Open Source).</p> <p>C'est un système d'exploitation (OS) conçu pour donner une liberté totale et qui en fait sa force avec :</p> <ul> <li>La bidouille : On a le contrôle total sur la machine. On peut tout modifier, comprendre comment ça fonctionne en profondeur et adapter l'OS aux besoins.</li> <li>La transparence : Aucun logiciels pré-installés (bloatwares), d'outils de pistage ou encore de politiques IA désastreuses.</li> </ul>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-30/#lanatomie-dun-systeme-linux-gnulinux","level":2,"title":"L'anatomie d'un système Linux (GNU/Linux)","text":"<p>Souvent, quand on dit \"J'installe Linux\", c'est un abus de langage. En réalité, un système d'exploitation basé sur Linux est composé de plusieurs couches :</p> <p>-&gt; Le Noyau (GNU/Linux) : C'est le cœur de la machine, il fait le pont entre les composants \"Hardware\" (CPU, RAM) et le logiciel \"Software\".</p> <p>-&gt; L'environnement de base et les Paquets (Packages) : Le noyau seul ne suffit pas. Pour interagir avec lui, on y ajoute des couches comme les outils de base (bash, ls, cd (ce sont des mini programmes à eux seuls !)), également les logiciels sous forme de packages (une sorte d'archive) et les gestionnaires de tout ce beau monde (Gestionnaire de Paquets comme APT chez debian ou DNF chez Red Hat)</p> <p>-&gt; L'Interface Graphique (Desktop Environment, DE) : Contrairement à Windows qui impose son design, sur Linux on peut choisir son interface visuelle. Que ce soit Gnome (très épuré, style macOS), KDE (très personnalisable, style Windows), ou Cinnamon, l'interface n'est qu'une couche graphique que l'on rajoute par-dessus.</p> <p>Info</p> <p>Il n'est pas forcément obligatoire d'avoir une Interface Graphique (GUI), Linux en dehors d'un usage d'utilisateur classique, fonctionne sous forme de terminal tout simplement (CLI). On retrouve cet usage sur quasiment tous les serveurs du monde !</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-30/#les-distributions-distros","level":2,"title":"Les Distributions (Distros)","text":"<p>Une \"Distribution\" (ou Distro), c'est simplement un pack prêt à l'emploi qui regroupe un noyau, une sélection de paquets logiciels et une interface graphique.</p> <p>Il en existe des milliers de distros, mais elles se divisent globalement en 3 grandes familles :</p> <p>1. La famille Debian (La Stabilité)</p> <p>C'est le bloc dur de Linux. Les paquets ne sont pas toujours à la dernière version, mais le système est extrêmement stable et fiable.</p> <p>Les distros connues basées dessus : Ubuntu, Linux Mint, Pop OS. (Idéal pour les débutants).</p> <p>2. La famille Arch Linux (La Liberté et la Nouveauté)</p> <p>Le système est toujours à la pointe de la dernière nouveauté grace au systeme du \"Rolling Releases (mise à jour en continu)\", mais c'est beaucoup plus compliqué à gérer et ça peut \"casser\" si on ne sait pas ce qu'on fait.</p> <p>Les distros connues basées dessus : Arch Linux, Manjaro, Steam OS (l'OS du Steam Deck).</p> <p>3. La famille Red Hat (L'Entre-deux)</p> <p>Un excellent compromis entre une grande stabilité pour les serveurs et des paquets relativement récents pour les utilisateurs.</p> <p>Les distros connues basées dessus : Fedora, CentOS, Alma Linux.</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-30/#ou-utilise-t-on-linux","level":2,"title":"Où utilise-t-on Linux ?","text":"<p>-&gt; Les Serveurs : L'immense majorité du web et des infrastructures cloud (AWS, serveurs web, bases de données) tourne sous Linux.</p> <p>-&gt; Les Smartphones : Android est basé sur le noyau Linux</p> <p>-&gt; L'embarqué et les Supercalculateurs : Les box internet, les TV connectées, les voitures...</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","C'est quoi Linux ?"],"tags":["Linux","UNIX","Sysadmin","OS"]},{"location":"learn/sysadmin/linux/2025-10-31/","level":1,"title":"Arborescence type sur UNIX","text":"<p>Unix a généralement cette arborescence que ce soit sur n'importe quelle distro Linux également Android pour les téléphones et même quelques similitudes sur macOS.</p> <p><pre><code>/               # Racine du disque\n├── /bin/       # Contient les commandes de base\n├── /boot/      # Fichiers de demarrage\n├── /dev/       # Tout ce qui est lié aux périphériques\n├── /etc/       # Fichiers de configuration\n├── /home/      # Répertoires utilisateurs\n├── /lib/       # Bibliothèques logicielles\n├── /mnt/       # Point de montage pour les systèmes de fichier temporaires\n├── /media/     # Point de montage pour les disques temporaires\n├── /opt/       # Logiciels optionnels, la ou on installera des programmes maison\n├── /root/      # Répertoire du user root\n├── /var/       # Variable, contient des logs, ect...\n├── /usr/       # Contient sensiblement la même chose que la racine mais sans être utile au fonctionnement du système\n├── /srv/       # Services hébergés sur le systèmes (FTP, HTTP, ect...)\n├── /run/       # Emplacement mémoire des programmes\n└── /tmp/       # Temporaire\n</code></pre> source de l'arbo.</p>","path":["Notes","🧰 SysAdmin","🐧 Linux","Arborescence type sur UNIX"],"tags":["Linux","UNIX","Sysadmin"]},{"location":"projects/2025-12-05/","level":1,"title":"Alternavive GLSI léger : Grabber","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#alternavive-glsi-leger-grabber","level":1,"title":"Alternavive GLSI léger : Grabber","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#introduction-au-projet","level":2,"title":"Introduction au projet","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#besoin","level":3,"title":"Besoin","text":"<p>Grabber part d'un besoin de gérer un petit parc informatique (dizaines d'ordinateurs) dans un espace de travail (type entreprise). On peut déja noter certains besoins majeurs : gérer des ordinateurs à distance, connaitre d'un coup d'oeil leur état (updates, hardware, software) et établir une liste de liens entre ordinateurs et employés.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#solution","level":3,"title":"Solution","text":"<p>Grabber donc serait dans l'idée capable de répondre à ces besoins, via une interface web administrateur consultable par la DSI d'une entreprise par exemple. Pour la gestion d'un parc informatique de petite taille/toute petite, on proposera un produit simple, léger et plug and play. Via une simple commande de terminal et une configuration au préalable des ordinateurs cibles capable de recevoir des requêtes SSH, Grabber sera capable de couvrir un maximum des besoins.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#choix-de-la-stack-technologique","level":2,"title":"Choix de la stack technologique","text":"<p>Le projet en général se basera sur du Bash et du Python pour gérer l'API et le panel Admin.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#-bash","level":3,"title":"-&gt; Bash","text":"<p>Les scripts Bash se contenteront de \"fetch\" les données système (via des commandes comme lscpu ou la librairie inxi). Ils auront aussi le rôle d'empaqueter ces données en format JSON (via jq) à un serveur qui les enregistrera dans une BDD. Et enfin, ils seront un peu l'agent qui contrôle la machine via des contrôles du systeme (vérif. admin, réglages du serveur, lanceur du serveur...)</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#-python-django-gunicorn-whitenoise","level":3,"title":"-&gt; Python (Django + Gunicorn + Whitenoise)","text":"<p>Django s'occupera de traiter les données brutes du script Bash et les enregistrer dans une BDD. De plus, il s'occupera de la logique du panel Admin via ses outil préfabriqués. Pour servir notre app Django en production, on utilise la dépendance Gunicorn qui pourra gérer le multi-tâches via des \"Workers\" et tenir les standards d'une webapp classique. Gunicorn sera accompagné de Whitenoise, un outil en plus qui gèrera les fichiers statiques (CSS/JS) que ne gère pas nativement Gunicorn.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#-sqlite","level":3,"title":"-&gt; SQLite","text":"<p>Pour le moment, SQLite est le meilleur choix pour sa simplicité et sa taille minimale, elle est stockée en local, ne nécessite pas plus de préparations spécifiques car déjà prête à l'emploi avec Django.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#architecture-technique","level":2,"title":"Architecture technique","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#chef-du-service-grabbersh","level":3,"title":"Chef du service : grabber.sh","text":"<p>Ce script aura un rôle majeur dans le projet, il sera le chef d'orchestre du service et se chargera de gérer le panel admin et le serveur Django ainsi que l'environnement Python et d'être le centre des commandes en sécurisant le service avec un token dynamique</p> <p>Entre autre, il devra :</p> <p>-&gt; Initialiser l'environnement virtuel Python (nommé gbvenv)</p> <p>-&gt; Gérer les dépendances requises (fonction requirements qui vérifie si l'hôte a bien les requis tels que jq, sqlite3 et python) </p> <p>-&gt; Génère si besoin les clés SSH nécessaires pour sécuriser la connexion de l'API</p> <p>-&gt; Vérifier la présence d'un compte super-user dans Django (important pour se logger au panel Admin, via le lancement d'un script Python \"lib/check_admin.py\")</p> <p>-&gt; Collecte les fichiers statiques depuis un dossier \"static\" afin de préparer le CSS pour Whitenoise</p> <p>-&gt; Automatiser le processus de \"migrations\" (python manage.py migrate)</p> <p>-&gt; Créer un token de session qui sécurisera les communications entre Django &lt;-&gt; Grabber &lt;-&gt; Alfred</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#lagent-de-collecte-alfredrun","level":3,"title":"L'agent de collecte : alfred.run","text":"<p>Info</p> <p>Au départ une fonction inclue dans grabber.sh, il a finalement été décidé de séparer les deux pour plus de lisibilité et de facilité sur la suite pour être executé en autonomie dans une machine cible.</p> <p>Son rôle est de fetch les données de la cible dont on a besoin pour répondre au besoin, données Hardware et Software. Toujours en Bash pour sa facilité d'utilisation dans des tâches d'extraction de données de l'OS. </p> <p>En résumé, il devra donc :</p> <p>-&gt; Récupérer les données système (avec des outils natifs comme les netutils ou bien la librairie externe inxi)</p> <p>-&gt; Empaqueter ces données en un objet JSON (avec jq)</p> <p>-&gt; Envoyer les données via une requête à l'endpoint du serveur Django (avec une requête HTTP POST curl)</p> <p>-&gt; Renvoyer le token de session pour sécuriser la communication</p> <p>-&gt; Le tout est codé dans un paquet .run qui contient les librairies requises comme jq et inxi pour être utilisable sur un maximum d'ordinateurs Linux (compilé avec makeself)</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#cerveau-serveur-api-via-django","level":3,"title":"Cerveau serveur : API via Django","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#deploiement-dalfred","level":4,"title":"Déploiement d'Alfred","text":"<p>Pour déployer Alfred sur une machine, on utilisera SSH pour envoyer le script dans un PC cible. On veut que cette tâche soit lancée directement depuis le panel Admin.</p> <p>Pour se faire, on délègue celle-ci à Python avec Django qui l'effectuera avec un formulaire qui contient l'IP sur laquelle aller, le username et le mot de passe du SSH cible.</p> <p>Warning</p> <p>Puisque l'IP envoyée à la machine cible est récupérée via request.get_host(), l'administrateur doit impérativement accéder au panel Admin de Grabber via l'adresse IP réseau de la machine (ex: 192.168.x.x:8000) et non via localhost:8000. Sinon, le PC cible tentera d'envoyer ses données à son propre localhost et la base de données restera vide. </p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#requete-avec-paramiko","level":5,"title":"Requête avec Paramiko","text":"<p>C'est la solution trouvée pour gérer cette demande, Paramiko est une librairie Python installable avec pip qui peut établir la session SSH et le fera depuis le backend Django (dans actions.py -&gt; fonction deploy_ssh)</p> <p>Le cycle de la requête est le suivant :</p> <pre><code>-&gt; Connexion SSH à la cible. \n   (Via la clé SSH d'abord, puis si refus, via les identifiants donnés par l'utilisateur)\n\n-&gt; Si l'authentification via la clé n'a pas fonctionné, \n   on envoie notre clé SSH hôte sur la machine distante\n\n-&gt; Transfert SFTP de l'exécutable alfred.run vers le répertoire temporaire /tmp/.\n\n-&gt; Exécution distante en injectant l'IP du serveur (request.get_host()) et \n   le Token de session.\n\n-&gt; Nettoyage des traces (rm /tmp/alfred.run).\n</code></pre>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#protection-de-lapi-avec-un-token-dauthentification-session_token","level":4,"title":"Protection de l'API avec un Token d'Authentification (SESSION_TOKEN)","text":"<p>Info</p> <p>Ne faut pas confondre ce token destiné aux communications inter-machines avec les sessions administrateurs du panel web, qui sont elles gérées directement par la base de données SQLite.</p> <p>Comme dit plus tôt, <code>grabber.sh</code> génère un token unique (faisant office de clé d'API) avec la commande <code>openssl rand</code> à chaque lancement du serveur. Ce token est temporairement stocké dans <code>settings.json</code> et est automatiquement réinitialisé à la fermeture du script (via la commande <code>trap</code> qui lance la fonction <code>cleanup</code>).</p> <p>Du côté serveur, lors du démarrage de l'application par Gunicorn, le fichier <code>config/settings.py</code> se charge de lire <code>settings.json</code> et de charger cette clé en mémoire dans la variable globale <code>SESSION_TOKEN</code>.</p> <p>Enfin, lorsqu'une requête est émise par Alfred, Django intercepte et vérifie cette clé via la vue dédiée dans <code>web/api.py</code>. Il extrait la clé envoyée de manière sécurisée dans les en-têtes HTTP de la requête <code>curl</code> (précisément le header <code>HTTP_X_API_KEY</code>) et la compare avec celle en mémoire. Si les clés correspondent, les données matérielles sont traitées, sinon, la connexion est immédiatement rejetée avec une erreur 401 (Accès refusé).</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#panel-admin","level":4,"title":"Panel Admin","text":"<p>Il est une partie de l'app Django et présente dans une interface HTML/CSS/JS, une liste des ordinateurs enregistrés, la table SystemInfo avec l'adresse MAC comme clé principale pour chaque PC. Le tout est sécurisé avec le login admin de Django.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#gestion-des-employes","level":5,"title":"Gestion des \"employés\"","text":"<p>Via un petit modal, il est possible d'administrer en plus des ordinateurs, une BDD d'employés (stockée dans la même BDD SQLite) et d'y effectuer des tâches basiques comme créer un employé, le supprimer, l'éditer et l'assigner à un ordinateur depuis la page d'un PC.</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#gestion-des-sessions","level":5,"title":"Gestion des sessions","text":"<p>Pour gérer les sessions sur le Panel et éviter que les administrateurs soient déconnectés en naviguant (problème lié à la séparation des mémoires des différents workers de Gunicorn), le système de session de Django a été configuré pour être stocké directement dans la base de données SQLite (SESSION_ENGINE = \"django.contrib.sessions.backends.db\").</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#design","level":5,"title":"Design","text":"<p>Le CSS et le design utilisent la librairie Tailwind en mode CLI. Concrètement, on télécharge la librairie en local pour travailler avec, on la lance via une commande qui surveille \"watch\" les modifications, puis lorsque l'on a fini, on empaquete notre CSS avec le strict necessaire \"minify\". En savoir plus</p>","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#vue-densemble-du-projet-et-conclusions-projet-a-finir-avant","level":2,"title":"Vue d'ensemble du projet et Conclusions (Projet à finir avant)","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#difficultes-rencontrees-et-apprentissages","level":3,"title":"Difficultés rencontrées et apprentissages","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#bilan","level":3,"title":"Bilan","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2025-12-05/#axes-damelioration","level":3,"title":"Axes d'amélioration","text":"","path":["Projets","Alternavive GLSI léger : Grabber"],"tags":["Projets","Bash","Docs"]},{"location":"projects/2026-01-23/","level":1,"title":"Docs et notes avec Zensical","text":"","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#docs-et-notes-avec-zensical","level":1,"title":"Docs et notes avec Zensical","text":"<p>Note</p> <p>Pendant la création de cette note j'ai migré de mkdocs à Zensicle (maj de mkdocs en meilleur) et donc j'utilise une config qui réutilise les fichiers et la structure mkdocs.</p>","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#pourquoi-faire","level":2,"title":"Pourquoi faire ?","text":"<ul> <li>Tester de créer un nouvel environnement en python</li> <li>Travailler avec des modules pip pour améliorer le projet</li> <li>Changer un peu de grabber</li> </ul>","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#comment-zensicle-marche","level":2,"title":"Comment Zensicle marche","text":"<ul> <li>mkdocs.yml est la navbar du site</li> <li>dossier docs est la racine du site mkdocs</li> </ul>","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-01-23/#hebergement-via-github-github-actions","level":2,"title":"Hébergement via Github (Github Actions)","text":"<p>Pour héberger mon site de documentation en ligne, j'utilise Github via Github Actions qui est la solution parfaite pour un projet léger comme celui-ci.</p> <p>Docs pour host sur Github</p>","path":["Projets","Docs et notes avec Zensical"],"tags":["Projets","Docs"]},{"location":"projects/2026-02-13/","level":1,"title":"Faire un portfolio en JS moderne","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#faire-un-portfolio-en-js-moderne","level":1,"title":"Faire un portfolio en JS moderne","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#but-du-projet","level":2,"title":"But du projet","text":"<p>Ce projet est un moyen de toucher concrètement au JavaScript avec l'utilisation de React, pour faire un site portfolio personnel dans le but de promouvoir mes compétences personnelles et professionnelles ainsi que mes projets et hobbies à destination des professionnels.</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#stack-de-travail","level":2,"title":"Stack de travail","text":"<p>On doit choisir quelle stack, c'est à dire quel combo d'outils on utilisera pour faire fonctionner le tout. Dans une stack de projet Web moderne, on doit choisir un Moteur, un Framework et le compilateur. Mais à quoi servent-ils ?</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#le-moteur-build-tool","level":3,"title":"Le Moteur (Build tool)","text":"<p>Souvent appelé \"moteur\" par abus de langage, c'est l'outil qui fait tourner tout l'écosystème. Il coordonne le compilateur, le serveur et les fichiers.</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#le-framework","level":3,"title":"Le Framework","text":"<p>Le framework est un ensemble d'outils et de règles de construction. Au lieu de partir d'une page blanche, on utilise des blocs déjà prêtes et ça évite de recréer du code que la communauté aurait déjà écrit.</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#le-compilateur","level":3,"title":"Le Compilateur","text":"<p>C'est le même principe que dans plein d'autres languages comme le C par exemple, il reprend notre code, ici le JSX (un JavaScript mélangé à du HTML) en JS et HTML standard pour qu'un navigateur comprenne correctement.</p>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#choix","level":3,"title":"Choix","text":"<p>Il existe donc plusieurs Moteurs (Vite, Next.JS, ...), Frameworks (React, Vue, Svelte, ...) et Compilateurs (Babel, SWC, ...) mais pour ce projet on retiendra une stack simple pour un débutant et efficace pour tester et déployer.</p> <p>Stack choisie</p> <ul> <li>Moteur : Vite -&gt; Le moteur le plus rapide, sans fioritures et simple d'utilisation avec des outils de bases très utiles</li> <li>Framework : React -&gt; Le framework le plus populaire avec des tonnes de librairies deja prêtes et une communauté présente</li> <li>Compilateur : JS/SWC -&gt; Très efficace et rapide et simple et utilnous permet d'utilise JS</li> </ul>","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#points-importants-du-projet","level":2,"title":"Points importants du projet","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#creation-du-projet","level":3,"title":"Création du projet","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#packages-npm","level":3,"title":"Packages npm","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#hebergement-avec-vercel","level":3,"title":"Hébergement avec Vercel","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-02-13/#cles-denvironnements","level":3,"title":"Clés d'environnements","text":"","path":["Projets","Faire un portfolio en JS moderne"],"tags":["Javascript","React","HTML/CSS","Projet"]},{"location":"projects/2026-03-02/","level":1,"title":"Carnet de bord : Stage Admin Sys.","text":"","path":["Projets","Carnet de bord : Stage Admin Sys."],"tags":[]},{"location":"projects/stage/2026-03-03/","level":1,"title":"Étape 1 - Planification et installation Hardware","text":"<p>Tout d'abord, nous définissons les premiers jours ce que nous allons concrètement faire comme projet, l'entreprise à un besoin spécifique :</p>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#definition-du-projet","level":2,"title":"Définition du projet","text":"<p>Objectif : Concevoir et déployer une solution d'infrastructure réseau et de stockage \"clé en main\" pour une TPE. Le système offre les capacités d'un NAS professionnel sécurisé, entièrement administrable via une interface web intuitive, sans nécessiter de compétences en ligne de commande pour l'utilisateur final.</p>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#1-infrastructure-et-reseau-virtualisation","level":2,"title":"1. Infrastructure et Réseau (Virtualisation)","text":"<ul> <li>Hyperviseur : Serveur physique sous Proxmox VE pour la gestion des ressources.</li> <li>Sécurité Périmétrique : Machine virtuelle pfSense gérant le routage, le pare-feu, le DHCP et le DNS local.</li> <li>Serveur Applicatif : Machine virtuelle Debian isolée derrière pfSense, avec accès direct aux ports USB physiques (passthrough) pour les sauvegardes.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#2-architecture-logicielle-stack-technique","level":2,"title":"2. Architecture Logicielle (Stack Technique)","text":"<ul> <li>Système &amp; Monitoring (C) : Développement d'un daemon interagissant avec le noyau pour remonter les métriques de santé (CPU, RAM, SMART) et détecter le branchement de périphériques de stockage (événements <code>udev</code>).</li> <li>Backend &amp; API (Python) : Création d'une API REST (FastAPI/Flask) qui traduit les requêtes web en commandes d'administration système (création d'utilisateurs, modification de <code>/etc/samba/smb.conf</code>, gestion des quotas).</li> <li>Interface Web (JavaScript) : Développement d'un tableau de bord (React ou Vue.js) permettant de piloter le serveur et de visualiser son état en temps réel.</li> <li>Automatisation (Bash / Ansible) : Scripts de déploiement \"Zero Touch\" pour l'installation complète de l'environnement, et scripts <code>rsync</code> pour les sauvegardes automatisées.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#3-enjeux-devops-et-secops","level":2,"title":"3. Enjeux DevOps et SecOps","text":"<ul> <li>Déploiement Reproductible : Industrialisation de l'installation de la VM Debian et de l'ensemble de la pile logicielle.</li> <li>Durcissement (Hardening) : Cloisonnement strict du réseau via pfSense, sécurisation locale avec <code>nftables</code>, et principe de moindre privilège appliqué à l'API Python (via une configuration <code>sudoers</code> restreinte).</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#planification-du-projet","level":2,"title":"Planification du projet","text":"","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-1-cadrage-socle-technique-infrastructure","level":3,"title":"Phase 1 : Cadrage, Socle Technique &amp; Infrastructure","text":"<p>Mise en place de l'environnement matériel, réseau et validation des concepts de base.</p> <ul> <li>Infrastructure et Virtualisation :</li> <li>Installation et configuration d'un hyperviseur Proxmox VE sur la machine physique hôte.</li> <li>Déploiement d'une machine virtuelle pfSense pour gérer le routage, le service DHCP, le DNS local et le pare-feu en amont de l'infrastructure.</li> <li>Création de la VM \"OfficeBox\" (Debian Server) isolée derrière le pfSense, avec configuration des adresses IP statiques.</li> <li>Architecture logicielle : * Définition des standards de code, choix des versions (Python, C, Node/JS) et élaboration des contrats d'API (Endpoints REST).</li> <li>Preuve de concept (POC) : * Test manuel de configuration Samba et Rsync sur la VM Debian.</li> <li>Test du \"passthrough\" USB sous Proxmox pour s'assurer que la VM Debian détecte bien les périphériques physiques branchés au serveur.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-2-developpement-bottom-up-briques-independantes","level":3,"title":"Phase 2 : Développement \"Bottom-Up\" (Briques indépendantes)","text":"<p>Création des composants logiciels isolés.</p> <ul> <li>Brique Système &amp; Backend (Dev A) :</li> <li>Développement de l'API REST en Python (FastAPI ou Flask).</li> <li>Création des fonctions d'interaction système : ajout d'utilisateurs (<code>useradd</code>), modification dynamique de <code>/etc/samba/smb.conf</code>, gestion des quotas de stockage et redémarrage des services.</li> <li>Brique Bas Niveau &amp; Hardware (Dev B) :</li> <li>Développement du Daemon en langage C (service systemd).</li> <li>Extraction des métriques de santé de la VM (CPU, RAM, I/O disques via <code>/proc</code> et <code>sysfs</code>).</li> <li>Implémentation de l'écoute des événements <code>udev</code> pour déclencher automatiquement les scripts Bash de sauvegarde (Rsync) lors de la détection d'un montage USB.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-3-interface-utilisateur-et-integration","level":3,"title":"Phase 3 : Interface Utilisateur et Intégration","text":"<p>Création du frontend et connexion de tous les modules.</p> <ul> <li>Brique Frontend (Dev B ou A) :</li> <li>Maquettage et développement de l'interface d'administration (React ou Vue.js).</li> <li>Implémentation du Dashboard de santé, du panneau de gestion des utilisateurs et du panneau de gestion des partages réseau.</li> <li>Intégration API / Daemon / Front (Dev A et B) :</li> <li>Communication inter-processus : le Daemon C remonte les métriques et alertes (ex: fin de sauvegarde) à l'API Python.</li> <li>Consommation de l'API Python par l'interface web pour un affichage en temps réel.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-4-industrialisation-devops-securite","level":3,"title":"Phase 4 : Industrialisation DevOps &amp; Sécurité","text":"<p>Automatisation du déploiement et durcissement du système.</p> <ul> <li>Scripting de déploiement (Zero Touch) : * Création d'un playbook Ansible ou d'un script Bash d'amorçage pour automatiser l'installation complète de l'application sur une VM Debian vierge (dépendances, compilation du C, services, serveurs web).</li> <li>Sécurité &amp; Hardening (SecOps) :</li> <li>Configuration stricte du pare-feu pfSense (règles NAT/Rules) et du pare-feu local de la VM (<code>nftables</code> / <code>ufw</code>).</li> <li>Isolation des privilèges : exécution de l'API via un utilisateur non-root avec des permissions <code>sudoers</code> granulaires (limitation stricte aux commandes nécessaires).</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-03/#phase-5-tests-grandeur-nature-recette-et-documentation","level":3,"title":"Phase 5 : Tests Grandeur Nature, Recette et Documentation","text":"<p>Validation finale et préparation des livrables.</p> <ul> <li>Tests End-to-End : * Re-déploiement complet automatisé sur une VM vierge.</li> <li>Scénarios de tests réels : simulation d'attaques basiques (pour tester pfSense), montage/démontage de disques USB physiques, tests de charge réseau via les partages Samba.</li> <li>Livrables et Documentation : * Rédaction du README technique et de la documentation de l'API.</li> <li>Création des schémas d'architecture réseau (Proxmox/pfSense/VM).</li> <li>Rédaction du manuel utilisateur simplifié destiné aux employés de la TPE.</li> </ul>","path":["Projets","Stage","Étape 1 - Planification et installation Hardware"],"tags":[]},{"location":"projects/stage/2026-03-09/","level":1,"title":"Étape 2 : Configuration de l'Infrastructure Serveur","text":"","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#1-installation-du-routeur-pfsense-machine-virtuelle","level":2,"title":"1. Installation du Routeur pfSense (Machine Virtuelle)","text":"<ul> <li>Préparation : Décompression de l'image <code>.iso.gz</code> en <code>.iso</code>.</li> <li>Création VM : Installation avec format de disque Auto (ZFS).</li> <li>Attribution des interfaces (Proxmox) : * <code>vmbr1</code> (Lié à la carte physique branchée au mur) ➔ WAN de pfSense.<ul> <li><code>vmbr0</code> (Réseau local interne) ➔ LAN de pfSense.</li> </ul> </li> </ul>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#2-configuration-du-reseau-local-lan-resolution-de-conflit","level":2,"title":"2. Configuration du Réseau Local (LAN) &amp; Résolution de conflit","text":"<p>L'objectif était de séparer le réseau de la résidence (10.x.x.x) de notre réseau privé. * Adressage LAN : Changement de l'IP du LAN pfSense (via sa console) en 192.168.10.1/24. * Serveur DHCP : Activation sur pfSense (plage <code>192.168.10.50</code> à <code>192.168.10.200</code>) pour attribuer automatiquement des IP aux futures VMs et aux PC physiques branchés au serveur.</p>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#3-configuration-reseau-de-proxmox-lhyperviseur","level":2,"title":"3. Configuration Réseau de Proxmox (L'Hyperviseur)","text":"<p>Modification physique du fichier <code>/etc/network/interfaces</code> pour l'aligner sur le nouveau LAN. * Interface LAN (<code>vmbr0</code>) : Attribution de l'IP statique 192.168.10.2/24 avec 192.168.10.1 comme passerelle (gateway). * Interface WAN (<code>vmbr1</code>) : Passage en mode manuel sans aucune IP ni passerelle pour empêcher Proxmox d'être exposé directement au réseau du bâtiment.</p>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#4-deblocage-de-lacces-internet-wan-portail-captif","level":2,"title":"4. Déblocage de l'accès Internet (WAN &amp; Portail Captif)","text":"<ul> <li>Pare-feu pfSense : Désactivation des sécurités Block private networks et Block bogon networks sur l'interface WAN pour autoriser l'IP <code>10.x.x.x</code> fournie par la résidence.</li> <li>Authentification : Depuis un PC connecté au LAN, navigation vers <code>http://neverssl.com</code> pour déclencher et valider la page de connexion (Portail Captif) de la résidence.</li> </ul>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#5-acces-distant-securise-tailscale-subnet-routing","level":2,"title":"5. Accès Distant Sécurisé (Tailscale &amp; Subnet Routing)","text":"<p>Contournement de la sécurité \"Client Isolation\" du réseau Wi-Fi de la résidence. * Installation : Ajout du paquet Tailscale sur pfSense et connexion via une clé d'authentification (Auth Key). * Règle Pare-feu : Création d'une règle Pass All (tout autoriser) sur la nouvelle interface Tailscale dans pfSense. * Subnet Routing : * Déclaration du réseau 192.168.10.0/24 dans les Advertised Routes des paramètres Tailscale de pfSense.     * Approbation manuelle de cette route sur le panel d'administration web de Tailscale. * Bénéfice : Accès global à <code>https://192.168.10.1</code> (pfSense) et <code>https://192.168.10.2:8006</code> (Proxmox) depuis n'importe où, sans câble.</p>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/2026-03-09/#6-creation-et-configuration-de-la-vm-debian-serveur","level":2,"title":"6. Création et Configuration de la VM Debian (Serveur)","text":"<ul> <li>Optimisation Proxmox : Création de la VM avec type CPU <code>Host</code>, contrôleur <code>VirtIO SCSI single</code>, disque avec option <code>Discard</code> (TRIM), et carte réseau <code>VirtIO (paravirtualized)</code> sur le bridge <code>vmbr0</code>.</li> <li>Installation OS : Installation minimale (sans interface graphique) avec uniquement l'option SSH server cochée.</li> <li>IP Fixe (Static Mapping) : Sur pfSense (Services &gt; DHCP Server &gt; LAN), réservation d'une adresse IP fixe hors plage dynamique (ex: 192.168.10.100) liée à l'adresse MAC virtuelle de la VM Debian.</li> <li>Accès Final : Connexion SSH réussie depuis l'extérieur en utilisant l'IP locale <code>192.168.10.100</code> grâce au routage Tailscale.</li> </ul>","path":["Projets","Stage","Étape 2 : Configuration de l'Infrastructure Serveur"],"tags":[]},{"location":"projects/stage/projet/","level":1,"title":"Spécification de Projet : \"GrabberBoxTea\"","text":"<p>Solution d'Infrastructure \"Clé en Main\" pour TPE</p>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#contexte-et-objectif","level":2,"title":"Contexte et Objectif","text":"<p>Pour une TPE qui a des besoins sysops spécifiques mais voulant garder un controle total de leurs données sans avoir à dépendre d'outils externes (ex. Google, AWS)</p> <p>L'entreprise a des besoins spécifiques tels que : - Accéder aux données de l'entreprise partout à l'intérieur comme à l'extérieur de l'entreprise - Donner des accès spécifiques à des monteurs freelances, dans le cadre d'une amélioration de la communication - Pouvoir manager le serveur via une interface simple et accessible (Pas de DSI, gestion par les employés, niveau confirmé) - BONUS: Avoir des outils de travaux collaboratifs intégrés au cloud pour éditer des données partout (ex. Comptabilité,...)</p>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#architecture-technique","level":2,"title":"Architecture Technique","text":"<p>Le système repose sur une architecture en couches distinctes, exploitant des langages spécifiques pour chaque niveau de responsabilité :</p> <ul> <li>Linux (Base Système) : Système d'exploitation hôte (ex: Debian ou Alpine). Gestion avancée du partitionnement (LVM), durcissement de la sécurité (Hardening) et gestion des droits utilisateurs.</li> <li>Bash (Provisioning &amp; Automatisation) : Scripts d'installation \"Zero Touch\". Responsable du déploiement initial, de la configuration réseau et de l'installation des dépendances.</li> <li>C (Daemon de Monitoring) : Développement d'un service systemd léger. Il interagit directement avec le noyau pour surveiller l'intégrité matérielle (SMART, température) et système (intégrité des fichiers critiques) avec une empreinte ressource minimale.</li> <li>Python (Backend &amp; Orchestration) : API REST (Flask/FastAPI). Elle agit comme passerelle entre l'interface utilisateur et les commandes système, gérant la logique métier et l'exécution sécurisée des tâches administratives.</li> <li>JavaScript (Frontend) : Interface d'administration web (Dashboard). Permet à l'utilisateur final de piloter le serveur graphiquement.</li> </ul>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#fonctionnalites-cles","level":2,"title":"Fonctionnalités Clés","text":"","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#a-gestion-du-stockage-module-pythonbash","level":3,"title":"A. Gestion du Stockage (Module Python/Bash)","text":"<ul> <li>Configuration dynamique du serveur de fichiers (Samba/NFS) via l'interface web.</li> <li>Gestion des utilisateurs et attribution de quotas de stockage.</li> <li>Modification automatisée des fichiers de configuration (<code>/etc/samba/smb.conf</code>) et rechargement des services à la volée.</li> </ul>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#b-sauvegarde-automatisee-sur-evenement-module-cbash","level":3,"title":"B. Sauvegarde Automatisée sur Événement (Module C/Bash)","text":"<ul> <li>Système de détection matériel : le daemon en C écoute les événements <code>udev</code> pour détecter la connexion de périphériques USB spécifiques.</li> <li>Déclenchement automatique d'un script de synchronisation (Bash/Rsync) lors du montage du disque.</li> <li>Remontée du statut de la sauvegarde vers l'API.</li> </ul>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#c-tableau-de-bord-de-sante-module-cjs","level":3,"title":"C. Tableau de Bord de Santé (Module C/JS)","text":"<ul> <li>Visualisation en temps réel des métriques vitales (CPU, RAM, I/O Disque).</li> <li>Lecture optimisée des pseudo-systèmes de fichiers <code>/proc</code> et <code>/sys</code> par le module C pour une latence minimale.</li> </ul>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#4-dimension-devops-et-administration-systeme","level":2,"title":"4. Dimension DevOps et Administration Système","text":"<p>Le projet intègre les meilleures pratiques d'ingénierie système :</p> <ol> <li>Packaging et Déploiement : Livraison sous forme de script d'installation global ou d'image système pré-configurée (ISO). Utilisation possible d'Ansible pour la configuration initiale.</li> <li>Sécurité (SecOps) : Configuration de pare-feu (<code>nftables</code>), isolation des processus, et mise en place de HTTPS automatisé.</li> <li>Conteneurisation : Isolation possible des briques applicatives (Web/API) via Docker, tout en maintenant les accès privilégiés nécessaires à l'administration de l'hôte.</li> </ol>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#5-flux-operationnel-workflow","level":2,"title":"5. Flux Opérationnel (Workflow)","text":"<ol> <li>Installation : L'administrateur exécute le script Bash d'initialisation sur un serveur vierge. Le système est opérationnel en quelques minutes.</li> <li>Configuration : L'utilisateur se connecte au Dashboard Web local.</li> <li>Action : Une demande (ex: \"Créer un partage 'Compta'\") est envoyée par le Frontend (JS).</li> <li>Exécution : L'API (Python) valide la requête et orchestre les commandes système nécessaires.</li> <li>Utilisation : Les postes clients (Windows/Mac) détectent immédiatement le nouveau volume réseau sécurisé.</li> </ol>","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]},{"location":"projects/stage/projet/#6-recapitulatif-de-la-stack-technologique","level":2,"title":"6. Récapitulatif de la Stack Technologique","text":"Composant Technologie Rôle Principal OS Debian 12 / Alpine Base stable et sécurisée. Infrastructure Bash + Ansible Provisioning et maintenance. Backend API Python (FastAPI) Logique métier et interface système. Système Langage C Monitoring bas niveau et gestion I/O. Frontend Vue.js / React Interface Homme-Machine (IHM). Protocoles Samba (SMB) / NFS Partage de fichiers hétérogène.","path":["Spécification de Projet : \"GrabberBoxTea\""],"tags":[]}]}
\ No newline at end of file