This blog runs with Rust made static site generator Zola
As official documentation, is less than limited, I had to read several 3rd party docs to undederstand how to use it.
Update 2025-01-03, after few months of usage:
Zola use tera language for template and TOML for configuration files. So it's easy to understand for Ansible users or Python developers as example.
Function can be put in a specific kind of templates called shortcode, it can then be called in article or templates with {{ name((id) }}, where name is the name(.html/.md) of the file that contains the shortcode function template itself. The official documentation is nice on ths part.
For templates, Zola use Tera languages, about the same used in jinja2 files of Ansible.
Table of Content
Tutorials I used for basic creation
- Create skeleton, is missing in the 1st Template, as said after the safe filter:
{{ page.content | safe }}. - How to use tags, doesn't work totally for now, need to figure why for.
- Shortcode instead is relatively well documented in official documentation, and in Wordpress specs
- Syntax Highlight language and themes
Files Tree
the css, medias, etc, must be in the static directory, that is at the same level than public and content. ex:
.
├── config.toml
├── content
│ ├── about.md
│ ├── [...]
│ └── Using_Zola.md
├── public
│ [...]
├── sass
├── static
│ ├── css
│ │ └── general.css
│ └── medias
│ └── 2024-09
│ └── Zerkalo_vremeni-QBert.jpg
├── templates
│ ├── base.html
│ ├── blog.html
│ ├── blog-page.html
│ ├── index.html
│ ├── shortcodes
│ ├── tags.html
│ └── tags-page.html
├── highlight_themes (optional)
└── themes
And in the html template:
<link href="/css/general.css" rel="stylesheet" type="text/css">
In the html page itself:
For videos, use directly html tags:
<video src="/medias/2024/09/....mp4" width="320" height="200" alt="my video>
Reading mode
(2025-02-03 Update).
The ability to use "Reading mode" in browsers depends on the availability of some HTML5 elements.
The HTML5 <article> element (Mozilla doc) is a semantic tag, that allows to describe to browser or reader, among other functions, which part of the page to be used in reading mode.
So simply border, in your template, the page.content by the article tag, will do the work:
<article>
{{ page.content | safe }}
</article>
The HTML5 <nav> element is used adound links secions like a table of content.
- Reading mode on HTML5 pages
- blog nice microfeatures
- About accessibility:
- How to Meet WCAG (Quick Reference) by W3C A customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements (success criteria) and techniques.
- Best practices for inclusive textual websites
Adding Fediverse (Mastodon) publication and comments
(Update february 2024, copy of a post I made from my #snac (so Fediverse) instance.
Posting from static site generator (#SSG) on the #fediverse (I would say, like #Mastodon for the beginners), and still get #comments:
- Proposed first time and implemented for #Hugo (Go language SSG) in december 2020 by Carl Schwan
- Get improvements by other authors like this Hugo solution by Paul Kinlan in 2022
- another for Hugo by in december 2022
- On Hugo by Veronica Berglyd Olsen in march 2023
- On general static site, by Maho Pacheco in february 2024
- An improved solution for #Zola (Rust language SSG) has been proposed by Frederik Banning in January 2024.
(All these URL have been saved on both https://archive.org/ and https://archive.is/ )
It's now (february 2024) discussed on Zola sgg Github tracker.
alternatives
Python language
- An interesting alternative to Zola is MkDocs (Python language) maybe more documentation oriented
- Another famous static site generator (SSG) is Pelican (Python language) more general