From 9d69f2e8b67aaa246b4d4bc8e541d67d0342ca9e Mon Sep 17 00:00:00 2001 From: vincent Date: Wed, 31 Aug 2022 23:39:19 +0200 Subject: [PATCH 01/10] =?UTF-8?q?D=C3=A9but=20r=C3=A9organisation=20et=20e?= =?UTF-8?q?xplication=20site=20statique?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/prise_en_main/web/_index.md | 31 +++++++++++++------ .../web/créer-du-contenu/_index.md | 7 +++++ .../créer-du-contenu/avec-un-générateur.md | 7 +++++ .../web/créer-du-contenu/à-la-main.md | 7 +++++ .../web/initialiser-votre-accès.md | 7 +++++ content/prise_en_main/web/mettre-place-DNS.md | 7 +++++ .../prise_en_main/web/publier-le-contenu.md | 7 +++++ .../prise_en_main/web/statique-comment-ça.md | 13 ++++++++ 8 files changed, 77 insertions(+), 9 deletions(-) create mode 100644 content/prise_en_main/web/créer-du-contenu/_index.md create mode 100644 content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md create mode 100644 content/prise_en_main/web/créer-du-contenu/à-la-main.md create mode 100644 content/prise_en_main/web/initialiser-votre-accès.md create mode 100644 content/prise_en_main/web/mettre-place-DNS.md create mode 100644 content/prise_en_main/web/publier-le-contenu.md create mode 100644 content/prise_en_main/web/statique-comment-ça.md diff --git a/content/prise_en_main/web/_index.md b/content/prise_en_main/web/_index.md index 13c71eb..7e9f620 100644 --- a/content/prise_en_main/web/_index.md +++ b/content/prise_en_main/web/_index.md @@ -4,9 +4,29 @@ description = "Héberger un site web" sort_by = "weight" +++ +Vous en avez marre de faire toute votre communication associative via Facebook ? Vous voulez créer votre propre site pour raconter vos dernières vacances ou publier vos poèmes ? Bref, publier en indépendance ? Deuxfleurs peut vous aider en vous fournissant l'hébergement. Suivez le guide ! + +1. [Statique ? Comment ça ?](./statique-comment-ca) +2. [Initialiser votre accès](./initialiser-votre-acces) +3. [Mettre en place le DNS](./mettre-place-dns) +4. [Créer du contenu](./créer-du-contenu/) +5. [Publier le contenu](./publier-le-contenu) + +# Ils nous font confiance pour leur site web + + - [anneprudhomoz.fr](https://anneprudhomoz.fr) - *De la terre, du fer, de l'eau, beaucoup de feu, un peu d'huile, encore du béton et du plâtre ! ... sans oublier le crayon à papier et les carnets.* + - [colineaubert.com](https://colineaubert.com) - *D'un côté graphiste, illustratrice et conceptrice d'outils pédagogiques, je mets en images et en mots différents sujets scientifiques et culturels.* + - [estherbouquet.com](https://estherbouquet.com) - *Esther Bouquet questions how narratives—both historical and literary—are being built by creating tangible experiences ranging from the size of the sheet of paper to the volume of a space; somewhere between writing, archiving, drawing, designing, and programming.* + - [quentin.dufour.io](https://quentin.dufour.io) - *Portfolio et blog d'un ingénieur en informatique* + - [erwan.dufour.io](https://erwan.dufour.io) - *Portfolio et blog d'un passionné d'électronique* + - [rfid.deuxfleurs.fr](https://rfid.deuxfleurs.fr) - *Rencontres Francophones de l'Infonuagique Décentralisé* + + + + + + -Vous en avez marre de faire toute votre communication associative via Facebook ? Vous voulez créer votre propre site pour raconter votre dernier road-trip ou publier vos poèmes ? Vous ne savez pas vous y prendre ? -Deuxfleurs est là pour vous, on vous fournit une plateforme d'hébergement et on se fera un plaisir de vous accompagner ! @@ -39,12 +59,5 @@ Si vous avez déjà votre site web statique, voici notre suggestion d'outils pou - (à venir, avancé) drone + git - (à venir, avancé) awscli -# Ils nous font confiance pour leur site web - - [anneprudhomoz.fr](https://anneprudhomoz.fr) - *De la terre, du fer, de l'eau, beaucoup de feu, un peu d'huile, encore du béton et du plâtre ! ... sans oublier le crayon à papier et les carnets.* - - [colineaubert.com](https://colineaubert.com) - *D'un côté graphiste, illustratrice et conceptrice d'outils pédagogiques, je mets en images et en mots différents sujets scientifiques et culturels.* - - [estherbouquet.com](https://estherbouquet.com) - *Esther Bouquet questions how narratives—both historical and literary—are being built by creating tangible experiences ranging from the size of the sheet of paper to the volume of a space; somewhere between writing, archiving, drawing, designing, and programming.* - - [quentin.dufour.io](https://quentin.dufour.io) - *Portfolio et blog d'un ingénieur en informatique* - - [erwan.dufour.io](https://erwan.dufour.io) - *Portfolio et blog d'un passionné d'électronique* - - [rfid.deuxfleurs.fr](https://rfid.deuxfleurs.fr) - *Rencontres Francophones de l'Infonuagique Décentralisé* diff --git a/content/prise_en_main/web/créer-du-contenu/_index.md b/content/prise_en_main/web/créer-du-contenu/_index.md new file mode 100644 index 0000000..8c557cb --- /dev/null +++ b/content/prise_en_main/web/créer-du-contenu/_index.md @@ -0,0 +1,7 @@ +--- +title: Créer du contenu +description: Comment écrire ses pages et son contenu +sort_by: weight +weight: 4 +date: 2022-09-01 +--- \ No newline at end of file diff --git a/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md new file mode 100644 index 0000000..e904b98 --- /dev/null +++ b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md @@ -0,0 +1,7 @@ +--- +title: Avec un générateur +description: Créer du contenu avec un générateur +sort_by: weight +date: 2022-09-01 +weight: 2 +--- \ No newline at end of file diff --git a/content/prise_en_main/web/créer-du-contenu/à-la-main.md b/content/prise_en_main/web/créer-du-contenu/à-la-main.md new file mode 100644 index 0000000..35d4dcb --- /dev/null +++ b/content/prise_en_main/web/créer-du-contenu/à-la-main.md @@ -0,0 +1,7 @@ +--- +title: À la main +description: Créer du contenu à la main +sort_by: weight +date: 2022-09-01 +weight: 1 +--- \ No newline at end of file diff --git a/content/prise_en_main/web/initialiser-votre-accès.md b/content/prise_en_main/web/initialiser-votre-accès.md new file mode 100644 index 0000000..735be0d --- /dev/null +++ b/content/prise_en_main/web/initialiser-votre-accès.md @@ -0,0 +1,7 @@ +--- +title: Initialiser votre accès +description: Initialiser le stockage objet sur Garage +sort_by: weight +date: 2022-09-01 +weight: 2 +--- \ No newline at end of file diff --git a/content/prise_en_main/web/mettre-place-DNS.md b/content/prise_en_main/web/mettre-place-DNS.md new file mode 100644 index 0000000..585db21 --- /dev/null +++ b/content/prise_en_main/web/mettre-place-DNS.md @@ -0,0 +1,7 @@ +--- +title: Mettre en place le DNS +description: Mise en place du nom de domaine +sort_by: weight +date: 2022-09-01 +weight: 3 +--- \ No newline at end of file diff --git a/content/prise_en_main/web/publier-le-contenu.md b/content/prise_en_main/web/publier-le-contenu.md new file mode 100644 index 0000000..10b44aa --- /dev/null +++ b/content/prise_en_main/web/publier-le-contenu.md @@ -0,0 +1,7 @@ +--- +title: Publier le contenu +description: Comment mettre en ligne son contenu +sort_by: weight +date: 2022-09-01 +weight: 5 +--- \ No newline at end of file diff --git a/content/prise_en_main/web/statique-comment-ça.md b/content/prise_en_main/web/statique-comment-ça.md new file mode 100644 index 0000000..384e765 --- /dev/null +++ b/content/prise_en_main/web/statique-comment-ça.md @@ -0,0 +1,13 @@ +--- +title: Statique ? Comment ça ? +description: Explication sur le contenu statique +sort_by: weight +date: 2022-09-01 +weight: 1 +--- + +Au commencement du web (au début des années 90), le contenu présent en ligne était statique : quand un client veut un fichier ou une page, il spécifie le chemin via un URL, le serveur répond tout le temps la même chose. Dès le milieu des années 90 ont apparu au sein du web des pages dynamiques, avec [CGI](https://fr.wikipedia.org/wiki/Common_Gateway_Interface) et [PHP](https://fr.wikipedia.org/wiki/PHP). Pour une même page, le serveur peut répondre un contenu différent, variant selon des paramètres rajoutés en fin de chemin URL, ou selon n'importe quel facteur qui passe par la tête du développeur. + +Avec Javascript, qui date de la même époque, une confusion se pose souvent : beaucoup de contenus statiques passent pour du dynamique aux yeux de l'internaute. Il faut alors rappeler une distinction importante : le code Javascript s'exécute côté client, c'est-à-dire sur l'ordinateur ou le téléphone de l'internaute. À contrario, le CGI ou PHP s'éxécute côté serveur, c'est-à-dire sur la machine administrée par le propriétaire du site. Selon ce qu'on veut faire, il faut choisir l'un ou l'autre. + +Je gère une boutique en ligne, et je veux que le stock de mes produits s'affiche en temps réel quand un client consulte mon site ? Il faut faire ça côté serveur, car seul lui connaît les stocks. Je veux mettre en place des décors interactifs avec la souris ? Il faut faire ça côté client, car seul lui connaît la position du curseur. Là où le bât blesse, c'est que certaines choses peuvent être faites des deux côtés, par exemple afficher l'heure sur une page. Bref, pour faire simple, une page statique peut proposer des interactions et des effets quelconques, voir servir un jeu vidéo entier. Le point important est que, du point de vue du serveur web, pour chaque personne qui demande un même URL, il sert exactement le même contenu, même si c'est du code qui sera exécuté. \ No newline at end of file From 6bbffd4233c145dfbbca7d0339a0f96cf5536597 Mon Sep 17 00:00:00 2001 From: vincent Date: Mon, 5 Sep 2022 21:15:05 +0200 Subject: [PATCH 02/10] Corrections clarification statique --- content/prise_en_main/web/statique-comment-ça.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/prise_en_main/web/statique-comment-ça.md b/content/prise_en_main/web/statique-comment-ça.md index 384e765..abb7e9f 100644 --- a/content/prise_en_main/web/statique-comment-ça.md +++ b/content/prise_en_main/web/statique-comment-ça.md @@ -1,13 +1,13 @@ --- title: Statique ? Comment ça ? -description: Explication sur le contenu statique +description: Clarification sur le contenu statique sort_by: weight date: 2022-09-01 weight: 1 --- -Au commencement du web (au début des années 90), le contenu présent en ligne était statique : quand un client veut un fichier ou une page, il spécifie le chemin via un URL, le serveur répond tout le temps la même chose. Dès le milieu des années 90 ont apparu au sein du web des pages dynamiques, avec [CGI](https://fr.wikipedia.org/wiki/Common_Gateway_Interface) et [PHP](https://fr.wikipedia.org/wiki/PHP). Pour une même page, le serveur peut répondre un contenu différent, variant selon des paramètres rajoutés en fin de chemin URL, ou selon n'importe quel facteur qui passe par la tête du développeur. +Au commencement du web (au début des années 90), le contenu présent en ligne était statique : quand un client veut un fichier ou une page, il spécifie le chemin via un URL, et le serveur répond tout le temps la même chose. Dès le milieu des années 90 ont apparu au sein du web des pages dynamiques, avec [CGI](https://fr.wikipedia.org/wiki/Common_Gateway_Interface) et [PHP](https://fr.wikipedia.org/wiki/PHP). Pour une même page, le serveur peut répondre un contenu différent, variant selon des paramètres rajoutés en fin de chemin URL, selon des données dans la mémoire du serveur, ou selon n'importe quel facteur qui passe par la tête du développeur. -Avec Javascript, qui date de la même époque, une confusion se pose souvent : beaucoup de contenus statiques passent pour du dynamique aux yeux de l'internaute. Il faut alors rappeler une distinction importante : le code Javascript s'exécute côté client, c'est-à-dire sur l'ordinateur ou le téléphone de l'internaute. À contrario, le CGI ou PHP s'éxécute côté serveur, c'est-à-dire sur la machine administrée par le propriétaire du site. Selon ce qu'on veut faire, il faut choisir l'un ou l'autre. +Avec Javascript, qui date de la même époque, une confusion se pose souvent : beaucoup de contenus statiques passent pour du dynamique aux yeux de l'internaute. Il faut alors rappeler une distinction importante : le code Javascript livré avec un site s'exécute côté client, c'est-à-dire sur l'ordinateur ou le téléphone de l'internaute. À contrario, le CGI ou PHP s'exécute côté serveur, c'est-à-dire sur la machine administrée par le propriétaire du site. Selon ce qu'on veut faire, il faut choisir l'un ou l'autre. -Je gère une boutique en ligne, et je veux que le stock de mes produits s'affiche en temps réel quand un client consulte mon site ? Il faut faire ça côté serveur, car seul lui connaît les stocks. Je veux mettre en place des décors interactifs avec la souris ? Il faut faire ça côté client, car seul lui connaît la position du curseur. Là où le bât blesse, c'est que certaines choses peuvent être faites des deux côtés, par exemple afficher l'heure sur une page. Bref, pour faire simple, une page statique peut proposer des interactions et des effets quelconques, voir servir un jeu vidéo entier. Le point important est que, du point de vue du serveur web, pour chaque personne qui demande un même URL, il sert exactement le même contenu, même si c'est du code qui sera exécuté. \ No newline at end of file +Je gère une boutique en ligne, et je veux que le stock de mes produits s'affiche quand un client consulte mon site ? Il faut faire ça côté serveur, car seul lui connaît les stocks. Je veux mettre en place des décors interactifs avec la souris ? Il faut faire ça côté client, car seul lui connaît la position du curseur. Là où le bât blesse, c'est que certaines choses peuvent être faites des deux côtés, par exemple afficher l'heure sur une page. Bref, pour faire simple, une page statique peut proposer des interactions et des effets quelconques, voir servir un jeu vidéo entier. Le point important est que, du point de vue du serveur web, pour chaque personne qui demande un même URL, il sert exactement le même contenu, même si c'est éventuellement du code qui sera exécuté. \ No newline at end of file From b21c15c2ef13f89766b8579b580ada85e873719b Mon Sep 17 00:00:00 2001 From: vincent Date: Mon, 5 Sep 2022 22:39:34 +0200 Subject: [PATCH 03/10] =?UTF-8?q?Initialisation=20de=20l'acc=C3=A8s=20S3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/prise_en_main/web/_index.md | 6 ---- .../web/initialiser-votre-accès.md | 28 ++++++++++++++++++- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/content/prise_en_main/web/_index.md b/content/prise_en_main/web/_index.md index 7e9f620..cd026d7 100644 --- a/content/prise_en_main/web/_index.md +++ b/content/prise_en_main/web/_index.md @@ -30,12 +30,6 @@ Vous en avez marre de faire toute votre communication associative via Facebook ? -# Demander un accès - -Contactez un·e opérateur·ice en lui indiquant le nom que vous souhaitez pour votre site web. -Nous vous fournirons ensuite les identifiants suivants que vous utiliserez pour la mise en ligne de votre site web : - - L'identifiant de votre clé d'accès (exemple : `GKae0f36c...`) - - Votre clé d'accès secrète (exemple : `ae6df87221edd...`) # Sites statiques diff --git a/content/prise_en_main/web/initialiser-votre-accès.md b/content/prise_en_main/web/initialiser-votre-accès.md index 735be0d..dcac03e 100644 --- a/content/prise_en_main/web/initialiser-votre-accès.md +++ b/content/prise_en_main/web/initialiser-votre-accès.md @@ -4,4 +4,30 @@ description: Initialiser le stockage objet sur Garage sort_by: weight date: 2022-09-01 weight: 2 ---- \ No newline at end of file +--- + +De par l'utilisation de son logiciel Garage, Deuxfleurs conserve et sert les sites web en recourant au stockage objet. Pour chaque site, on a un bucket (seau en français), partageant le même nom que lui. On peut voir un bucket comme un récipient dans lequel on va mettre tout nos fichiers à publier. Pour des raisons de sécurité, l'initialisation de ce dispositif et des identifiants d'accès ne peut être faite que par un administrateur du stockage de Deuxfleurs. Une fois tout ceci mis en place, vous pourrez gérer votre site seul·e. + +# Contacter un·e administrateur·rice +Vous allez donc devoir contacter quelqu'un avec les droits nécessaires pour tout mettre en place. Deux opérations sont nécessaires, faisons d'une pierre deux coups : demandez à la fois les accès et la mise du bucket en global en une fois. + +Une dernière chose avant de se lancer : avez-vous à votre disposition le nom de domaine pour le site ? Il s'agit de l'identifiant du site qu'on tape dans la barre URL d'un navigateur web pour le visiter. Ici on prendra pour exemple `exemple-un.fr`. Si vous n'avez pas réservé le vôtre au moment où vous lisez ces lignes, il vaut mieux vérifier sa disponibilité d'abord, par exemple [ici](https://www.gandi.net/fr/domain). + +### Demander un accès +Nous allons vous fournir un identifiant et un secret que vous utiliserez pour gérer votre site. En effet, sans eux, n'importe qui pourrait le modifier à votre insu. Vous aurez deux choses à conserver : + - L'identifiant de votre clé d'accès. Il ressemble par exemple à `cSGcEQoInTVgkxPIzzF6IyU7C7`. Même s'il ne vaut mieux pas le crier sur tous les toits, il n'y a pas de risque de sécurité si vous le dévoilez à des gens. + - La clé d'accès secrète. Elle ressemble à `rCE6vzSVkll54FNd0Jvx7uoRsNqAXexxX1b3rm2BofquQKln6bdnDLRRli1dZbSS`. Comme son nom l'indique, elle doit absolument rester secrète. Si elle est dévoilée par accident, contactez un·e administrateur·rice immédiatement ! + +### Demander un bucket avec un nom global +Il faut qu'un·e administrateur·rice crée le bucket correspondant correspondant à votre nom de domaine pour vous. Une fois fait, de son point de vue, lorsqu'iel listera une partie d'entre eux, iel verra ceci : +``` +$ sudo docker exec -ti 78e6b7e53241 /garage bucket list|grep -P 'exemple-un.fr|exemple-deux.eu' + 4bdce6:exemple-un.fr 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e + exemple-deux.eu 941956ebfffa8fd564ad6b40e4bb5ac2f2b93bdbba1d1bf88fe6daff2cf4df6c +``` +Si `exemple-un.fr` n'est pas à gauche dans la même colonne que `exemple-deux.eu`, c'est parce qu'il n'est pas réglé en global. L'administrateur·rice va corriger ça en faisant `garage bucket alias 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e exemple-un.fr`. Résultat : +``` + exemple-un.fr 4bdce6:exemple-un.fr 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e + exemple-deux.eu 941956ebfffa8fd564ad6b40e4bb5ac2f2b93bdbba1d1bf88fe6daff2cf4df6c +``` +C'est réglé. [Vous pouvez désormais vous occuper du DNS](../mettre-place-dns/). \ No newline at end of file From 86a3c764f9315fa8e796ee67f5b549722c662040 Mon Sep 17 00:00:00 2001 From: vincent Date: Tue, 6 Sep 2022 22:57:49 +0200 Subject: [PATCH 04/10] Configuration DNS --- content/prise_en_main/web/mettre-place-DNS.md | 30 ++++++++++++++++++- .../prise_en_main/web/publier-le-contenu.md | 26 +++++++++++++++- 2 files changed, 54 insertions(+), 2 deletions(-) diff --git a/content/prise_en_main/web/mettre-place-DNS.md b/content/prise_en_main/web/mettre-place-DNS.md index 585db21..cf1ac05 100644 --- a/content/prise_en_main/web/mettre-place-DNS.md +++ b/content/prise_en_main/web/mettre-place-DNS.md @@ -4,4 +4,32 @@ description: Mise en place du nom de domaine sort_by: weight date: 2022-09-01 weight: 3 ---- \ No newline at end of file +--- + +# Louer son nom de domaine +Les noms de domaine sont gérés et loués par les _registraires de nom de domaine_. Ce sont eux qui proposent aux clients finaux de réserver des noms. On peut citer [Gandi](https://www.gandi.net/fr), [OVHcloud](https://www.ovhcloud.com/fr/), ou [Scaleway](https://www.scaleway.com/fr/) par exemple. Lorsqu'on veut s'offrir `exemple-un.fr` notamment, c'est chez eux que ça se passe; ensuite, à leur tour, ils vont enregistrer notre demande auprès de l'organisme correspondant à l'extension choisie : l'association française [AFNIC](https://www.afnic.fr/) pour `.fr`, l'association états-unienne [Public Internet Registry ](https://thenew.org/) pour `.org`, l'association européenne (belge en particulier) [EURid](https://eurid.eu/fr/) pour `.eu`... Nous recommandons de privilégier l'une de ces trois extensions parmis la myriade qui existe, car ces entités ont pour historique de ne pas augmenter arbitrairement les prix tout en garantissant la disponibilité de votre nom de domaine. + +Pour référence, la location d'un nom de domaine en `.fr` est d'environ 12 euros par an. Certaines offres vous fournissent «des extras» en plus comme une boîte courriel, sans que ça n'influe grandement sur les prix. En ce qui nous concerne, Gandi est un des registraires que nous recommandons. + +### Configurer un enregistrement DNS pour un site hébergé chez Deuxfleurs : exemple avec Gandi +Une fois votre nom de domaine réservé, il faut maintenant le configurer. La procédure change en fonction de l'entreprise choisie. Nous expliquons ici comment configurer chez Gandi. Supposons que vous avez loué `camille-michu.fr` chez eux. + +D'abord, rendez-vous dans votre espace utilisateur Gandi, puis de là cliquez dans le menu à gauche sur «Nom de domaine» : + +![dns1.png](/img/dns1.png) + +Une fois sur la page «Nom de domaines», votre nom de domaine devrait apparaitre dans la liste, ici «camille-michu.fr». Cliquez dessus : + +![dns2.png](/img/dns2.png) + +Dans le menu du haut, sélectionnez «Enregistrements DNS» : + +![dns3.png](/img/dns3.png) + +Ensuite cliquez sur le bouton «Ajouter un enregistrement» : + +![dns4.png](/img/dns4.png) + +Choisissez alors «ALIAS» comme type, et `garage.deuxfleurs.fr` comme nom d'hôte. + +![dns5.png](/img/dns5.png) diff --git a/content/prise_en_main/web/publier-le-contenu.md b/content/prise_en_main/web/publier-le-contenu.md index 10b44aa..2c70d83 100644 --- a/content/prise_en_main/web/publier-le-contenu.md +++ b/content/prise_en_main/web/publier-le-contenu.md @@ -4,4 +4,28 @@ description: Comment mettre en ligne son contenu sort_by: weight date: 2022-09-01 weight: 5 ---- \ No newline at end of file +--- + +parler du .awsrc + + +aws s3 website giraud.eu --index-document index.html --error-document erreur.html + +ou + +aws s3api put-bucket-website --bucket --website-configuration ' +{ + "ErrorDocument": { + "Key": "/errors/4xx.html" + }, + "IndexDocument": { + "Suffix": "index.html" + } +} +' + + + + + +Fécilicitation ! -> badges \ No newline at end of file From d63c2cf0ac9ff229d1d49466af56dbfe245854b9 Mon Sep 17 00:00:00 2001 From: vincent Date: Sun, 2 Oct 2022 18:04:28 +0200 Subject: [PATCH 05/10] =?UTF-8?q?M=C3=A0j=20des=20en-t=C3=AAtes=20pour=20c?= =?UTF-8?q?lassement=20mixte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/créer-du-contenu/_index.md | 16 ++++---- content/prise_en_main/web/dns.md | 40 ------------------- .../web/initialiser-votre-accès.md | 15 +++---- content/prise_en_main/web/mettre-place-DNS.md | 15 +++---- .../prise_en_main/web/publier-le-contenu.md | 15 +++---- content/prise_en_main/web/rclone.md | 2 + .../prise_en_main/web/statique-comment-ça.md | 15 +++---- content/prise_en_main/web/winscp.md | 2 + 8 files changed, 45 insertions(+), 75 deletions(-) delete mode 100644 content/prise_en_main/web/dns.md diff --git a/content/prise_en_main/web/créer-du-contenu/_index.md b/content/prise_en_main/web/créer-du-contenu/_index.md index 8c557cb..6b4ca67 100644 --- a/content/prise_en_main/web/créer-du-contenu/_index.md +++ b/content/prise_en_main/web/créer-du-contenu/_index.md @@ -1,7 +1,9 @@ ---- -title: Créer du contenu -description: Comment écrire ses pages et son contenu -sort_by: weight -weight: 4 -date: 2022-09-01 ---- \ No newline at end of file ++++ +title = "Créer du contenu" +description = "Comment écrire ses pages et son contenu" +sort_by = "weight" +weight = 0 +date = 2022-09-01 +[extra] +weight_custom = 4 ++++ \ No newline at end of file diff --git a/content/prise_en_main/web/dns.md b/content/prise_en_main/web/dns.md deleted file mode 100644 index 491abb5..0000000 --- a/content/prise_en_main/web/dns.md +++ /dev/null @@ -1,40 +0,0 @@ -+++ -title = "DNS" -description = "" -date = 2022-08-25T08:56:54.837Z -dateCreated = 2021-11-29T08:46:18.021Z -weight = 10 -+++ - -# Louer son nom de domaine - -Nous recommandons également de choisir un nom de domaine en `.fr` (géré par l'association française AFNIC), `.org` (géré par l'association américaine Public Internet Regitry) ou `.eu` (géré par l'association EURid). Ces entités ont pour historique de ne pas augmenter arbitrairement les prix tout en garantissant la disponibilité de votre nom de domaine. - -Pour référence, la location d'un nom de domaine en `.fr` est d'environ 12 euros par an. Parfois, les bureaux d'enregistrement vous fournissent "des extras" en plus comme une boite email, mais par rapport à la concurrence, ces "extras" n'influent (généralement) pas sur les prix. - -Gandi est un bureau d'enregistrement de nom de domaine que nous recommandons. [Voir la fiche Wikipeda](https://fr.wikipedia.org/wiki/Gandi_(entreprise)). - -# Le configurer pour Deuxfleurs, exemple de Gandi - -Une fois loué, il faut maintenant le configurer. -Supposons que vous avez loué camille-michu.fr chez Gandi et que vous vouliez que votre site web soit accessible à l'URL suivante : https://camille-michu.fr - -D'abord, rendez-vous dans votre espace utilisateur Gandi, puis de là cliquez dans le menu à gauche sur "Nom de domaine" : - -![dns1.png](/img/dns1.png) - -Une fois sur la page "Nom de domaines", votre nom de domaine devrait apparaitre dans la liste, ici "camille-michu.fr". Cliquez dessus. - -![dns2.png](/img/dns2.png) - -Dans le menu du haut, sélectionnez "Enregistrements DNS" : - -![dns3.png](/img/dns3.png) - -Ensuite cliquez sur le bouton "Ajouter un enregistrement" : - -![dns4.png](/img/dns4.png) - -Choisissez alors "ALIAS" comme type, et `garage.deuxfleurs.fr` comme nom d'hôte. - -![dns5.png](/img/dns5.png) diff --git a/content/prise_en_main/web/initialiser-votre-accès.md b/content/prise_en_main/web/initialiser-votre-accès.md index dcac03e..328b106 100644 --- a/content/prise_en_main/web/initialiser-votre-accès.md +++ b/content/prise_en_main/web/initialiser-votre-accès.md @@ -1,10 +1,11 @@ ---- -title: Initialiser votre accès -description: Initialiser le stockage objet sur Garage -sort_by: weight -date: 2022-09-01 -weight: 2 ---- ++++ +title = "Initialiser votre accès" +description = "Initialiser le stockage objet sur Garage" +date = 2022-09-01 +weight = 0 +[extra] +weight_custom = 2 ++++ De par l'utilisation de son logiciel Garage, Deuxfleurs conserve et sert les sites web en recourant au stockage objet. Pour chaque site, on a un bucket (seau en français), partageant le même nom que lui. On peut voir un bucket comme un récipient dans lequel on va mettre tout nos fichiers à publier. Pour des raisons de sécurité, l'initialisation de ce dispositif et des identifiants d'accès ne peut être faite que par un administrateur du stockage de Deuxfleurs. Une fois tout ceci mis en place, vous pourrez gérer votre site seul·e. diff --git a/content/prise_en_main/web/mettre-place-DNS.md b/content/prise_en_main/web/mettre-place-DNS.md index cf1ac05..78a505d 100644 --- a/content/prise_en_main/web/mettre-place-DNS.md +++ b/content/prise_en_main/web/mettre-place-DNS.md @@ -1,10 +1,11 @@ ---- -title: Mettre en place le DNS -description: Mise en place du nom de domaine -sort_by: weight -date: 2022-09-01 -weight: 3 ---- ++++ +title = "Mettre en place le DNS" +description = "Mise en place du nom de domaine" +date = 2022-09-01 +weight = 0 +[extra] +weight_custom = 3 ++++ # Louer son nom de domaine Les noms de domaine sont gérés et loués par les _registraires de nom de domaine_. Ce sont eux qui proposent aux clients finaux de réserver des noms. On peut citer [Gandi](https://www.gandi.net/fr), [OVHcloud](https://www.ovhcloud.com/fr/), ou [Scaleway](https://www.scaleway.com/fr/) par exemple. Lorsqu'on veut s'offrir `exemple-un.fr` notamment, c'est chez eux que ça se passe; ensuite, à leur tour, ils vont enregistrer notre demande auprès de l'organisme correspondant à l'extension choisie : l'association française [AFNIC](https://www.afnic.fr/) pour `.fr`, l'association états-unienne [Public Internet Registry ](https://thenew.org/) pour `.org`, l'association européenne (belge en particulier) [EURid](https://eurid.eu/fr/) pour `.eu`... Nous recommandons de privilégier l'une de ces trois extensions parmis la myriade qui existe, car ces entités ont pour historique de ne pas augmenter arbitrairement les prix tout en garantissant la disponibilité de votre nom de domaine. diff --git a/content/prise_en_main/web/publier-le-contenu.md b/content/prise_en_main/web/publier-le-contenu.md index 2c70d83..43be6c9 100644 --- a/content/prise_en_main/web/publier-le-contenu.md +++ b/content/prise_en_main/web/publier-le-contenu.md @@ -1,10 +1,11 @@ ---- -title: Publier le contenu -description: Comment mettre en ligne son contenu -sort_by: weight -date: 2022-09-01 -weight: 5 ---- ++++ +title = "Publier le contenu" +description = "Comment mettre en ligne son contenu" +date = 2022-09-01 +weight = 0 +[extra] +weight_custom = 5 ++++ parler du .awsrc diff --git a/content/prise_en_main/web/rclone.md b/content/prise_en_main/web/rclone.md index 9647339..d7e03d1 100644 --- a/content/prise_en_main/web/rclone.md +++ b/content/prise_en_main/web/rclone.md @@ -4,6 +4,8 @@ description = "Rclone Browser" weight = 30 date = 2021-11-25T14:31:35.570Z dateCreated = 2021-11-25T14:02:30.997Z +[extra] +weight_custom = 15 +++ diff --git a/content/prise_en_main/web/statique-comment-ça.md b/content/prise_en_main/web/statique-comment-ça.md index abb7e9f..ad53506 100644 --- a/content/prise_en_main/web/statique-comment-ça.md +++ b/content/prise_en_main/web/statique-comment-ça.md @@ -1,10 +1,11 @@ ---- -title: Statique ? Comment ça ? -description: Clarification sur le contenu statique -sort_by: weight -date: 2022-09-01 -weight: 1 ---- ++++ +title = "Statique ? Comment ça ?" +description = "Clarification sur le contenu statique" +date = 2022-09-01 +weight = 0 +[extra] +weight_custom = 1 ++++ Au commencement du web (au début des années 90), le contenu présent en ligne était statique : quand un client veut un fichier ou une page, il spécifie le chemin via un URL, et le serveur répond tout le temps la même chose. Dès le milieu des années 90 ont apparu au sein du web des pages dynamiques, avec [CGI](https://fr.wikipedia.org/wiki/Common_Gateway_Interface) et [PHP](https://fr.wikipedia.org/wiki/PHP). Pour une même page, le serveur peut répondre un contenu différent, variant selon des paramètres rajoutés en fin de chemin URL, selon des données dans la mémoire du serveur, ou selon n'importe quel facteur qui passe par la tête du développeur. diff --git a/content/prise_en_main/web/winscp.md b/content/prise_en_main/web/winscp.md index 60b5274..6f63d97 100644 --- a/content/prise_en_main/web/winscp.md +++ b/content/prise_en_main/web/winscp.md @@ -2,6 +2,8 @@ title = "WinSCP" description = "WinSCP " weight = 20 +[extra] +weight_custom = 10 +++ From 54027bc89f2d84e4656a22fc78102c7b89874f29 Mon Sep 17 00:00:00 2001 From: vincent Date: Sun, 2 Oct 2022 19:37:50 +0200 Subject: [PATCH 06/10] =?UTF-8?q?Explication=20=C3=A9criture=20de=20page?= =?UTF-8?q?=20=C3=A0=20la=20main?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/créer-du-contenu/_index.md | 6 ++- .../créer-du-contenu/avec-un-générateur.md | 14 +++--- .../web/créer-du-contenu/à-la-main.md | 44 ++++++++++++++++--- .../prise_en_main/web/publier-le-contenu.md | 6 +++ 4 files changed, 55 insertions(+), 15 deletions(-) diff --git a/content/prise_en_main/web/créer-du-contenu/_index.md b/content/prise_en_main/web/créer-du-contenu/_index.md index 6b4ca67..44fc976 100644 --- a/content/prise_en_main/web/créer-du-contenu/_index.md +++ b/content/prise_en_main/web/créer-du-contenu/_index.md @@ -6,4 +6,8 @@ weight = 0 date = 2022-09-01 [extra] weight_custom = 4 -+++ \ No newline at end of file ++++ + +Votre site est désormais complètement configuré. Avant de publier du contenu, il faut écrire celui-ci ! + +Vous pouvez, au choix, [l'écrire à la main](./a-la-main/), ou vous [faire assister par un générateur](./avec-un-generateur/). \ No newline at end of file diff --git a/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md index e904b98..1fa39a0 100644 --- a/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md +++ b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md @@ -1,7 +1,7 @@ ---- -title: Avec un générateur -description: Créer du contenu avec un générateur -sort_by: weight -date: 2022-09-01 -weight: 2 ---- \ No newline at end of file ++++ +title = "Avec un générateur" +description = "Créer du contenu avec un générateur" +sort_by = "weight" +date = 2022-09-01 +weight = 2 ++++ \ No newline at end of file diff --git a/content/prise_en_main/web/créer-du-contenu/à-la-main.md b/content/prise_en_main/web/créer-du-contenu/à-la-main.md index 35d4dcb..8cc1555 100644 --- a/content/prise_en_main/web/créer-du-contenu/à-la-main.md +++ b/content/prise_en_main/web/créer-du-contenu/à-la-main.md @@ -1,7 +1,37 @@ ---- -title: À la main -description: Créer du contenu à la main -sort_by: weight -date: 2022-09-01 -weight: 1 ---- \ No newline at end of file ++++ +title = "À la main" +description = "Créer du contenu à la main" +sort_by = "weight" +date = 2022-09-01 +weight = 1 ++++ + +Garage, comme tout serveur web, va se contenter ici de servir des fichiers `.html`. Ces fichiers sont tout à fait lisibles et écrivables par un humain. Ainsi, si vous n'avez pas prévu d'avoir un site avec beaucoup de pages, il est souvent intéressant de façonner chacune d'entre elles à la main. + +### Décrire le contenu + +Pour écrire un page web, il faut écrire un fichier `.html` en suivant, justement, la syntaxe et les règles HTML. À titre indicatif, voici un exemple simple : +``` + + + + Mon site + + +

Bonjour; bienvenue sur mon site !

+ + +``` +Vous pourrez facilement trouver moult ressources en ligne pour maîtriser le HTML. [La documentation de Mozilla sur le sujet](https://developer.mozilla.org/fr/docs/Web/HTML) est un bon départ. Enfin, il faut savoir que le HTML est un langage pour décrire le contenu de la page seulement, pas l'allure ou l'esthétique ! La conséquence directe est qu'une page reposant uniquement sur HTML sera sobre : texte noir sur fond blanc, avec alignement à gauche. Si cela vous suffit, vous pouvez d'ores et déjà vous arrêter sur ça. + +### Décrire l'apparence +Si vous souhaitez ajouter des couleurs, modifier la disposition, ou l'arrangement par exemple, il faut rajouter, au-dessus du HTML, une description CSS qui contient vos règles esthétiques. Vous pouvez par exemple créer un fichier `style.css` à la racine du dossier représentant votre site. Ensuite, dans vos pages HTML que vous souhaitez styliser, il faut rajouter, dans la section ``, la formule suivante : `` (attention le chemin de `style.css` est relatif, par exemple si vous voulez styliser une page dans un dossier, il faudrait alors marquer `../style.css` à la place). Une fois ceci fait, lorsque quelqu'un va visiter une page HTML, il va automatiquement récupérer le fichier CSS associé, et l'appliquer. Voici encore une fois, à titre indicatif, un contenu exemple pour `style.css` : +``` +body +{ + margin: 0 auto; + max-width: 1000px; + padding: 10px 10px 10px 10px; +} +``` +Encore une fois, plein de ressources sont disponibles en ligne, et Mozilla propose encore une fois [une bonne base](https://developer.mozilla.org/fr/docs/Web/CSS). \ No newline at end of file diff --git a/content/prise_en_main/web/publier-le-contenu.md b/content/prise_en_main/web/publier-le-contenu.md index 43be6c9..85770d5 100644 --- a/content/prise_en_main/web/publier-le-contenu.md +++ b/content/prise_en_main/web/publier-le-contenu.md @@ -10,6 +10,12 @@ weight_custom = 5 parler du .awsrc +### Configurer la page par défaut et celle pour les erreurs +Puisqu'on est sur la configuration S3, profitons-en pour paramétrer une page d'accueil et une page d'erreur. En effet, les URL qu'on utilise pour naviguer sur votre site correspondront à la hiérarchie de fichiers présents sur Garage. Si on visite `https://votre-site.fr/blog/recette-de-gateau.html`, Garage va simplement servir le fichier `blog/recette-de-gateau.html`, en partant de la racine du bucket. Mais que ce passe-t-il si on demande à voir `https://votre-site.fr/blog/` ? Garage ne peut pas retourner un dossier; et de toute façon cela ne fonctionnerait pas, puisqu'un dossier n'a pas données propre à lui-même, il ne fait que contenir des fichiers distincts en son sein. On voit pourtant souvent ce genre d'URL en ligne. En fait, les serveurs web sont configurés pour que si aucun fichier du dossier n'est spécifié, alors on va utiliser celui avec un nom paramétré à l'avance. C'est de ça dont on parle. +De même, lorsque quelqu'un demande une page qui n'existe pas, que peut faire Garage ? Dans la même logique, on va lui donner un nom de fichier à servir par défaut si jamais cela arrive. + + + aws s3 website giraud.eu --index-document index.html --error-document erreur.html ou From 43c5d05edf9264765f470ad4171a5e217bb65ea3 Mon Sep 17 00:00:00 2001 From: vincent Date: Fri, 21 Oct 2022 21:47:24 +0200 Subject: [PATCH 07/10] =?UTF-8?q?D=C3=A9but=20de=20cr=C3=A9ation=20du=20co?= =?UTF-8?q?ntenu=20avec=20un=20g=C3=A9n=C3=A9rateur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../prise_en_main/web/créer-du-contenu/avec-un-générateur.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md index 1fa39a0..9e198c3 100644 --- a/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md +++ b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md @@ -4,4 +4,6 @@ description = "Créer du contenu avec un générateur" sort_by = "weight" date = 2022-09-01 weight = 2 -+++ \ No newline at end of file ++++ + +Si vous souhaitez par exemple écrire un blog, vous allez probablement avoir une page par post. À la longue, on peut sans problème arriver à des dizaines de pages... Si on les écrit à la main, il va falloir copier/coller une bonne partie du code HTML, mais pas tout. Pour éviter ce travail rébarbatif, \ No newline at end of file From 954bab8d02e5bc3ab08c6c312a5c275cf8aa52c0 Mon Sep 17 00:00:00 2001 From: vincent Date: Thu, 1 Dec 2022 00:21:47 +0100 Subject: [PATCH 08/10] =?UTF-8?q?=C3=89crire=20du=20contenu=20avec=20un=20?= =?UTF-8?q?g=C3=A9n=C3=A9rateur=20de=20sites=20statiques?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../créer-du-contenu/avec-un-générateur.md | 41 +++++++++++++++++- .../web/créer-du-contenu/à-la-main.md | 4 +- content/prise_en_main/web/mettre-place-DNS.md | 2 + .../prise_en_main/web/publier-le-contenu.md | 9 +++- static/img/garage_en.png | Bin 0 -> 1159 bytes static/img/garage_fr.png | Bin 0 -> 1169 bytes 6 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 static/img/garage_en.png create mode 100644 static/img/garage_fr.png diff --git a/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md index 9e198c3..7bf57e0 100644 --- a/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md +++ b/content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md @@ -6,4 +6,43 @@ date = 2022-09-01 weight = 2 +++ -Si vous souhaitez par exemple écrire un blog, vous allez probablement avoir une page par post. À la longue, on peut sans problème arriver à des dizaines de pages... Si on les écrit à la main, il va falloir copier/coller une bonne partie du code HTML, mais pas tout. Pour éviter ce travail rébarbatif, \ No newline at end of file +Si vous souhaitez par exemple écrire un blog, vous allez probablement avoir une page par post. À la longue, on peut sans problème arriver à des dizaines de pages... Si on les écrit à la main, il va falloir copier/coller une bonne partie du code HTML, mais pas tout. Pour éviter ce travail rébarbatif, il existe ce qu'on appelle des générateurs de sites statiques. Ils vous permettent d'écrire dans une syntaxe très simple (Markdown) vos contenus, sans vous soucier du HTML ou du CSS, car ils emballeront eux-mêmes vos écrits dans des modèles prévus à cet effet. [Le guide que vous êtes en train de lire en ce moment même utilise un tel outil !](https://git.deuxfleurs.fr/Deuxfleurs/guide.deuxfleurs.fr) + +### Choisir un générateur et un thème +Il existe de nombreux générateurs de sites statiques. On peut citer [Hugo](https://gohugo.io/), [Jekyll](https://jekyllrb.com/), [Zola](https://www.getzola.org/), et bien d'autres... En général, ils se ressemblent beaucoup. À titre indicatif, pour ce guide, nous utilisons Zola. Nous baserons nos exemples sur lui. Si votre système d'exploitation est Linux, cherchez dans votre gestionnaire de paquet si vous trouvez l'un d'entre eux. Zola est ainsi facilement installable sur Arch, Ubuntu, et Fedora. + +Une fois un générateur de site statique installé, rendez-vous sur le site officiel de celui-ci pour choisir un thème. Chez Zola, il faut aller [ici](https://www.getzola.org/themes/). Si vous cliquez sur l'un d'entre eux, vous aurez des instructions sur comment l'installer. Il s'agit souvent de télécharger le thème dans le dossier correspondant à votre site, et de modifier le fichier `config.toml`, nécessaire pour Zola, afin de sélectionner le thème. + +### Décrire le contenu +Pour écrire le contenu de vos pages, ou de vos billets de blog par exemple, il vous faudra utiliser la syntaxe Markdown. Rassurez-vous, elle a été pensée pour être très simple et peut-être apprise en quelques minutes. Voici un exemple : +``` +# Ceci est le titre principal +## Ceci est un sous-titre +Ceci est du texte tout à fait normal. *Cette partie-ci du texte sera en italique*. **Cette partie-là sera en gras**. + +## Ceci est encore un sous-titre +### Ceci est un sous-sous-titre +Voici du texte pour introduire la liste à puce qui va suivre : +* première élément de la liste +* second élément de la liste +* troisième élément de la liste +``` +Quand on écrit du texte sans mettre quoi que ce soit autour ou avant, cela deviendra du texte tout à fait normal. On peut mettre un ou plusieurs dièses au début de la ligne pour en faire un titre. On peut mettre du texte en italique ou en gras avec des astérisques. Un astérisque en début de ligne provoque une liste à puces. Bref, cette syntaxe n'est pas compliquée, et vous pouvez facilement trouver plein de tutoriels en ligne pour la connaître. [Framasoft, par exemple, propose un bon guide](https://docs.framasoft.org/fr/grav/markdown.html). + +Une fois votre fichier écrit, enregistrez-le avec l'extension `.md`, par exemple sous le nom `recette-tartre-au-citron.md`. L'idée est qu'à chaque page de votre site correspond un fichier `.md`, et ceux-ci seront regroupés dans un dossier. Vous trouverez [ici](https://git.deuxfleurs.fr/Deuxfleurs/guide.deuxfleurs.fr/src/branch/main/content) les fichiers Markdown écrits pour faire ce guide. + +Cependant, il reste juste une petite chose à faire lorsque vous avez fini votre texte : écrire l'en-tête au dessus du markdown, qui donnera au générateur des informations importantes sur ce contenu. On encadre cet en-têtre avec trois signes plus. Voici un exemple basé sur cette page : +``` ++++ +title = "Avec un générateur" +description = "Créer du contenu avec un générateur" +date = 2022-09-01 ++++ + +# Titre +Texte de la page... +``` +Comme vous l'avez peut-être compris, il s'agit de donner le titre de cette page, sa description, et sa date d'écriture. D'autres informations peuvent être rajoutées, cela dépend du générateur et du thème sélectionnés. + +### Générer les pages +Vous avez donc des fichiers `.md` renfermant vos contenus, et un thème qui vous plaît. Avec un terminal, positionnez-vous dans le dossier racine de votre site projet. Si vous utilisez Zola, celui-ci devrait contenir un fichier `config.toml`, vous pouvez alors faire `zola build`. Cela va générer l'intégralité de votre site dans le dossier `public/`. Vous constaterez donc qu'il sera rempli de fichiers `.html` et `.css`, [vous êtes alors prêt(e) à passer à la publication](../../publier-le-contenu/) ! diff --git a/content/prise_en_main/web/créer-du-contenu/à-la-main.md b/content/prise_en_main/web/créer-du-contenu/à-la-main.md index 8cc1555..541a009 100644 --- a/content/prise_en_main/web/créer-du-contenu/à-la-main.md +++ b/content/prise_en_main/web/créer-du-contenu/à-la-main.md @@ -34,4 +34,6 @@ body padding: 10px 10px 10px 10px; } ``` -Encore une fois, plein de ressources sont disponibles en ligne, et Mozilla propose encore une fois [une bonne base](https://developer.mozilla.org/fr/docs/Web/CSS). \ No newline at end of file +Encore une fois, plein de ressources sont disponibles en ligne, et Mozilla propose encore une fois [une bonne base](https://developer.mozilla.org/fr/docs/Web/CSS). + +Une fois que vous avez tous vos fichiers `.html` et `.css` réunis, [vous pouvez passer à la publication](../../publier-le-contenu/) ! diff --git a/content/prise_en_main/web/mettre-place-DNS.md b/content/prise_en_main/web/mettre-place-DNS.md index 78a505d..d27489a 100644 --- a/content/prise_en_main/web/mettre-place-DNS.md +++ b/content/prise_en_main/web/mettre-place-DNS.md @@ -34,3 +34,5 @@ Ensuite cliquez sur le bouton «Ajouter un enregistrement» : Choisissez alors «ALIAS» comme type, et `garage.deuxfleurs.fr` comme nom d'hôte. ![dns5.png](/img/dns5.png) + +Maintenant que votre configuration DNS est réglée, vous pouvez [préparer votre contenu](../créer-du-contenu/) ! diff --git a/content/prise_en_main/web/publier-le-contenu.md b/content/prise_en_main/web/publier-le-contenu.md index 85770d5..917eacb 100644 --- a/content/prise_en_main/web/publier-le-contenu.md +++ b/content/prise_en_main/web/publier-le-contenu.md @@ -35,4 +35,11 @@ aws s3api put-bucket-website --bucket --website-configuration ' -Fécilicitation ! -> badges \ No newline at end of file +Fécilicitations ! Vous avez désormais votre propre site web accessible publiquement en ligne ! +Vous pouvez rajouter dessus le badge attestant fièrement son hébergement sur Garage: + +[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) +[![Badge indiquant qu'un site est hébergé sur Garage en anglais](/img/garage_en.png)](https://garagehq.deuxfleurs.fr/) +``` +Badge indiquant que ce site est propulsé par le logiciel Garage +``` diff --git a/static/img/garage_en.png b/static/img/garage_en.png new file mode 100644 index 0000000000000000000000000000000000000000..d9275860c971aa867ec4c6dfc4a7176c7df29cb4 GIT binary patch literal 1159 zcmV;21bF+2P)EX>4Tx04R}tkv&MmKpe$iTcx5^5j%*8WT;MdQ4z;lg(6f4wL+^7CYOFelZGV4 z#ZhoAIQX$xb#QUk)xlK|1V2C=otzY1q{ROvg%&X$9QWhhy~o`H!R`};+aiL z=e$oGW<^OMJ|~_q=z_$LT$f#b<6Lmq&ojeDIyFxmCKd{9EVnT$8Y=NLaYRuy%J*kn zRyc2QR?Ah^yeEHQD5tF~bDic05?I6%MCwRJ6(y8mAxf)8iis5M$36VRj$b5~Os*0b zITlcX3d!+<|H1EW&HU7)n-q!zoiDciF$M&8fkw@?zmILZaRLOMfh(=$uhfCrPtt2G zEpi0(Zvz+CElu77E_Z;TCtWfmM+(sN=kvh(8GTb07`z3#*WBKk`#607($rP*1~@nb z#tW3a?(y!f_TK(I)9mjDob__Id?$1E00006VoOIv00000008+zyMF)x010qNS#tmY zE+YT{E+YYWr9XB6000McNliru<_jJY1ve45W!3-y02y>eSad^gZEa<4bO1wgWnpw> zWFU8GbZ8()Nlj2!fese{00Li0L_t(&-tCz|Qo}F|Mb(V2!h(Zz8;-zm08Z2Cx@V}j ztmq0D_AGjsumA<&DwY(>N!p2KIuIw0?PvK%mN(tUQwOV6vt~t5&rbUTg#PONZE+pk zJbyvAyPu>T0B~*V^!fA7z%_(6#o*?iKswGEphH?fUp|!w%?&mkyC>*SGTWN}xsFSN zNmo*BuxYs`=rGg?4NUqxSI*Uup5Z2_HrTdpf3KrE=&VF&4Z-9lOB(zf9*bbnYJd)7 zJD+-6dadn94UM;gjWPZ!_XHiR9;yYBdNo&%duB{qrC|TS`Gel{JGlkM!Bc@9dY`r) z*FMI<7l5xRH1h`Q37Xw#T$|U{0(%)n*`?$45w06B{iu3_Edh;v%6hPNQ?V3Jt_7Cb z!^<6XJ5YfZqll%#oC7SvrGGV`Z$u&@v~61rEQOku9k*vzI%16Wk6cM?THA0yHH?D` z0C3!%vl=bN!MX5fDS$ouf*>h44sHrI*Ef_1)kb5f-s=H51&I)8xfU$#lUX8e(Q^7~ zfojS{NT(XP{6a}xsXlj)OE5`oNcu`4Ychb+0YxLF4ry6>KX=bkSE_GKX;S$3^N=I_ z;rmS}bx4RSu2bse4 z7<;1~@X&JSyfJqcC&`K=8=5%XA_-J$$3zR#WHdPqD@lxu(N3xDl78i6DvcUEW9(q{ z8V$f9FOuq7JeoUlw}9bxr(+~YYO|5Fb_xxa+8%pMWsNqhD?~G){Z8(*Kfr4K)~s;r Z+Bg0{o4cMhVdVe-002ovPDHLkV1kkP|7HLH literal 0 HcmV?d00001 diff --git a/static/img/garage_fr.png b/static/img/garage_fr.png new file mode 100644 index 0000000000000000000000000000000000000000..114f85a26490d855c728b1016650b9f08735a892 GIT binary patch literal 1169 zcmV;C1aA9@P)EX>4Tx04R}tkv&MmKpe$iTcx5^5j%*8WT;MdQ4z;lg(6f4wL+^7CYOFelZGV4 z#ZhoAIQX$xb#QUk)xlK|1V2C=otzY1q{ROvg%&X$9QWhhy~o`H!R`};+aiL z=e$oGW<^OMJ|~_q=z_$LT$f#b<6Lmq&ojeDIyFxmCKd{9EVnT$8Y=NLaYRuy%J*kn zRyc2QR?Ah^yeEHQD5tF~bDic05?I6%MCwRJ6(y8mAxf)8iis5M$36VRj$b5~Os*0b zITlcX3d!+<|H1EW&HU7)n-q!zoiDciF$M&8fkw@?zmILZaRLOMfh(=$uhfCrPtt2G zEpi0(Zvz+CElu77E_Z;TCtWfmM+(sN=kvh(8GTb07`z3#*WBKk`#607($rP*1~@nb z#tW3a?(y!f_TK(I)9mjDob__Id?$1E00006VoOIv0RI4!04a{Z;x+&P010qNS#tmY zE+YT{E+YYWr9XB6000McNliru<_jJXIyBNIpa}o~02y>eSad^gZEa<4bO1wgWnpw> zWFU8GbZ8()Nlj2!fese{00L=AL_t(&-tCz?a>F1HhSwUdlEMdZs~jPd1LQOw*FJ-2 zQ^i%1NuR=pQ3?l#;AJ0ZLCQos^o#N4S`hrvz3Qhf^&@n_#?P)SUwmr@?9fg4Y} zo8uf}DMsn56zHVWG%8!+%CvR4`dC>UcWOh)oVUi1B~cZ3e%^86SbQxlr^+;Sx%yfu zh~bBih31D(njeTfSaSqN=^q!;VRfZ#W966^b1PunZ(-P-*(gDiSmpZQG)ti60Sm*KAN;1gw_*5eavDRufHtE}!j?%Ew@M%hdLbW}m zUzALxQG;cS?X+Ga0hse5uCB(TvBPo=80@7%i3D+NcAVC>&|t3Z5@;pShIWOBUhale j`E)qKYWCKxaO>I^hWn2=)p-5#00000NkvXXu0mjf%$^Td literal 0 HcmV?d00001 From a9d05dc30e957c88d69da50de5332bf55bc8feb2 Mon Sep 17 00:00:00 2001 From: vincent Date: Thu, 1 Dec 2022 22:51:00 +0100 Subject: [PATCH 09/10] Comment publier. Un peu de refonte du _index.md du dossier web aussi. --- content/prise_en_main/web/_index.md | 38 +------ .../prise_en_main/web/publier-le-contenu.md | 45 -------- .../web/publier-le-contenu/_index.md | 32 ++++++ .../web/publier-le-contenu/_index.md~ | 16 +++ .../web/publier-le-contenu/aws-cli.md | 55 ++++++++++ .../web/publier-le-contenu/aws-cli.md~ | 71 ++++++++++++ .../web/publier-le-contenu/rclone.md | 102 ++++++++++++++++++ .../rclone.md~} | 0 .../web/publier-le-contenu/winscp.md | 60 +++++++++++ .../winscp.md~} | 0 10 files changed, 338 insertions(+), 81 deletions(-) delete mode 100644 content/prise_en_main/web/publier-le-contenu.md create mode 100644 content/prise_en_main/web/publier-le-contenu/_index.md create mode 100644 content/prise_en_main/web/publier-le-contenu/_index.md~ create mode 100644 content/prise_en_main/web/publier-le-contenu/aws-cli.md create mode 100644 content/prise_en_main/web/publier-le-contenu/aws-cli.md~ create mode 100644 content/prise_en_main/web/publier-le-contenu/rclone.md rename content/prise_en_main/web/{rclone.md => publier-le-contenu/rclone.md~} (100%) create mode 100644 content/prise_en_main/web/publier-le-contenu/winscp.md rename content/prise_en_main/web/{winscp.md => publier-le-contenu/winscp.md~} (100%) diff --git a/content/prise_en_main/web/_index.md b/content/prise_en_main/web/_index.md index cd026d7..7849a00 100644 --- a/content/prise_en_main/web/_index.md +++ b/content/prise_en_main/web/_index.md @@ -10,7 +10,7 @@ Vous en avez marre de faire toute votre communication associative via Facebook ? 2. [Initialiser votre accès](./initialiser-votre-acces) 3. [Mettre en place le DNS](./mettre-place-dns) 4. [Créer du contenu](./créer-du-contenu/) -5. [Publier le contenu](./publier-le-contenu) +5. [Publier le contenu](./publier-le-contenu/) # Ils nous font confiance pour leur site web @@ -20,38 +20,4 @@ Vous en avez marre de faire toute votre communication associative via Facebook ? - [quentin.dufour.io](https://quentin.dufour.io) - *Portfolio et blog d'un ingénieur en informatique* - [erwan.dufour.io](https://erwan.dufour.io) - *Portfolio et blog d'un passionné d'électronique* - [rfid.deuxfleurs.fr](https://rfid.deuxfleurs.fr) - *Rencontres Francophones de l'Infonuagique Décentralisé* - - - - - - - - - - - - -# Sites statiques - -Nous fournissons un système d'hébergement de site statique, c'est à dire de HTML, CSS et Javascript. -Il n'est pas possible d'utiliser du PHP ou Wordpress car ces derniers utilisent trop de ressources et ne sont pas compatibles avec nos choix techniques. - -Si vous ne savez pas quels outils utiliser pour la création de votre site statique, nous vous proposons la sélection suivante : - - [Publii](https://getpublii.com/) - si vous êtes seul·e à gérer votre site web - - NetlifyCMS (à venir) - pour publier à plusieurs - - [Hugo](https://gohugo.io/) (avancé) - Avec un générateur de site statique - - [VSCodium](https://vscodium.com/) (avancé) - [Apprenez à créer votre site web avec HTML5 et CSS3](https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3) sur OpenClassrooms - -# Mise en ligne - -Si vous avez déjà votre site web statique, voici notre suggestion d'outils pour le mettre en ligne : - - - [WinSCP](./winscp) (Windows seulement, niveau facile) - - [Rclone Browser](./rclone) (Linux, macOS et Windows, niveau moyen) - - (à venir) notre propre outils - - (à venir, avancé) drone + git - - (à venir, avancé) awscli - - - + - [giraud.eu](https://giraud.eu) - *Site d'un ingénieur en informatique* diff --git a/content/prise_en_main/web/publier-le-contenu.md b/content/prise_en_main/web/publier-le-contenu.md deleted file mode 100644 index 917eacb..0000000 --- a/content/prise_en_main/web/publier-le-contenu.md +++ /dev/null @@ -1,45 +0,0 @@ -+++ -title = "Publier le contenu" -description = "Comment mettre en ligne son contenu" -date = 2022-09-01 -weight = 0 -[extra] -weight_custom = 5 -+++ - -parler du .awsrc - - -### Configurer la page par défaut et celle pour les erreurs -Puisqu'on est sur la configuration S3, profitons-en pour paramétrer une page d'accueil et une page d'erreur. En effet, les URL qu'on utilise pour naviguer sur votre site correspondront à la hiérarchie de fichiers présents sur Garage. Si on visite `https://votre-site.fr/blog/recette-de-gateau.html`, Garage va simplement servir le fichier `blog/recette-de-gateau.html`, en partant de la racine du bucket. Mais que ce passe-t-il si on demande à voir `https://votre-site.fr/blog/` ? Garage ne peut pas retourner un dossier; et de toute façon cela ne fonctionnerait pas, puisqu'un dossier n'a pas données propre à lui-même, il ne fait que contenir des fichiers distincts en son sein. On voit pourtant souvent ce genre d'URL en ligne. En fait, les serveurs web sont configurés pour que si aucun fichier du dossier n'est spécifié, alors on va utiliser celui avec un nom paramétré à l'avance. C'est de ça dont on parle. -De même, lorsque quelqu'un demande une page qui n'existe pas, que peut faire Garage ? Dans la même logique, on va lui donner un nom de fichier à servir par défaut si jamais cela arrive. - - - -aws s3 website giraud.eu --index-document index.html --error-document erreur.html - -ou - -aws s3api put-bucket-website --bucket --website-configuration ' -{ - "ErrorDocument": { - "Key": "/errors/4xx.html" - }, - "IndexDocument": { - "Suffix": "index.html" - } -} -' - - - - - -Fécilicitations ! Vous avez désormais votre propre site web accessible publiquement en ligne ! -Vous pouvez rajouter dessus le badge attestant fièrement son hébergement sur Garage: - -[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) -[![Badge indiquant qu'un site est hébergé sur Garage en anglais](/img/garage_en.png)](https://garagehq.deuxfleurs.fr/) -``` -Badge indiquant que ce site est propulsé par le logiciel Garage -``` diff --git a/content/prise_en_main/web/publier-le-contenu/_index.md b/content/prise_en_main/web/publier-le-contenu/_index.md new file mode 100644 index 0000000..bffea49 --- /dev/null +++ b/content/prise_en_main/web/publier-le-contenu/_index.md @@ -0,0 +1,32 @@ ++++ +title = "Publier le contenu" +description = "Comment mettre en ligne son contenu" +date = 2022-09-01 +weight = 0 +sort_by = "weight" +[extra] +weight_custom = 5 ++++ + +Nous allons désormais verser votre site sur Garage, et ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)». + +Vous avez le choix entre trois méthodes : +* [Faire ça en ligne de commande avec `aws-cli`](aws-cli/). C'est la méthode la plus habituelle et la plus éprouvée, cependant il faut utiliser le terminal, et être sur linux est grandement conseillé pour celle-ci. +* [Faire ça avec l'utilitaire graphique `rclone`](rclone/). Cette méthode vous paraîtra peut-être moins intimidante grâce à l'interface graphique du logiciel rclone. Celui-ci tourne sur Linux, Windows, et MacOS. +* [Faire ça avec l'utilitaire graphique `winscp`](winscp/). Cette méthode propose elle également une interface graphique, mais ne fonctionne que sur Windows. + +### Bravo ! +Une fois l'un de ces trois guides suivi, vous aurez désormais votre propre site web accessible publiquement en ligne ! +Vous pouvez rajouter dessus le badge attestant fièrement son hébergement sur Garage: + +[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) +[![Badge indiquant qu'un site est hébergé sur Garage en anglais](/img/garage_en.png)](https://garagehq.deuxfleurs.fr/) + +En HTML: +``` +Badge indiquant que ce site est propulsé par le logiciel Garage +``` +En Markdown: +``` +[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) +``` diff --git a/content/prise_en_main/web/publier-le-contenu/_index.md~ b/content/prise_en_main/web/publier-le-contenu/_index.md~ new file mode 100644 index 0000000..442cd27 --- /dev/null +++ b/content/prise_en_main/web/publier-le-contenu/_index.md~ @@ -0,0 +1,16 @@ ++++ +title = "Publier le contenu" +description = "Comment mettre en ligne son contenu" +date = 2022-09-01 +weight = 0 +sort_by = "weight" +[extra] +weight_custom = 5 ++++ + +Nous allons désormais verser votre site sur Garage, et ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)». + +Vous avez le choix entre trois méthodes : +* [Faire ça en ligne de commande avec `aws-cli`](../aws-cli/). C'est la méthode la plus habituelle et la plus éprouvée, cependant il faut utiliser le terminal, et être sur linux est grandement conseillé pour celle-ci. +* [Faire ça avec l'utilitaire graphique `rclone`](../rclone/). Cette méthode vous paraîtra peut-être moins intimidante grâce à l'interface graphique du logiciel rclone. Celui-ci tourne sur Linux, Windows, et MacOS. +* [Faire ça avec l'utilitaire graphique `winscp`](../winscp/). Cette méthode propose elle également une interface graphique, mais ne fonctionne que sur Windows. diff --git a/content/prise_en_main/web/publier-le-contenu/aws-cli.md b/content/prise_en_main/web/publier-le-contenu/aws-cli.md new file mode 100644 index 0000000..9316d33 --- /dev/null +++ b/content/prise_en_main/web/publier-le-contenu/aws-cli.md @@ -0,0 +1,55 @@ ++++ +title = "aws-cli" +description = "Publier avec aws-cli" +date = 2022-09-01 +weight = 1 ++++ + +Nous allons désormais verser votre site sur Garage, ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)». + +### Paramétrer votre accès localement +Pour verser votre site sur Garage, nous allons utiliser l'outil de base pour faire des commandes S3 : [aws-cli](https://github.com/aws/aws-cli) et son binaire, `aws`. À chaque fois, il aura besoin de savoir : +* l'identifiant de votre clé d'accès +* votre clé d'accès secrète +* la région et l'URL de l'infrastructure Garage qui hébergera votre site + +En temps normal, il faudrait préciser ces paramètres à chaque fois (donc toutes les fois que vous voulez mettre quelque chose sur votre site, ou le modifier). Pour éviter ça, on va stocker ces informations dans un fichier ; il suffira de l'invoquer avant de faire ses modifications. Dans votre répertoire personnel, créez un fichier nommé par exemple `.awsrc`. À l'intérieur, mettez le contenu suivant : +``` +export AWS_ACCESS_KEY_ID={votre identifiant de clé d'accès} +export AWS_SECRET_ACCESS_KEY={votre clé d'accès privée} +export AWS_DEFAULT_REGION='garage' + +function aws { command aws --endpoint-url https://garage.deuxfleurs.fr $@ ; } +aws --version +``` +Il vous faut bien entendu insérer vos deux clés aux endroits spécifiés. Une fois ceci fait, dans le futur, avant d'utiliser `aws`, il vous faudra faire `source ~/.awsrc`, et cela mettra en place tous les paramètres pour vous. Vous serez automatiquement authentifié et vous parlerez à la bonne infrastructure Garage. + +### Configurer la page par défaut et celle pour les erreurs +Puisqu'on est sur la configuration S3, profitons-en pour paramétrer une page d'accueil et une page d'erreur. En effet, les URL qu'on utilise pour naviguer sur votre site correspondront à la hiérarchie de fichiers présents sur Garage. Si on visite `https://votre-site.fr/blog/recette-de-gateau.html`, Garage va simplement servir le fichier `blog/recette-de-gateau.html`, en partant de la racine du bucket. Mais que ce passe-t-il si on demande à voir `https://votre-site.fr/blog/` ? Garage ne peut pas retourner un dossier; et de toute façon cela ne fonctionnerait pas, puisqu'un dossier n'a pas données propre à lui-même, il ne fait que contenir des fichiers distincts en son sein. On voit pourtant souvent ce genre d'URL en ligne. En fait, les serveurs web sont configurés pour que si aucun fichier du dossier n'est spécifié, alors on va utiliser celui avec un nom paramétré à l'avance. C'est de ça dont on parle. +De même, lorsque quelqu'un demande une page qui n'existe pas, que peut faire Garage ? Dans la même logique, on va lui donner un nom de fichier à servir par défaut si jamais cela arrive. + +Après avoir fait votre `source ~/.awsrc`, faites : +``` +aws s3 website exemple-un.fr --index-document index.html --error-document erreur.html +``` +si votre `aws` est en version 2.x, ou +``` +aws s3api put-bucket-website --bucket exemple-un.fr --website-configuration ' +{ + "ErrorDocument": { + "Key": "/errors/4xx.html" + }, + "IndexDocument": { + "Suffix": "index.html" + } +} +' +``` +s'il est en version 1.x . Pensez à remplacer `exemple-un.fr` par votre nom de domaine à vous ! + +### Publier +On y est ! Avec un terminal, positionnez-vous dans le répertoire qui reflète ce que vous voulez mettre en ligne. Celui-ci devrait contenir des fichiers en `.html`, `.css`, ou `.js`, mais pas de `.md`. Si vous ne l'avez pas fait, faites `source ~/.awsrc`, et lancez ensuite : +``` +aws s3 sync . s3://exemple-un.fr +``` +si vous avez `aws` en version 2. N'oubliez pas de mettre votre nom de domaine à la place d'`exemple-un.fr`. Vos fichiers devrait être téléversés. Une fois le processus fini, vous devriez pouvoir ouvrir un navigateur internet tel que Firefox par exemple, tapez votre nom de domaine dans la barre URL, et naviguer sur votre site. En cas de pépin, essayez d'actualiser la page en faisant `ctrl`+`shift`+`r` avec votre clavier, ça vous garantira que votre navigateur récupère le vrai contenu en ligne au lieu de piocher dans le cache local sur votre ordinateur. diff --git a/content/prise_en_main/web/publier-le-contenu/aws-cli.md~ b/content/prise_en_main/web/publier-le-contenu/aws-cli.md~ new file mode 100644 index 0000000..ba74e8c --- /dev/null +++ b/content/prise_en_main/web/publier-le-contenu/aws-cli.md~ @@ -0,0 +1,71 @@ ++++ +title = "aws-cli" +description = "Publier avec aws-cli" +date = 2022-09-01 +weight = 1 ++++ + +Nous allons désormais verser votre site sur Garage, ce dernier le servira à toutes les personnes qui voudront le voir. Vous aurez besoin de l'identifiant de votre clé d'accès et de la clé d'accès secrète, obtenus dans la partie «[Initialiser votre accès](../initialiser-votre-acces/)». + +### Paramétrer votre accès localement +Pour verser votre site sur Garage, nous allons utiliser l'outil de base pour faire des commandes S3 : [aws-cli](https://github.com/aws/aws-cli) et son binaire, `aws`. À chaque fois, il aura besoin de savoir : +* l'identifiant de votre clé d'accès +* votre clé d'accès secrète +* la région et l'URL de l'infrastructure Garage qui hébergera votre site + +En temps normal, il faudrait préciser ces paramètres à chaque fois (donc toutes les fois que vous voulez mettre quelque chose sur votre site, ou le modifier). Pour éviter ça, on va stocker ces informations dans un fichier ; il suffira de l'invoquer avant de faire ses modifications. Dans votre répertoire personnel, créez un fichier nommé par exemple `.awsrc`. À l'intérieur, mettez le contenu suivant : +``` +export AWS_ACCESS_KEY_ID={votre identifiant de clé d'accès} +export AWS_SECRET_ACCESS_KEY={votre clé d'accès privée} +export AWS_DEFAULT_REGION='garage' + +function aws { command aws --endpoint-url https://garage.deuxfleurs.fr $@ ; } +aws --version +``` +Il vous faut bien entendu insérer vos deux clés aux endroits spécifiés. Une fois ceci fait, dans le futur, avant d'utiliser `aws`, il vous faudra faire `source ~/.awsrc`, et cela mettra en place tous les paramètres pour vous. Vous serez automatiquement authentifié et vous parlerez à la bonne infrastructure Garage. + +### Configurer la page par défaut et celle pour les erreurs +Puisqu'on est sur la configuration S3, profitons-en pour paramétrer une page d'accueil et une page d'erreur. En effet, les URL qu'on utilise pour naviguer sur votre site correspondront à la hiérarchie de fichiers présents sur Garage. Si on visite `https://votre-site.fr/blog/recette-de-gateau.html`, Garage va simplement servir le fichier `blog/recette-de-gateau.html`, en partant de la racine du bucket. Mais que ce passe-t-il si on demande à voir `https://votre-site.fr/blog/` ? Garage ne peut pas retourner un dossier; et de toute façon cela ne fonctionnerait pas, puisqu'un dossier n'a pas données propre à lui-même, il ne fait que contenir des fichiers distincts en son sein. On voit pourtant souvent ce genre d'URL en ligne. En fait, les serveurs web sont configurés pour que si aucun fichier du dossier n'est spécifié, alors on va utiliser celui avec un nom paramétré à l'avance. C'est de ça dont on parle. +De même, lorsque quelqu'un demande une page qui n'existe pas, que peut faire Garage ? Dans la même logique, on va lui donner un nom de fichier à servir par défaut si jamais cela arrive. + +Après avoir fait votre `source ~/.awsrc`, faites : +``` +aws s3 website exemple-un.fr --index-document index.html --error-document erreur.html +``` +si votre `aws` est en version 2.x, ou +``` +aws s3api put-bucket-website --bucket exemple-un.fr --website-configuration ' +{ + "ErrorDocument": { + "Key": "/errors/4xx.html" + }, + "IndexDocument": { + "Suffix": "index.html" + } +} +' +``` +s'il est en version 1.x . Pensez à remplacer `exemple-un.fr` par votre nom de domaine à vous ! + +### Publier +On y est ! Avec un terminal, positionnez-vous dans le répertoire qui reflète ce que vous voulez mettre en ligne. Celui-ci devrait contenir des fichiers en `.html`, `.css`, ou `.js`, mais pas de `.md`. Si vous ne l'avez pas fait, faites `source ~/.awsrc`, et lancez ensuite : +``` +aws s3 sync . s3://exemple-un.fr +``` +si vous avez `aws` en version 2. N'oubliez pas de mettre votre nom de domaine à la place d'`exemple-un.fr`. Vos fichiers devrait être téléversés. Une fois le processus fini, vous devriez pouvoir ouvrir un navigateur internet tel que Firefox par exemple, tapez votre nom de domaine dans la barre URL, et naviguer sur votre site. En cas de pépin, essayez d'actualiser la page en faisant `ctrl`+`shift`+`r` avec votre clavier, ça vous garantira que votre navigateur récupère le vrai contenu en ligne au lieu de piocher dans le cache local sur votre ordinateur. + +### Bravo ! +Fécilicitations ! Vous avez désormais votre propre site web accessible publiquement en ligne ! +Vous pouvez rajouter dessus le badge attestant fièrement son hébergement sur Garage: + +[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) +[![Badge indiquant qu'un site est hébergé sur Garage en anglais](/img/garage_en.png)](https://garagehq.deuxfleurs.fr/) + +En HTML: +``` +Badge indiquant que ce site est propulsé par le logiciel Garage +``` +En Markdown: +``` +[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/) +``` diff --git a/content/prise_en_main/web/publier-le-contenu/rclone.md b/content/prise_en_main/web/publier-le-contenu/rclone.md new file mode 100644 index 0000000..3b82c15 --- /dev/null +++ b/content/prise_en_main/web/publier-le-contenu/rclone.md @@ -0,0 +1,102 @@ ++++ +title = "Rclone Browser" +description = "Publier avec Rclone Browser" +weight = 2 +date = 2021-11-25T14:31:35.570Z +dateCreated = 2021-11-25T14:02:30.997Z ++++ + + +Rclone browser est un outil simple qui vous permet d'accéder directement à Garage. + +# Installation + +Si vous êtes sous macOS ou Windows, vous pouvez télécharger la dernière version depuis la page [github de rclone-browser](https://github.com/kapitainsky/RcloneBrowser/releases) (descendez un peu pour voir les liens). + +Sous Ubuntu (lubuntu, kubuntu, etc.), Debian et Linux Mint, cherchez et installez "Rclone Browser" dans la logithèque ("App Store") ou lancez directement depuis un terminal : + +```bash +sudo apt-get install -y rclone-browser +``` + +--- + +Le paquet existe aussi pour d'autres distributions : + +```bash +sudo dnf install -y rclone-browser # fedora +sudo yay -S rclone-browser # arch linux +sudo nix-env -iA nixos.rclone-browser # nix os +``` + +# Premier lancement + +Avant de lancer Rclone Browser, ouvrez un éditeur de texte. +Moi j'utilise "Éditeur de texte" sous Gnome aussi connu sous le nom de `gedit`. Sous Windows il s'appelle Bloc-Note Windows (ou `notepad.exe`). + +![gedit.png](/img/rclone_gedit.png) + +Entrez le texte suivant dedans, tout en remplaçant bien les lignes 5 et 6 par vos identifiants communiqués précédemment : + +```toml +[garage] +type = s3 +provider = Other +env_auth = false +access_key_id = +secret_access_key = +region = garage +endpoint = garage.deuxfleurs.fr +bucket_acl = private +force_path_style = true +no_check_bucket = true +``` + +Maintenant enregistrez le à un endroit où vous ne le perdrez pas. Dans mon cas, j'ai choisi de le mettre dans Mon Dossier Personnel > Documents > Configuration et je l'ai appelé `rclone.conf`. + +![rclone-conf.png](/img/rclone_conf.png) + +Maintenant lancez "Rclone Browser" en cherchant l'application dans votre menu d'application + +![capture_d’écran_de_2021-11-25_14-43-03.png](/img/rclone_menu.png) + +L'application devrait se lancer : + +![rclone_init.png](/img/rclone_init.png) + +Cliquez sur "File" (Fichiers) en haut à gauche, puis sur "Preferences...". La fenêtre suivante s'ouvre : + +![rclone-conf2.png](/img/rclone_conf2.png) + +Repérez la deuxième ligne intitulée `rclone.conf location:`. Tout au bout de la ligne, cliquez sur le bouton avec les trois points `[...]`. Vous aurez alors la possibilité d'indiquer à Rclone Browser où se trouve le fichier de configuration créé juste avant (pour ma part, je rappelle, "Dossier personnel > Documents > Configuration > rclone.conf", on voit que le chemin complet vers le fichier apparait maintenant dans le champs texte. + +Appuyez sur OK, et la fenêtre principale devrait maintenant ressembler à ça : + +![rclone-s3.png](/img/rclone_s3.png) + +Cliquez sur "S3 garage" puis cliquez sur "Open". Si vous voyez des dossiers apparaitre, c'est gagné ! + +![rclone-conn.png](/img/rclone_conn.png) + +Vous pouvez maintenant naviguer dans vos dossiers, envoyer des fichiers sur Garage ou en récupérer. Attention, vous ne pouvez pas créer de "nouveaux dossiers" à la racine, mais vous pouvez créer des sous-dossiers dans les dossiers existants pré-alablement créés pour vous. + +# Utiliser comme un drive + +Ce n'est pas forcément très pratique de devoir passer par cette interface pour envoyer ou récupérer des fichiers. Ce qui serait génial, c'est que ces dossiers apparaissent sur votre ordinateur comme des dossiers normaux. + +Pour cela, sélectionnez un dossier racine, moi j'ai choisi `quentin.bibliotheque` puis cliquez sur le bouton "Mount". + +![rclone-mount.png](/img/rclone_mount.png) + +Un sélecteur de fichier s'ouvre alors. Je vais dans "Dossier Personnel > Documents", je créer un nouveau dossier que j'appelle "Distant". Je vais dedans et clique sur "Choisir" (ou Ok). + +Maintenant, quand je vais dans un explorateur de fichier, je vois les fichiers sur Garage comme si ils étaient sur mon ordinateur. + +![nautilus-distant.png](/img/rclone_nautilus.png) + +Je peux aussi accéder à ces documents depuis mon logiciel préféré, comme ici "LibreOffice Calc" : + +![capture_d’écran_de_2021-11-25_15-01-42.png](/img/rclone_calc.png) + + + diff --git a/content/prise_en_main/web/rclone.md b/content/prise_en_main/web/publier-le-contenu/rclone.md~ similarity index 100% rename from content/prise_en_main/web/rclone.md rename to content/prise_en_main/web/publier-le-contenu/rclone.md~ diff --git a/content/prise_en_main/web/publier-le-contenu/winscp.md b/content/prise_en_main/web/publier-le-contenu/winscp.md new file mode 100644 index 0000000..f88e6dd --- /dev/null +++ b/content/prise_en_main/web/publier-le-contenu/winscp.md @@ -0,0 +1,60 @@ ++++ +title = "WinSCP" +description = "Publier avec WinSCP" +weight = 3 ++++ + + +# Installation + +Commencez par télécharger l'outil [WinSCP](https://winscp.net/eng/download.php). + +![winscp_dl.png](/img/winscp_dl.png) + +Installez le logiciel. + +# Configuration + +Lancez le. La fenêtre de connexion suivante devrait apparaitre : + +![](/img/winscp_login.png) + +Vous devez : + 1. Vérifier que c'est bien "Nouveau site" qui est sélectionné + 2. Dans *protocole de fichier*, vous devez choisir *Amazon S3* + 3. Dans *nom d'hôte*, vous devez mettre `garage.deuxfleurs.fr` + 4. Dans *numéro de port*, vous devez mettre (ou plutôt laisser) `443` + 5. Dans *id de clé d'accès*, vous devez mettre l'identifiant de votre clé d'accès, exemple : `GK...` + 6. Dans *clé d'accès secrète*, vous devez mettre votre clé d'accès secrète. + 7. Maintenant, cliquez sur le bouton *Avancé*. (Cliquez bien sur le mot "Avancé" et non sur la flèche à droite). Une fenêtre s'ouvre : + +![](/img/winscp_avance.png) + + 1. Dans le menu de gauche, cliquez sur *S3* + 2. Dans la partie de droite, pour *Région par défaut*, inscrivez au clavier *garage* + 3. Toujours à droite, dans *Style URL*, choisissez *Chemin* + 4. Cliquez sur OK + +Vous voilà de retour sur la fenêtre de connexion : + +![](/img/winscp_sauvegarder.png) + + 1. Cliquez sur *Sauver* (cliquez bien sur le texte et non sur la flèche noire à droite) + +La fenêtre suivante apparait : + +![](/img/winscp_session.png) + + 1. Dans *Enregistrer la sessions sous :*, donnez un nom qui identifie bien votre site web, c'est ce qui vous permettra de l'identifier dans la liste de connexion. + 2. Pour la case *Enregistrer le mot de passe*, nous vous conseillons de la cocher sauf si vous êtes sur un ordinateur public (bibliothèque, cybercafé, etc.) ou au travail. + 3. Pour la case *Créer un raccourci sur le bureau*, nous vous conseillons de la cocher, vous pourrez alors mettre votre site en ligne en un seul clic (ou presque) depuis votre bureau. + 4. Cliquez sur OK + +Vous pouvez maintenant cliquer sur "Connexion". + +# Envoyer votre site web + +À gauche, naviguez jusqu'au dossier de votre site web. +Faites en un glisser déposer à droite à l'intérieur du dossier qui contient le nom de votre site web. + +![commander.png](/img/winscp_commander.png) diff --git a/content/prise_en_main/web/winscp.md b/content/prise_en_main/web/publier-le-contenu/winscp.md~ similarity index 100% rename from content/prise_en_main/web/winscp.md rename to content/prise_en_main/web/publier-le-contenu/winscp.md~ From fe3931b5d52b202956dafab214b9a0dab7d4b884 Mon Sep 17 00:00:00 2001 From: vincent Date: Sat, 3 Dec 2022 12:58:21 +0100 Subject: [PATCH 10/10] =?UTF-8?q?Am=C3=A9lioration=20dernier=20paragraphe?= =?UTF-8?q?=20web=20statique=20suites=20aux=20recommendations=20de=20Quent?= =?UTF-8?q?in?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/prise_en_main/web/statique-comment-ça.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/prise_en_main/web/statique-comment-ça.md b/content/prise_en_main/web/statique-comment-ça.md index ad53506..29c363d 100644 --- a/content/prise_en_main/web/statique-comment-ça.md +++ b/content/prise_en_main/web/statique-comment-ça.md @@ -11,4 +11,6 @@ Au commencement du web (au début des années 90), le contenu présent en ligne Avec Javascript, qui date de la même époque, une confusion se pose souvent : beaucoup de contenus statiques passent pour du dynamique aux yeux de l'internaute. Il faut alors rappeler une distinction importante : le code Javascript livré avec un site s'exécute côté client, c'est-à-dire sur l'ordinateur ou le téléphone de l'internaute. À contrario, le CGI ou PHP s'exécute côté serveur, c'est-à-dire sur la machine administrée par le propriétaire du site. Selon ce qu'on veut faire, il faut choisir l'un ou l'autre. -Je gère une boutique en ligne, et je veux que le stock de mes produits s'affiche quand un client consulte mon site ? Il faut faire ça côté serveur, car seul lui connaît les stocks. Je veux mettre en place des décors interactifs avec la souris ? Il faut faire ça côté client, car seul lui connaît la position du curseur. Là où le bât blesse, c'est que certaines choses peuvent être faites des deux côtés, par exemple afficher l'heure sur une page. Bref, pour faire simple, une page statique peut proposer des interactions et des effets quelconques, voir servir un jeu vidéo entier. Le point important est que, du point de vue du serveur web, pour chaque personne qui demande un même URL, il sert exactement le même contenu, même si c'est éventuellement du code qui sera exécuté. \ No newline at end of file +Quelques exemples pour comprendre cette dichotomie : je gère une boutique en ligne, et je veux que le stock de mes produits s'affiche quand un client consulte mon site ? Il faut faire ça côté serveur, car seul lui connaît les stocks. Je veux mettre en place des décors interactifs avec la souris ? Il faut faire ça côté client, car seul lui connaît la position du curseur. Là où le bât blesse, c'est que certaines choses peuvent être faites des deux côtés, par exemple afficher l'heure sur une page. + +En conclusion, une page statique peut proposer des interactions et des effets quelconques, et même se comporter comme une application, car l'interactivité est gérée uniquement par votre ordinateur. Dans ce modèle, par contre, le serveur web se contente simplement de vous envoyer les données que vous lui demandez, sans exécuter de logique complexe.