The big SSG switch (and other things)

Apologies in advance for filling the feed with old posts, it was a side effect of changing feeds!

I already spoke about how I was sold on Zola as my SSG of choice. For the past month or so I have been switching SSG from Eleventy. It's been a slow process not much because of the difficulties, but mostly because I had very little time to dedicate to this website recently. I won't list here the reasons for the change, because I already highlighted them in the post linked above. I will just briefly speak about the switch and all the new things that I have added to the website in the meantime.

In general, switching from 11ty to Zola was quite easy: apart from changing all YAML frontmatters to TOML, other things that needed an adjustment were stuff implemented by 11ty through plugins, e.g. image optimization, rss feed, styling markdown anchors etc. Most of these things are offered by Zola out-of-the-box, while for the image optimization I took this shortcode and adapted a little bit for my need. Other things are implemented through Zola templates, for example anchor link, atom feed, table of contents. There were other changes under the hood, but quite some time has passed and I forgot.

I have been reading a lot of other people blogs, about the small web, the indieweb, and so on. I really liked what I saw, and decided to implement some of these things and rework others.

A TLDR of the changes:

New stuff#

• New section in the homepage, with proper webrings formatting and links
• Bookmarks page
• Ideas page
• Buttons!
• Security.txt and gpg key
• Humans.txt
• Feed page and different feeds per topic, plus new style for the feed page
• Added a warning for content older than 365 days (inspired by Bacardi55 and this Zola forum post)

Other changes#

• Enlarged central column in the css grid
• Reworked the about page
• Reworked the blog list style (also in the homepage) to extend horizontally instead of vertically as it was before
• Added description for pages like blog and bookmarks.
• Blogroll is now formatted in a nicer way, description etc.
• Updated the credits to reflect Zola experience
• Refreshed tags and tag pages, inspired by Even theme and Zola Papermod themes
• Updated robots.txt to block all the AI scrapers (thanks to https://darkvisitors.com)
• Implemented catppuccin syntax higlight as custom syntax highlight theme (thanks to bat's catppuccin themes)
• A new image shortcode to replace the 11ty image plugin, adapted by the one made by Marco Neumann.
• No more rss feed (only atom feed), but different types of feeds in the feed page RSS feed are back thanks to the amazing work of LunarEclipse! Different types of feeds are available in the feed page
• Source code is now on a self-hosted Forgejo instance, and only mirrored on Github for Netlify automated builds (Update 2024-06-21: I deprecated my self-hosted instance, and the code is now on Codeberg)

Description and (few) screenshots#

The thing I like about these changes is that the blog feels more alive and "in line" with the indieweb community. I am particularly happy with the changes in the about page. I tried to make it less wordy and in general to reduce the amount of work-focused content on that page, which is now only a small paragraph and not at the beginning, because work does not define me and this place is not for a personal brand or a side hustle, I don't need to sell myself or sell anything else at all. I have an academic website linked in the page, where I host my work-related stuff, and I don't really need it here.

Another things I really came to love are 88x31 buttons, I was considering to put them in the homepage, but I did not want to bloat it too much. Instead, I just put a link to it. I also created my own buttons! feel free to use it and link it to this website (please don't hotlink).

The blogroll rework is also something I really enjoyed. The table layout was inspired by a past iteration of Starbreaker website. Now instead of just a bullet points there is an organized list of links in a table format, with rss feed links and a short description. The table is built from a TOML array with the help of a template. Probably not the more optimal solution (and definitely not the most readable) but I wanted to see if it could be done.

The ideas page was inspired by Bacardi55, I usually just have TODO.txt file in the root folder of my VSCodium project, but this is a nice addition to have and a reminder for myself as well.

The new bloglist feels also much cleaner in my opinion and less condensed. I was a bit conflicted on the layout, if having something spaced on the two sides like Simone Silvestroni or not. But in the end I went for a more standard approach and it feel fine tbh.

Blogs will also display a warning if the content is older than 365 days. I am considering doing something similar for long content (it would actually made more sense).

Some restiling have been done also to the homepage, with the addition of a proper section for the webrings and link to the blogroll and the button wall, and the new bloglist style.

Tag list and tag pages have also been reworked. I am not completely sold on the new tag list page, I think having links styled as buttons is not really a good practice and might be confusing. I will probably change this in the future.

Lastly, the blog now offers three different feeds: a general feed, comprising both blog posts and bookmarks, a feed only for blog posts, and one only for bookmarks. If someone was subscribed to the feed before, he will be subscribed to general one. I also took inspiration from Vivaldi feed viewer for generating a human-readable feed page (inspired by Derek Kay and many others).

It was a nice thing to do, and I learned a lot thanks to the examples of many talented people. I am already considering more changes (color scheme, css framework inspiration, I discovered Tiniri and SuCSS recently), but that's for another time.