Les tags
Démarage avec Zola
A faire
Changement de logiciel de génération de site statique
En ce début d'année, j'ai repris mon blog, je viens de le migrer sous Zola (rust) en remplacement de Hugo (golang).
Test marmaid
Exemple de site avec zola
| Site | Source Code |
|---|---|
| vincentprouillet.com | https://github.com/Keats/vincentprouillet/ |
| blog.williamdes.eu | https://github.com/wdesportes/blog.williamdes.eu |
| Philipp Oppermann's blog | https://github.com/phil-opp/blog_os/tree/master/blog |
| seventeencups | https://github.com/17cupsofcoffee/seventeencups.net |
| j1m.net | https://gitlab.com/jwcampbell/j1mnet |
| vaporsoft.net | https://github.com/piedoom/vaporsoft |
| tuckersiemens.com | https://github.com/reillysiemens/tuckersiemens.com |
| Axiomatic Semantics | https://github.com/Libbum/AxiomaticSemantics |
| Tinkering | |
| Daniel Sockwell's codesections.com | https://gitlab.com/codesections/codesections-website |
| Jens Getreu's blog | |
| Matthias Endler | https://github.com/mre/mre.github.io |
| Michael Plotke | https://gitlab.com/bdjnk/michael |
| shaleenjain.com | https://github.com/shalzz/shalzz.github.io |
| maxdeviant.com | |
| Uwes Blog | https://codeberg.org/uwearzt/site-uwe-arzt |
| ozkriff.games | https://github.com/ozkriff/ozkriff.github.io-src |
| CodeShow by Bruno Rocha | https://github.com/codeshow/site |
| fundon.me | https://github.com/fundon/fundon.github.io |
| arewegameyet.rs | https://github.com/rust-gamedev/arewegameyet |
| klau.si | https://github.com/klausi/klau.si |
| peterlyons.com | https://github.com/focusaurus/peterlyons.com-zola |
| blog.turbo.fish | https://git.sr.ht/~jplatte/blog.turbo.fish |
| guerinpe.com | https://github.com/Grelot/blog |
| NorthCon e.V. | |
| OrgaTalk wiki | https://github.com/orgatalk/wiki |
| Der Corona-Effekt | https://github.com/orgatalk/corona-effekt |
| 146 Parks | https://github.com/scouten/146parks.blog |
| films.mlcdf.fr | https://github.com/mlcdf/films |
| Mish Ushakov | |
| castor | https://github.com/whoisYoges/website |
| mrkaran | https://github.com/mr-karan/website |
| Gijs Burghoorn | https://github.com/coastalwhite/gburghoorn.com/ |
| Peter Todorov | https://github.com/peterprototypes/peterprototypes.com |
| failsafe.monster | |
| Joshua Gawley | https://github.com/joshuagawley/joshuagawley.github.io |
| dmarcoux.com | https://github.com/dmarcoux/dmarcoux.com |
| Herman Schaaf's Blog | https://github.com/hermanschaaf/zola-blog |
| Nizzlay | https://github.com/Nizzlay/nizzlay.com |
| Lysator | https://git.lysator.liu.se/www/hemsida |
| Zola Demo Site | https://github.com/tandiljuan/zola-demo |
### Tutorial Zola
Ce tutoriel pas à pas est fait pour les personnes n'ayant jamais utilisé Zola, si vous avez déjà expérimenté ce logiciel, allez plutôt voir La documentation officielle.
Que vous aimiez le Rust et les GSS ou que vous n'ayez aucune notion sur l'un ou l'autre, si vous souhaitez réaliser un site web ou un blog, Zola est fait pour vous ! Nous allons découvrir ici les concepts fondamentaux de Zola.
GSS : Un générateur de site statique (Static Site Generator SSG) est un outil qui génère un site web statique et sécurisés.
Une fois Zola installé, nous allons créer un site avec la commande
répondons aux questions interactive comme suit afin d'initialiser le fichier de configuration config.toml :
et 10 millisecondes plus tard, nous devrions avoir un dossier avec l'architecture suivante
dans ce dossier, lançons
et consultons
[http://127.0.0.1:1111/](http://127.0.0.1:1111/) dans notre navigateur
Comme indiqué, nous pouvons installer un thème (sautez directement à la section "contenu"), ou le créer nous même.
Premier thème
Créer un thème est presque aussi facile qu'écrire un site à la main et vous permet de comprendre le fonctionnement de Zola. Si vous êtes pressés, vous pouvez également installer le thème de ce tutoriel et l'examiner. Un thème par défaut est prévu, mais n'est pas encore disponible.
Commençons par créer la page index.html dans le dossier templates
la page ouverte dans notre navigateur se rafraîchit toute seule et nous voyons apparaître notre page "hello world"
Plutôt que d'écrire le contenu du site directement dans le thème, ce qui revient à faire un site à la main sans Zola, nous allons utiliser le moteur de template pour remplir le site avec des variables.
Nom du site
Premièrement, pour pouvoir changer le nom du site facilement, ajoutons une variable dans la section [extra] du fichier config.toml
pour utiliser cette variable, remplaçons la ligne title dans notre index.html
Nous avons ainsi utilisé la variable présente dans config et lui avons appliqué un filtre, c'est à dire une fonction arbitraire.
Contenu en Markdown
Qu'il s'agisse d'écrire un site ou un blog, il est toujours bien de pouvoir gérer le contenu de manière indépendante du thème. Ici, nous écrirons du contenu en Markdown. Créons d'abord un texte d'accueil pour notre site dans un fichier _index.md dans le dossier content
et changeons le fichier `index.html` pour qu'il prenne en charge ce contenu.
La page se recharge, et nous voyons le contenu de `_index.md` affiché via le thème `index.html` ! Nous avons réalisé la séparation du thème et du contenu. Remarquons deux choses : le nom utilisé pour le fichier markdown, et le nom de la variable utilisée pour accéder aux données. Pour comprendre ceci, il nous faut expliquer la structure de contenu de Zola.
### Structure de contenu
L'architecture d'un site en Zola peut ressembler à ceci
Tous les fichiers `.md` correspondent à des "pages" sauf les fichiers `_index.md` qui sont des "sections". Ces deux objets diffèrent juste par les variables acceptées dans leur en-têt, la section au format TOML délimitée par `+++` en tête de fichier.
#### En-tête de page
Pour plus d'information, veuillez consulter [la documentation dédiée](#).
#### En-tête de section
Pour plus d'information, veuillez consulter [la documentation dédiée](#).
### Template extensible
L'intérêt d'un template est de maximiser la réutilisation de code. Découvrons comment utiliser les fonctionnalités basiques dans un exemple simple.
`index.html`
On découvre ici la balise `include` qui permet d'inclure un autre template et la balise `block` qui permet de déclarer un bloc qui sera remplacé par les templates qui dérivent de celui-ci.
`nav.html`
On découvre ici la fonction `get_url` qui permet d'obtenir l'URL d'une page dans le site, et la notation `@/fichier` qui permet de faire un lien interne vers une page du site.
`page.html`
On découvre ici la balise `extends` qui permet de dériver d'un template existant pour en remplacer un ou plusieurs blocs.
`section.html`
k