forked from Deuxfleurs/guide.deuxfleurs.fr
Explication écriture de page à la main
This commit is contained in:
parent
d63c2cf0ac
commit
54027bc89f
4 changed files with 55 additions and 15 deletions
|
|
@ -6,4 +6,8 @@ weight = 0
|
||||||
date = 2022-09-01
|
date = 2022-09-01
|
||||||
[extra]
|
[extra]
|
||||||
weight_custom = 4
|
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/).
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
+++
|
||||||
title: Avec un générateur
|
title = "Avec un générateur"
|
||||||
description: Créer du contenu avec un générateur
|
description = "Créer du contenu avec un générateur"
|
||||||
sort_by: weight
|
sort_by = "weight"
|
||||||
date: 2022-09-01
|
date = 2022-09-01
|
||||||
weight: 2
|
weight = 2
|
||||||
---
|
+++
|
||||||
|
|
@ -1,7 +1,37 @@
|
||||||
---
|
+++
|
||||||
title: À la main
|
title = "À la main"
|
||||||
description: Créer du contenu à la main
|
description = "Créer du contenu à la main"
|
||||||
sort_by: weight
|
sort_by = "weight"
|
||||||
date: 2022-09-01
|
date = 2022-09-01
|
||||||
weight: 1
|
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).
|
||||||
|
|
@ -10,6 +10,12 @@ weight_custom = 5
|
||||||
parler du .awsrc
|
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
|
aws s3 website giraud.eu --index-document index.html --error-document erreur.html
|
||||||
|
|
||||||
ou
|
ou
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue