Vos données à votre portée avec Salesforce, Python, SQL, & et plus

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Qu'est-ce qu'un générateur de site statique ?

18 Aug 2020 🔖 tutoriels développement web jamstack
💬 FR ( Read this post in English )

Dans les temps anciens, pour télécharger mon site web BestKatie.com vers son serveur, j’ai composé à la main un dossier de fichiers du type .html pour servir comme des « pages » du site. Je ne veux jamais plus répéter un tel effort.

  • /katie/index.html est devenu http://www.BestKatie.com
  • /katie/bio/index.html est devenu http://www.BestKatie.com/bio
  • etc.

Voici les contenus de ces fichiers .html si délicatement écrits :

  • /katie/index.html

      <html>
  	<head>
  		<title>Home • Acceuil</title>
  	</head>
  	<body>
  		<nav><ul>
  			<li><a href="/">Home • Acceuil</a></li>
  			<li><a href="/bio">About me • Tout sur moi</a></li>
  			<li><a href="/blog">Blog</a></li>
  		</ul></nav>
  		<h1>Home • Acceuil</h1>
  		<p>Hello world • Salut le monde</p>
  	</body>
  </html>

  • /katie/bio/index.html

      <html>
  	<head>
  		<title>About me • Tout sur moi</title>
  	</head>
  	<body>
  		<nav><ul>
  			<li><a href="/">Home • Acceuil</a></li>
  			<li><a href="/bio">About me • Tout sur moi</a></li>
  			<li><a href="/blog">Blog</a></li>
  		</ul></nav>
  		<h1>About me • Tout sur moi</h1>
  		<p>My name is Katie • Je m'appelle Katie</p>
  	</body>
  </html>

  • /katie/blog/index.html

      <html>
  	<head>
  		<title>Blog</title>
  	</head>
  	<body>
  		<nav><ul>
  			<li><a href="/">Home • Acceuil</a></li>
  			<li><a href="/bio">About me • Tout sur moi</a></li>
  			<li><a href="/blog">Blog</a></li>
  		</ul></nav>
  		<h1>Blog</h1>
  		<hr/>
  		<p class="post-date"><time datetime="2020-06-02">June 2, 2020 • 2 juin 2020</time></p>
  		<p class="post-summary">I'll introduce you to static site generators • Je vous présente les générateurs de sites statiques</p>
  		<hr/>
  		<p class="post-date"><time datetime="2020-06-01">June 1, 2020 • 1 juin 2020</time></p>
  		<p class="post-summary">I'll teach you all about static web hosting • Je vous enseigne tout sur l'hébergement web statique</p>
  	</body>
  </html>

  • /katie/blog/web-hosting/index.html

      <html>
  	<head>
  		<title>What is static web hosting? • Qu'est-ce que l'hébergement web statique ?</title>
  	</head>
  	<body>
  		<nav><ul>
  			<li><a href="/">Home • Acceuil</a></li>
  			<li><a href="/bio">About me • Tout sur moi</a></li>
  			<li><a href="/blog">Blog</a></li>
  		</ul></nav>
  		<article>
  			<h1>What is static web hosting? • Qu'est-ce que l'hébergement web statique ?</h1>
  			<p class="post-date"><time datetime="2020-06-01">June 1, 2020 • 1 juin 2020</time></p>
  			<div class="summary">I'll teach you all about static web hosting • Je vous enseigne tout sur l'hébergement web statique</div>
  		</article>
  	</body>
  </html>

  • /katie/blog/static-site-generators/index.html

      <html>
  	<head>
  		<title>What is a static site generator? • Qu'est-ce qu'un générateur de site statique ?</title>
  	</head>
  	<body>
  		<nav><ul>
  			<li><a href="/">Home • Acceuil</a></li>
  			<li><a href="/bio">About me • Tout sur moi</a></li>
  			<li><a href="/blog">Blog</a></li>
  		</ul></nav>
  		<article>
  			<h1>What is a static site generator? • Qu'est-ce qu'un générateur de site statique ?</h1>
  			<p class="post-date"><time datetime="2020-06-02">June 2, 2020 • 2 juin 2020</time></p>
  			<div class="summary">I'll introduce you to static site generators • Je vous présente les générateurs de sites statiques</div>
  		</article>
  	</body>
  </html>

Oh là là. Il y a tant d’éléments répétés entre les contenus des fichiers:

  • <html> ... </html>
  • <title> ... </title>
  • <nav> ... </nav>

Et s’il était possible d’être paresseuse ?

Imaginez un dossier « katie_important » rempli des fichiers suivants :

  • /katie_important/index.txt

      - title : Home • Acceuil
  - message : Hello world • Salut le monde

  • /katie_important/bio.txt

      - title : About me • Tout sur moi
  - message : My name is Katie • Je m'appelle Katie

  • /katie_important/blog/2020-06-01-web-hosting.txt

      - title : What is static web hosting? • Qu'est-ce que l'hébergement web statique ?
  - answer : I'll teach you all about static web hosting • Je vous enseigne tout sur l'hébergement web statique
  - published : 2020-06-01 15:00

  • /katie_important/blog/2020-06-02-static-site-generators.txt

      - title : What is a static site generator? • Qu'est-ce qu'un générateur de site statique ?
  - answer : I'll introduce you to static site generators • Je vous présente les générateurs de sites statiques
  - published : 2020-06-02 15:00

Imaginez un logiciel qui pourrait transformer automatiquement les contenus du dossier /katie_important en collection de dossiers et de fichiers adaptée au dossier /katie/.

Incroyable !

Mais croyez-en. Ce genre de logiciel s’appelle un générateur de site statique (« SSG » en anglais).

  • Chaque SSG me demande de structurer et de formatter les fichiers et les dossiers de katie_important selon ses propres règles.
  • Chaque SSG me demande de l’éxpliquer comment transformer katie_important en katie selon les règles d’un langage de modélisation ou un autre (« templating language » en anglais).

Je me sers d’un SSG pour écrire KatieKodes.com.

Quelques SSG très connus :

Profitez-en !

--- ---