SSG</th>	Date</th>	Langage</th>	Langage de templating</th>	Type de site conseillé</th>	Spécificités</th></tr></thead>
Jekyll</td>	2008</td>	Ruby</td>	Liquid</td>	Blogs, pages, GitHub Pages</td>	Intégré à GitHub Pages, très grande communauté, plugins</td></tr>
Pelican</td>	2008</td>	Python</td>	Jinja2 (similaire à Liquid)</td>	Blogs, documentation</td>	Écosystème Python, plugins</td></tr>
MkDocs</td>	2012</td>	Python</td>	Jinja2 (similaire à Liquid)</td>	Documentation</td>	Conçu pour documentation, navigation automatique</td></tr>
Hugo</td>	2013</td>	Go</td>	Go templates (⚠️ pas évident si on ne connait pas le Go)</td>	Blogs, docs, sites rapides et volumineux</td>	Accent sur la rapidité de génération, nombreux thèmes</td></tr>
Cobalt</td>	2014</td>	Rust</td>	Liquid</td>	Blogs personnels</td>	Léger, simplicité, inspiré de Jekyll</td></tr>
Publii</td>	2016</td>	Electron (JavaScript)</td>	Handlebars, Mustache</td>	Blogs, sites, utilisateurs non-techniques</td>	Application desktop, orienté utilisateurs non développeurs</td></tr>
Eleventy (11ty)</td>	2018</td>	JavaScript (Node.js)</td>	Nunjucks, Liquid, Handlebars, Mustache, EJS</td>	Blogs, sites marketing, projets multi-format</td>	Très flexible, multi-template, léger</td></tr>
Zola</td>	2018</td>	Rust</td>	Tera (similaire à Jinja et Liquid)</td>	Blogs, docs, sites</td>	Très rapide, binaire unique, pas de dépendances externes</td></tr> </tbody></table> Blogs et sites intéressants 2 Alype — Mon, 25 May 2026 00:00:00 +0000 Encore des blogs et des sites intéressants récoltés lors de mes vagabondages internets. Log similaire précédent : Blogs et sites intéressants</a>.</p> #</a>Cours gratuits</h2> Des cours d'informatique de l'Ecole de Recherche Graphique (ERG)</a> Du HTML, du CSS, du python, principalement. Derniers cours datant de 2021-2022.</p> </li> Présentation des cours "Studio Pratiques Algorithmiques" à l'École Nationale Supérieure d'Arts Paris-Cergy</a> Pas des cours à proprement parler mais pas mal de ressources autour des arts numériques, du web, du WebToPrint.</p> </li> Les cours de Snow</a> Des synthéses de cours sur l'informatique, la programmation, le webdev, mais aussi l'administration système et réseau.</p> </li> Ma documentation TSSR</a> Mes synthèses de cours (/ prises de note) de Technicienne Supérieure Systèmes et Réseaux. Je le mets là, on sais jamais ^^</p> </li> </ul> #</a>Blogs Tech</h2> Le carnet de Joachim</a> Un blog qui parle de tech et plein d'autres choses.</li> </ul> #</a>Neocities et retroweb</h2> Le site de Petrapixel</a> Un site magnifique, qui parle de tech mais pas que, une ode aux sites perso des années 2000-2010.</li> </ul> #</a>Ressources</h2> #</a>Web</h3> Un site web frugal</a> Méthodes et techniques pour réduire la consommation d'énergie d'un site web.</p> </li> The Website Manifesto</a> Traduction FR</a> Un manifeste de Nora Reed, expliquant pourquoi tu</strong> devrais avoir un site web.</p> </li> Creating Your Own Website</a> Un guide de création de site web de bout en bout avec le 32bit.cafe.</p> </li> Bon, tu veux te faire ton site web ?</a> Un guide pour faire son site web adressé à des personnes déjà un peu technique, par Joachim Robert.</p> </li> </ul> #</a>Fédiverse / Mastodon</h3> Un guide du Fédiverse et Mastodon</a> Un guide trouvé sur le blog de Joachim Robert.</li> </ul> Demo Page Alype — Thu, 23 Apr 2026 00:00:00 +0000 #</a>Markdown</h2> Text can be bold</strong>, italic</em>, strikethrough</del>, and ~~all at the same time</del></strong></em>.</p>~~ There should be whitespace between paragraphs1</a></sup>.</p> #</a>Heading 1</h1> #</a>Heading 2</h2> #</a>Heading 3</h3> #</a>Heading 4</h4> #</a>Heading 5</h5> #</a>Heading 6</h6> This is a normal paragraph 2</a></sup> following a header.</p> 😭😂🥺🤣❤️✨🙏😍🥰😊</p> Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</span></span></code></pre> "Original content is original only for a few seconds before getting old"</p> Rule #21 of the internet</p> </blockquote> </blockquote> Item 1</li> Item 2 Item 2.1</li> Item 2.2</li> </ul> </li> Item 3</li> Item 4</code></li> </ul> Perform step #1</li> Proceed to step #2</li> Conclude with step #3</li> </ol> Milk</li> Eggs</li> Flour</li> Coffee</li> Combustible lemons</li> </ul> </p> Mare</th> Rating</th> Additional info</th></tr></thead> Fluttershy</td> Best pone</td> Shy and adorable</td></tr> Apple Jack</td> Good pone</td> Honest and nice</td></tr> Pinkie Pie</td> Fun pone</td> Parties and ADHD</td></tr> Twilight</td> Main pone</td> Neeerd</td></tr> Rainbow Dash</td> Yes</td> Looks badass</td></tr> Rarity</td> Fancy pone</td> Generous</td></tr> Derpy Hooves</td> M u f f i n s</em></td> [REDACTED]</td></tr> </tbody></table> let</span> highlight</span> =</span> true</span>;</span></span></code></pre>10</span>pre</span> mark</span> {</span></span> 12</span> display</span>:</span> block</span>;</span></span> 13</span> color</span>:</span> currentcolor</span>;</span></span> 14</span>}</span></span> 15</span>pre</span> table</span> td</span>:</span>nth-of-type</span>(</span>1</span>)</span> {</span></span> 17</span> color</span>:</span> #</span>6b6b6b</span>;</span></span> 18</span> font-style</span>:</span> italic</span>;</span></span> 19</span>}</span></span></code></pre> Useful information that users should know, even when skimming content.</p> </blockquote> Helpful advice for doing things better or more easily.</p> </blockquote> [!SUCCESS] Helpful advice for doing things better or more easily.</p> </blockquote> [!EXAMPLE] Key information users need to know to achieve their goal.</p> </blockquote> Urgent info that needs immediate user attention to avoid problems.</p> </blockquote> [!DANGER] Advises about risks or negative outcomes of certain actions.</p> </blockquote> #</a>Extra</h2> #</a>Description List (<dl></code>)</h3> <</span>dl</span>></span></span> <</span>dt</span>></span>Something</span></</span>dt</span>></span></span> <</span>dd</span>></span>And its description</span></</span>dd</span>></span></span> </</span>dl</span>></span></span></code></pre> Name</dt> Godzilla</dd> Born</dt> 1952</dd> Birthplace</dt> Japan</dd> Color</dt> Green</dd> </dl> #</a>Form Input (<input></code>)</h3> <</span>input</span> type</span>=</span>"</span>checkbox</span>"</span> /></span></span> <</span>label</span>></span>Checkbox</span></</span>label</span>></span></span></code></pre> Milk</label> </li> Eggs</label> </li> Flour</label> </li> Coffee</label> </li> Combustible lemons</label> </li> </ul> With switch</code> class:</p> <</span>input</span> class</span>=</span>"</span>switch</span>"</span> type</span>=</span>"</span>checkbox</span>"</span> /></span></span> <</span>label</span>></span>Checkbox</span></</span>label</span>></span></span></code></pre> Milk</label> </li> Eggs</label> </li> Flour</label> </li> Coffee</label> </li> Combustible lemons</label> </li> </ul> With switch</code> and big</code> classes:</p> <</span>input</span> class</span>=</span>"</span>switch big</span>"</span> type</span>=</span>"</span>checkbox</span>"</span> /></span></span> <</span>label</span>></span>Checkbox</span></</span>label</span>></span></span></code></pre> Milk</label> </li> Eggs</label> </li> Flour</label> </li> Coffee</label> </li> Combustible lemons</label> </li> </ul> With radio</code> type:</p> <</span>input</span> type</span>=</span>"</span>radio</span>"</span> name</span>=</span>"</span>test</span>"</span> /></span></span> <</span>label</span>></span>Radio</span></</span>label</span>></span></span></code></pre> Milk</label> </li> Eggs</label> </li> Flour</label> </li> Coffee</label> </li> Combustible lemons</label> </li> </ul> With color</code> type:</p> <</span>label</span>></span>Color:</span></</span>label</span>></span></span> <</span>input</span> type</span>=</span>"</span>color</span>"</span> value</span>=</span>"</span>#000000</span>"</span> /></span></span></code></pre> Color:</label> </p> Disabled:</label> </p> With range</code> type:</p> <</span>input</span> type</span>=</span>"</span>range</span>"</span> max</span>=</span>"</span>100</span>"</span> value</span>=</span>"</span>33</span>"</span>></span></span></code></pre> </small> #</a>Figure Captions (<figcaption></code>)</h3> <</span>figure</span>></span></span> -> Whatever content <-</span></span> <</span>figcaption</span>></span>Caption of content above</span></</span>figcaption</span>></span></span> </</span>figure</span>></span></span></code></pre> </p> The Office where Stanley works, it has yellow floor and beige walls</figcaption> </figure> #</a>Accordion (<details></code>)</h3> <</span>details</span>></span></span> <</span>summary</span>></span>Accordion title</span></</span>summary</span>></span></span> -> Contents here <-</span></span> </</span>details</span>></span></span></code></pre> Reveal accordion</summary> Get it? I know, it's an awful pun. </p> </details> #</a>Side Comment (<small></code>)</h3> <</span>small</span>></span>Small, cute text that doesn't catch attention.</span></</span>small</span>></span></span></code></pre> Small, cute text that doesn't catch attention.</small></p> #</a>Abbreviation (<abbr></code>)</h3> <</span>abbr</span> title</span>=</span>"</span>American Standard Code for Information Interchange</span>"</span>></span>ASCII</span></</span>abbr</span>></span></span></code></pre> The ASCII</abbr> art is awesome!</p> #</a>Aside (<aside></code>)</h3> <</span>aside</span>></span></span> </span> -> Contents here </span><</span>-</span></span> </</span>aside</span>></span></span></code></pre> Quill and a parchment</p> </aside> A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.</p> As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.</p> #</a>Keyboard Input (<kbd></code>)</h3> <</span>kbd</span>></span>⌘ Command</span></</span>kbd</span>></span>.</span></span></code></pre> To switch the keyboard layout, press ⌘ Super</kbd> + Space</kbd>.</p> #</a>Mark Text (<mark></code>)</h3> <</span>mark</span>></span>Marked text</span></</span>mark</span>></span></span></code></pre> You know what? I'm gonna say some very important</mark> stuff, so important</mark> that even bold</strong> is not enough.</p> #</a>Deleted and Inserted Text (<del></code> and <ins></code>)</h3> <</span>del</span>></span>Something deleted</span></</span>del</span>></span> <</span>ins</span>></span>Something added</span></</span>ins</span>></span></span></code></pre> Text deleted</del> Text added</ins></p> #</a>Progress Indicator (<progress></code>)</h3> <</span>progress</span>></span></</span>progress</span>></span></span> <</span>progress</span> value</span>=</span>"</span>33</span>"</span> max</span>=</span>"</span>100</span>"</span>></span></</span>progress</span>></span></span></code></pre> </progress> </progress></p> #</a>Sample Output (<samp></code>)</h3> <</span>samp</span>></span>Sample Output</span></</span>samp</span>></span></span></code></pre> Sample Output</samp></p> #</a>Inline Quotation (<q></code>)</h3> <</span>q</span>></span>Someone said something</span></</span>q</span>></span></span></code></pre> Blah blah Inline Quote</q> hmm.</p> #</a>Unarticulated Annotation (<u></code>)</h3> <</span>u</span>></span>Gmarrar mitsakes</span></</span>u</span>></span></span></code></pre> Yeet</u> the sus</u> drip while vibing</u> with the TikTok</u> fam</u> on a cap-free boomerang.</p> #</a>External Links</h3> <</span>a</span> class</span>=</span>"</span>external</span>"</span> href</span>=</span>"</span>https://example.org</span>"</span>></span>External link</span></</span>a</span>></span></span></code></pre> Link to site</a></p> #</a>Spoilers</h3> <</span>span</span> class</span>=</span>"</span>spoiler</span>"</span>></span>Some spoiler</span></</span>span</span>></span></span></code></pre> You know, Duckquill is a pretty dumb name.</span> I know, crazy.</p> With solid</code> class:</p> <</span>span</span> class</span>=</span>"</span>spoiler solid</span>"</span>></span>Some spoiler</span></</span>span</span>></span></span></code></pre> You know, Duckquill is a pretty dumb name.</span> I know, crazy.</p> #</a>Buttons Dialog</h3> <</span>div</span> class</span>=</span>"</span>buttons</span>"</span>></span></span> <</span>a</span> href</span>=</span>"</span>#top</span>"</span>></span>Go to Top</span></</span>a</span>></span></span> <</span>a</span> class</span>=</span>"</span>colored external</span>"</span> href</span>=</span>"</span>https://example.org</span>"</span>></span>Example</span></</span>a</span>></span></span> </</span>div</span>></span></span></code></pre> Go to Top</a> Example</a> </div> With centered</code> and big</code> classes:</p> <</span>div</span> class</span>=</span>"</span>buttons centered</span>"</span>></span></span> <</span>button</span> class</span>=</span>"</span>big colored</span>"</span>></span>Do Something…</span></</span>button</span>></span></span> </</span>div</span>></span></span></code></pre>

