⚙️ sitoctt Internals

In the endless years of its existence, the ctt site has evolved and continues to evolve, obtaining epic features and in general an aura of magic… and those who want to become like me might want to start by creating their own site, also taking mine as inspiration.

For this reason, I think it’s nice to keep a detailed collection of the various technical specialties of the site, illustrated well; perhaps explain so that they are understandable even to those who have a bit of curiosity but are not experts. (The whole thing, then, would be useful even for me to keep note of very mixed details, so I don’t have to linger.)

The ctt site is in any case completely free and open-source; copyright notes, licenses and the complete source structure are described on the page “🔓️ Open Source”!

…Under construction…

General

The site is a so-called “static site”, that is, a collection of HTML files and connected resources without a backend server program with logic and database. This involves very low maintenance and the possibility of hosting the site practically anywhere, even for free, as well as distributing it without too much difficulty in different formats.

In my case, as is now common practice, the static pages of the site are compiled with a “generator”. From May 2022 to August 2024 I kept the site under staticoso, my generator created specifically and then deprecated, because the code had become too spaghetti; since August 2024 I have migrated the site to Hugo.

In the past, the site templates/themes were 3 very simple, not technically separable from static and created from scratch; since the migration to Hugo a custom theme is used (with slight changes to color and layout) created from Ananke, one of the most recommended for those who want to make changes.

Research

The ctt site integrates a text search field, with which you can immediately reach any other page on the site. It is implemented in two ways:

• JavaScript (local): When each page loads, an index is loaded (the one for the current language, since they are separated to keep performance high) with the metadata of all the pages of the site, which is then managed by the site-search.js script and the template search-applet.html; I built it by taking the search code from the Blowfish theme for Hugo. (The index is actually a JavaScript file that initializes a global JSON object, and not a pure JSON file, which allows search to work even when the site is navigated from local files; it is generated by the template index.searchindex .js.)
• Fallback: In case JavaScript cannot be executed in the browser, the search box works in a more classic way and relies on my YaCy instance, which it works exactly like a normal web search engine (Google, DuckDuckGo, etc…) but indexes all my pages better (and therefore it doesn’t just stand for beauty).

Multilingual

Managing multiple languages ​​for the various pages of the site is handled with features integrated into Hugo.

Almost all pages and posts are automatically translated from Italian to other languages, in my hope of making the site a little more useful, because it is potentially discoverable by more people via search engines; I do this with a Python script created just for this, which uses Google Translate through the script/library Translate Shell.

Other?

I do not know. Don’t hope I can think of anything else to add out of nowhere; rather, leave a comment on this page if something intrigues you and you want more details, explained beyond the code…