2025-04-11
How this page came to be and how it runs (2)
The content is organized in a Zola project. I used the default template with sass, but made up my own design. Zolas main concepts for orchestrating content are templates, pages and sections. A section is a category of pages. Both use Tera templates to render Markdown files to HTML.
|-content/
|-sass/
|-static/
|-templates/
|-config.toml
The templates folder defines the structure of each page. Files within it are used by Zola to generate the final output. Everything relies on a base.html which defines the most basic styles, preloads and encoding. Both plog posts and project showcases have a template as well, in which they extend the base template and define further stylesheets. For the sake of completeness I also decided to create archive pages, just in case I ever got around to writing more posts than could be displayed on the main page.
The main page was also the part I had the most struggle with. Initially I settled for a banner of the domain name with a nice photo background, followed by a small "About Me" section. It also includes two lists of the most recent blog posts and project showcases. Zola provides a convenient way to access these sections from within a template and get a list of pages from that section.
{% set blog_section = get_section(path="blog/_index.md") %}
{% for page in blog_section.pages | slice(end=5) %}
<!-- HTML goes here -->
{% endfor %}
I initially got pretty harsh feedback for the lack of originality of the design. My partner eventually got so invested in this flaw, that they drew some artwork I could use to replace it. And so the theme of cats was born.
Alongside the the templates, Zola provides a SASS compiler, enhancing the styling experience greatly. The two features of SASS I made use of the most were improved variable support, so one can define color values centrally and use them through the entire codebase and improved media queries. Those queries can even be used inline greatly improving readability.
By far the most complicated part of the styling was getting the main page just right. The scaling of the picture turned out to be way harder than expected, especially since some browsers decide to blatantly ignore the standards. Comparaed to that, the adaptive category split turned out to be quite simple.
Due to some security configurations I had to set some special options for Zola, but I won't go into detail about those now. Apart from them, it was remarkably easy.
= "https://blackfur.gay"
= true
= false
= true
[]
= true
base_url, compile_sass and highlight_code are all necessary for the page to function as I want it. build_search_index and m̀inify_html are simply a bit of time and space optimization.
There are two content categories I plan to create. A somewhat regular blog for whatever I am up to and a category for project summaries. Both have their own folder in the mentioned content directory and an _index.md file, that serves to configure those categories.
+++
title = "Blog Archive"
sort_by = "date"
template = "blog.html"
page_template = "blog-page.html"
+++
All of those settings are pretty self explanatory. Setting the name of the section and the templates to use for it. At this point it is just a matter of placing a markdown file next to the index and it will be rendered to HTML and appear on the front page.
So now I got a fully configured Zola setup and an easy way to publish new content.