From 2444fc48a4d4cb0213e64f5554db1f7f0d398af3 Mon Sep 17 00:00:00 2001 From: LATCHIMY Nicolas Date: Sat, 31 Jan 2026 02:00:02 +0400 Subject: [PATCH] =?UTF-8?q?derni=C3=A8re=20version=20pr=C3=A9liminaire?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/extensions.json | 4 - .vscode/launch.json | 11 - src/pages/posts/.obsidian/workspace.json | 6 +- src/pages/posts/post-10.md | 0 src/pages/posts/post-4.md | 386 ++++++++++++++++++----- src/pages/posts/post-5.md | 0 src/pages/posts/post-6.md | 0 src/pages/posts/post-7.md | 0 src/pages/posts/post-8.md | 0 src/pages/posts/post-9.md | 0 10 files changed, 316 insertions(+), 91 deletions(-) delete mode 100644 .vscode/extensions.json delete mode 100644 .vscode/launch.json delete mode 100644 src/pages/posts/post-10.md delete mode 100644 src/pages/posts/post-5.md delete mode 100644 src/pages/posts/post-6.md delete mode 100644 src/pages/posts/post-7.md delete mode 100644 src/pages/posts/post-8.md delete mode 100644 src/pages/posts/post-9.md diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index 22a1505..0000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "recommendations": ["astro-build.astro-vscode"], - "unwantedRecommendations": [] -} diff --git a/.vscode/launch.json b/.vscode/launch.json deleted file mode 100644 index d642209..0000000 --- a/.vscode/launch.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "version": "0.2.0", - "configurations": [ - { - "command": "./node_modules/.bin/astro dev", - "name": "Development server", - "request": "launch", - "type": "node-terminal" - } - ] -} diff --git a/src/pages/posts/.obsidian/workspace.json b/src/pages/posts/.obsidian/workspace.json index 3622b31..9eace6f 100644 --- a/src/pages/posts/.obsidian/workspace.json +++ b/src/pages/posts/.obsidian/workspace.json @@ -185,13 +185,13 @@ }, "active": "c9a5ae1d384a28a9", "lastOpenFiles": [ - "post-10.md", + "post-6.md", "post-4.md", + "post-5.md", + "post-10.md", "post-9.md", "post-8.md", "post-7.md", - "post-6.md", - "post-5.md", "Configurer environnement de développement.md", "post-3.md", "post-2.md", diff --git a/src/pages/posts/post-10.md b/src/pages/posts/post-10.md deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/posts/post-4.md b/src/pages/posts/post-4.md index 2d5b197..769db49 100644 --- a/src/pages/posts/post-4.md +++ b/src/pages/posts/post-4.md @@ -1,66 +1,57 @@ --- -title: Première note réel -pubDate: 2026-01-30 -description: Tutoriel Step By Step Obsidian -author: Latchimy Nicolas -image: -tags: - - astro - - blogging - - apprentissage-en-public +title: "Log de Bord : Construction du Jardin Numérique v1" +description: "Ce document est le journal de bord de la construction de mon site Astro. Il est basé sur le tutoriel officiel et adapté pour le projet 'HebelOS'." +pubDate: "2026-01-30" +version: "1.0.0" +author: "Latchimy Nicolas" +tags: ["astro", "log-de-bord", "tutoriel", "hebelos"] --- -# Première note réel -Publié le : 2026-01-30 +# Log de Bord : Tutoriel Astro -> [!NOTE] Information -> Ce qui suit est la reprise complète du tutoriel chapitre par chapitre. +Ce document est ma version personnalisée du tutoriel officiel d'Astro. Il sert de base à la construction de mon jardin numérique et de "Log" pour toutes les modifications à venir. -[^1] -# astro DOCS +> [!NOTE] Objectif +> Utiliser ce guide comme référence principale pour chaque étape de développement, de la création des pages à l'ajout de l'interactivité. -## Bienvenue à bord +--- -### Créer votre premier blog avec Astro +## Unité 0 : Bienvenue à Bord -Il est question de voir les fonctionnalités clés d'astro avec un petit (menu ou index[^2]) : +**Objectif :** Comprendre la structure du tutoriel et les prérequis. -- [[post-5|Configurer environnement de développement]] -- [[post-6|Créer des pages articles de blog]] -- [[post-7|Construire avec les composants]] -- [[post-8|Interroger et travailler avec des fichiers locaux]] -- [[post-9|Ajouter de l’interactivité au site]] -- [[post-10|Déployer le site sur le web]] +### A propos des prérequis -[^3] -### A propos +Le tutoriel suppose une connaissance de base en HTML, CSS, JavaScript et Markdown. Pour toute question, la communauté est disponible sur le [Discord d'Astro](https://astro.build/chat) et les problèmes peuvent être signalés sur le [dépôt GitHub](https://github.com/withastro/docs/issues). -Demande quelques connaissance en HTML, Markdown, CSS et Javascript pour pouvoir faire toutes les étapes du tutoriel. A l'intérieur de cette section on trouve le lien pour le [discord](https://astro.build/chat) et le dépôt [github](https://github.com/withastro/docs/issues). +--- +## Unité 1 : Créer et déployer votre premier site Astro -## Créer et déployer votre premier site Astro +**Objectif :** Mettre en place un environnement de développement fonctionnel, créer un projet Astro de base et le déployer. -### Embarquement : Unité 1 - Configuration +### 1.1 Environnement de développement -Explication sur la section -### Environnement de développement +Mon environnement de travail pour ce projet : +- **Terminal :** Ubuntu 24.04 +- **Éditeur de code :** Zed / VS Code +- **Node.js & Paquets :** `pnpm` (plus robuste que `npm` pour ce projet). -- Terminal : Ubuntu 24.04 -- Editeur de code : Zed -- Node.js -- pnpm +### 1.2 Créer le projet Astro -### Créer premier projet Astro - -```shell -# créer un nouveau projet avec pnpm -pnpm create astro@latest . +Pour initialiser le projet dans le répertoire courant en utilisant le modèle de blog : +```bash +# Nous utilisons pnpm pour sa robustesse +pnpm create astro@latest . --template blog ``` -### Ecrire première ligne +### 1.3 Écrire la première ligne de code + +Le fichier `src/pages/index.astro` est le point d'entrée. Nous pouvons le modifier pour voir les changements en direct. ```astro --- +// Le frontmatter Astro (entre les '---') contient le JavaScript qui s'exécute sur le serveur. --- @@ -69,66 +60,315 @@ pnpm create astro@latest . - Astro + Mon Laboratoire -

Astro

+

Mon Jardin Numérique - HebelOS

``` --`

Astro

` -+`

Mon site Astro

` +### 1.4 Dépôt en ligne (Gitea) -### Dépôt en ligne +- Créer un dépôt distant sur mon instance Gitea. +- Lier le dépôt local au dépôt distant pour versionner le code. -- Créer son dépôt distant dans gitea -- Faire le lien avec le dépot local +### 1.5 Déploiement du site -### Déploiement du site sur le net +> [!TODO] Note personnelle +> Je dois documenter ici les étapes spécifiques de mon déploiement sur Raspberry Pi via Docker et Nginx Proxy Manager. -Je déploie sur raspberry pi mais il y a pas mal d'étape à décrire.[^4] +--- -## Ajouter, mettre en forme et lier des pages sur votre site +## Unité 2 : Pages, Routes et Markdown -### Embarquement : Unité 2 - Pages +**Objectif :** Créer de nouvelles pages, comprendre le routage basé sur les fichiers et commencer à utiliser Markdown pour le contenu. -Explication sur la section -### Créer première page Astro +### 2.1 Créer des pages Astro -- création about.astro même contenu que l'index -- modification du contenu de about -- ajout de liens de navigation sur toutes les pages -- création blog.astro -- publication des modification sur le web +Astro utilise le routage basé sur les fichiers. Chaque fichier dans `src/pages/` devient une page de votre site. +- `src/pages/index.astro` -> `mon-site.fr/` +- `src/pages/about.astro` -> `mon-site.fr/about` +- `src/pages/blog.astro` -> `mon-site.fr/blog` -### Ecrire premier article de blog en Markdown +Il faut ajouter des liens de navigation (``) entre les pages pour les relier. -- création de la section posts qui accueil les .md -- création des .md -- rédaction de contenu markdown -- Ajout des liens vers les articles +### 2.2 Écrire le premier article en Markdown (.md) -### Ajout du contenu dynamique +Les articles de blog sont créés dans `src/pages/posts/`. Chaque fichier `.md` devient automatiquement une page de blog. -- Définir et utiliser une variable dans about +> [!TIP] Frontmatter +> Le bloc de texte au début d'un fichier Markdown, délimité par `---`, s'appelle le **frontmatter**. C'est là que l'on stocke les métadonnées d'une page (titre, date, description) sous forme de paires clé-valeur (format YAML). Astro lit ces données pour les utiliser dans les layouts et les pages d'index. + +### 2.3 Utiliser des variables (Contenu dynamique) + +On peut définir des variables dans le frontmatter d'un fichier `.astro` et les utiliser dans le template HTML avec la syntaxe `{maVariable}`. ```astro --- -const pageTitle = "A propos de moi"; +const pageTitle = "À propos de moi"; +const identity = { + firstName: "Nicolas", + country: "France", + hobbies: ["auto-hébergement", "BD", "RPG"], +}; +const skills = ["HTML", "CSS", "JavaScript", "Astro", "Docker"]; --- -{pageTitle}

{pageTitle}

+ +

Je m'appelle {identity.firstName}.

+ +

Mes compétences :

+ ``` -- Reproduire dans index et blog +### 2.4 Affichage conditionnel + +On peut utiliser des opérateurs JavaScript comme `&&` (ET logique) ou l'opérateur ternaire `? :` pour afficher des éléments sous certaines conditions. + +```astro +--- +const happy = true; +const finished = true; +--- + +{happy &&

Je suis heureux d'apprendre Astro !

} + +{finished ?

J'ai terminé ce tutoriel !

:

Je suis encore en train de travailler.

} +``` + +### 2.5 Styles CSS + +- **Styles locaux :** Une balise `