Demo Page

Alype — Thu, 23 Apr 2026 00:00:00 +0000

#</a>Markdown</h2>
Text can be bold, italic, strikethrough</del>, and all at the same time</del>.
There should be whitespace between paragraphs1</a>.

#</a>Heading 1</h1>
#</a>Heading 2</h2>
#</a>Heading 3</h3>
#</a>Heading 4</h4>
#</a>Heading 5</h5>
#</a>Heading 6</h6>
This is a normal paragraph 2</a> following a header.
😭😂🥺🤣❤️✨🙏😍🥰😊
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre> "Original content is original only for a few seconds before getting old" Rule #21 of the internet </blockquote> </blockquote> Item 1</li> Item 2 Item 2.1</li> Item 2.2</li> </ul> </li> Item 3</li> Item 4</code></li> </ul> Perform step #1</li> Proceed to step #2</li> Conclude with step #3</li> </ol> Milk</li> Eggs</li> Flour</li> Coffee</li> Combustible lemons</li> </ul> Mare</th> Rating</th> Additional info</th></tr></thead> Fluttershy</td> Best pone</td> Shy and adorable</td></tr> Apple Jack</td> Good pone</td> Honest and nice</td></tr> Pinkie Pie</td> Fun pone</td> Parties and ADHD</td></tr> Twilight</td> Main pone</td> Neeerd</td></tr> Rainbow Dash</td> Yes</td> Looks badass</td></tr> Rarity</td> Fancy pone</td> Generous</td></tr> Derpy Hooves</td> M u f f i n s</td> [REDACTED]</td></tr> </tbody></table> let highlight = true;</code></pre>10pre mark { 12 display: block; 13 color: currentcolor; 14} 15pre table td:nth-of-type(1) { 17 color: #6b6b6b; 18 font-style: italic; 19}</code></pre> Useful information that users should know, even when skimming content. </blockquote> Helpful advice for doing things better or more easily. </blockquote> [!SUCCESS] Helpful advice for doing things better or more easily. </blockquote> [!EXAMPLE] Key information users need to know to achieve their goal. </blockquote> Urgent info that needs immediate user attention to avoid problems. </blockquote> [!DANGER] Advises about risks or negative outcomes of certain actions. </blockquote> #</a>Extra</h2> #</a>Description List (<dl></code>)</h3> <dl> <dt>Something</dt> <dd>And its description</dd> </dl></code></pre> Name</dt> Godzilla</dd> Born</dt> 1952</dd> Birthplace</dt> Japan</dd> Color</dt> Green</dd> </dl> #</a>Form Input (<input></code>)</h3> <input type="checkbox" /> <label>Checkbox</label></code></pre> Milk</label> </li> Eggs</label> </li> Flour</label> </li> Coffee</label> </li> Combustible lemons</label> </li> </ul> With switch</code> class: <input class="switch" type="checkbox" /> <label>Checkbox</label></code></pre> Milk</label> </li> Eggs</label> </li> Flour</label> </li> Coffee</label> </li> Combustible lemons</label> </li> </ul> With switch</code> and big</code> classes: <input class="switch big" type="checkbox" /> <label>Checkbox</label></code></pre> Milk</label> </li> Eggs</label> </li> Flour</label> </li> Coffee</label> </li> Combustible lemons</label> </li> </ul> With radio</code> type: <input type="radio" name="test" /> <label>Radio</label></code></pre> Milk</label> </li> Eggs</label> </li> Flour</label> </li> Coffee</label> </li> Combustible lemons</label> </li> </ul> With color</code> type: <label>Color:</label> <input type="color" value="#000000" /></code></pre> Color:</label> Disabled:</label> With range</code> type: <input type="range" max="100" value="33"></code></pre> #</a>Figure Captions (<figcaption></code>)</h3> <figure> -> Whatever content <- <figcaption>Caption of content above</figcaption> </figure></code></pre> The Office where Stanley works, it has yellow floor and beige walls</figcaption> </figure> #</a>Accordion (<details></code>)</h3> <details> <summary>Accordion title</summary> -> Contents here <- </details></code></pre> Reveal accordion</summary> Get it? I know, it's an awful pun. </details> #</a>Side Comment (</code>)</h3> <small>Small, cute text that doesn't catch attention.</small></code></pre> Small, cute text that doesn't catch attention. #</a>Abbreviation (<abbr></code>)</h3> <abbr title="American Standard Code for Information Interchange">ASCII</abbr></code></pre> The ASCII</abbr> art is awesome! #</a>Aside (<aside></code>)</h3> <aside> -> Contents here <- </aside></code></pre> Quill and a parchment </aside> A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen. As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen. #</a>Keyboard Input (<kbd></code>)</h3> <kbd>⌘ Command</kbd>.</code></pre> To switch the keyboard layout, press ⌘ Super</kbd> + Space</kbd>. #</a>Mark Text (</code>)</h3> <mark>Marked text</mark></code></pre> You know what? I'm gonna say some very important stuff, so important that even bold is not enough. #</a>Deleted and Inserted Text (<del></code> and <ins></code>)</h3> <del>Something deleted</del> <ins>Something added</ins></code></pre> Text deleted</del> Text added</ins> #</a>Progress Indicator (<progress></code>)</h3> <progress></progress> <progress value="33" max="100"></progress></code></pre> </progress> </progress> #</a>Sample Output (<samp></code>)</h3> <samp>Sample Output</samp></code></pre> Sample Output</samp> #</a>Inline Quotation (<q></code>)</h3> <q>Someone said something</q></code></pre> Blah blah Inline Quote</q> hmm. #</a>Unarticulated Annotation (</code>)</h3> <u>Gmarrar mitsakes</u></code></pre> Yeet the sus drip while vibing with the TikTok fam on a cap-free boomerang. #</a>External Links</h3> <a class="external" href="https://example.org">External link</a></code></pre> Link to site</a> #</a>Spoilers</h3> <span class="spoiler">Some spoiler</span></code></pre> You know, Duckquill is a pretty dumb name. I know, crazy. With solid</code> class: <span class="spoiler solid">Some spoiler</span></code></pre> You know, Duckquill is a pretty dumb name. I know, crazy. #</a>Buttons Dialog</h3> <div class="buttons"> <a href="#top">Go to Top</a> <a class="colored external" href="https://example.org">Example</a> </div></code></pre> Go to Top</a> Example</a> </div> With centered</code> and big</code> classes: <div class="buttons centered"> <button class="big colored">Do Something…</button> </div></code></pre>

#</a>Markdown</h2>
Text can be bold</strong>, italic</em>, strikethrough</del>, and all at the same time</del></strong></em>.</p>
There should be whitespace between paragraphs1</a></sup>.</p>

Je ne suis pas une artiste

Wipe un disque de manière logicielle

Blogs et sites intéressants

#</a>Windows</h3>

Décrapifier Windows</a></li>
O&O shut-up Windows</a></li> </ul>

Alype's Wonders

Ressources pour fabriquer son site web

Blogs et sites intéressants 2

#</a>Fédiverse / Mastodon</h3>

Un guide du Fédiverse et Mastodon</a>
Un guide trouvé sur le blog de Joachim Robert.</li> </ul>

Demo Page