Deuxfleurs/guide.deuxfleurs.fr
23
4
Fork 10
Code Issues 4 Pull requests 3 Projects Releases Wiki Activity

Fusion de la branche 'guide-web-statique'

Browse source
This commit is contained in:
vincent 2022-12-10 12:22:14 +01:00
commit 2022a423dd
18 changed files with 540 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
content/prise_en_main/web/_index.md
View file

@ -4,40 +4,13 @@ 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 !
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 !
# 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
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
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
@ -47,4 +20,4 @@ Si vous avez déjà votre site web statique, voici notre suggestion d'outils pou
- [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é*
- [giraud.eu](https://giraud.eu) - *Site d'un ingénieur en informatique*

13
content/prise_en_main/web/créer-du-contenu/_index.md Normal file
View file

@ -0,0 +1,13 @@
+++
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
+++
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/).

48
content/prise_en_main/web/créer-du-contenu/avec-un-générateur.md Normal file
View file

@ -0,0 +1,48 @@
+++
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
+++
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/) !

39
content/prise_en_main/web/créer-du-contenu/à-la-main.md Normal file
View file

@ -0,0 +1,39 @@
+++
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 :
```
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon site</title>
</head>
<body>
<p>Bonjour; bienvenue sur mon site !</p>
</body>
</html>
```
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 `<head>`, la formule suivante : `<link rel="stylesheet" type="text/css" href="style.css">` (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).
Une fois que vous avez tous vos fichiers `.html` et `.css` réunis, [vous pouvez passer à la publication](../../publier-le-contenu/) !

40
content/prise_en_main/web/dns.md
View file

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

34
content/prise_en_main/web/initialiser-votre-accès.md Normal file
View file

@ -0,0 +1,34 @@
+++
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.
# 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/).

38
content/prise_en_main/web/mettre-place-DNS.md Normal file
View file

@ -0,0 +1,38 @@
+++
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.
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)
Maintenant que votre configuration DNS est réglée, vous pouvez [préparer votre contenu](../créer-du-contenu/) !

32
content/prise_en_main/web/publier-le-contenu/_index.md Normal file
View file

@ -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:
```
<a href="https://garagehq.deuxfleurs.fr/"><img src="garage_fr.png" alt="Badge indiquant que ce site est propulsé par le logiciel Garage" title="Site propulsé par Garage"></a>
```
En Markdown:
```
[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/)
```

16
content/prise_en_main/web/publier-le-contenu/_index.md~ Normal file
View file

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

55
content/prise_en_main/web/publier-le-contenu/aws-cli.md Normal file
View file

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

71
content/prise_en_main/web/publier-le-contenu/aws-cli.md~ Normal file
View file

@ -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:
```
<a href="https://garagehq.deuxfleurs.fr/"><img src="garage_fr.png" alt="Badge indiquant que ce site est propulsé par le logiciel Garage" title="Site propulsé par Garage"></a>
```
En Markdown:
```
[![Badge indiquant qu'un site est hébergé sur Garage en français](/img/garage_fr.png)](https://garagehq.deuxfleurs.fr/)
```

6
content/prise_en_main/web/rclone.md → content/prise_en_main/web/publier-le-contenu/rclone.md
View file

@ -1,13 +1,13 @@
+++
title = "Rclone Browser"
description = "Rclone Browser"
weight = 30
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.
Rclone browser est un outil simple qui vous permet d'accéder directement à Garage.
# Installation

104
content/prise_en_main/web/publier-le-contenu/rclone.md~ Normal file
View file

@ -0,0 +1,104 @@
+++
title = "Rclone Browser"
description = "Rclone Browser"
weight = 30
date = 2021-11-25T14:31:35.570Z
dateCreated = 2021-11-25T14:02:30.997Z
[extra]
weight_custom = 15
+++
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 = <REMPLACEZ PAR VOTRE IDENTIFIANT DE CLE D'ACCESS>
secret_access_key = <REMPLACEZ PAR VOTRE CLE D'ACCES SECRETE>
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)

4
content/prise_en_main/web/winscp.md → content/prise_en_main/web/publier-le-contenu/winscp.md
View file

@ -1,7 +1,7 @@
+++
title = "WinSCP"
description = "WinSCP "
weight = 20
description = "Publier avec WinSCP"
weight = 3
+++

62
content/prise_en_main/web/publier-le-contenu/winscp.md~ Normal file
View file

@ -0,0 +1,62 @@
+++
title = "WinSCP"
description = "WinSCP "
weight = 20
[extra]
weight_custom = 10
+++
# 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)

16
content/prise_en_main/web/statique-comment-ça.md Normal file
View file

@ -0,0 +1,16 @@
+++
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.
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.
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.

BIN
static/img/garage_en.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/img/garage_fr.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB