Blog Tech Stack

What drives this blog?

• 11ty . A simple and quite functional static website generator.
• Bootstrap 5. A CSS and components framework.
• Prism. A Code Syntax Highlighter.
• Mermaid. A simple textual UML and diagramming tool.

IDEs

• Visual Studio Code
• Obsidian

The story behind the tech stack

For the past 20 years, this blog has been just a skeleton. Originally I published some photos from a trip to Barcelona in 2006, but I never got to write any articles.

For most part I implemented a static site generator using a Perl script.

#!/usr/bin/perl -w

# Autogenerador del sitio en Perl
# Genera el sitio usando una plantilla !!
# Toma archivos html con extension .pag y los incluye dentro del centro
# V .1

Here the script crawled the whole directory structure recursively and took HTML templates as the center element of each web page.

During the past decade I have been introduced to Markdown, RST which I used to generate static documentation sites with Sphinx, Docsify and Doxygen.

For this site, however I have also evaluated some alternatives like Hugo, Jekyll, Zine and even WordPress.

Overall I was looking into something flexible and in either Python or Node.js

After some prototyping I chose eleventy and so far it has been a great choice for following reasons:

• Simple to setup
• Simple to configure
• Excellent filtering and chaining architecture
• Markdown, HTML support
• Programmatic API and custom filters
• Ability to use JavaScript on both the configuration and the website

Things I have been able to do:

• Get the site to be it's own node package
• Get the site to a personal git repository
• Use Visual Studio Code and Obsidian to edit the site
• Create a deploy script which uploads the site to the server (npm run deploy)
• Use custom filters to exclude documents based on status
• Use custom filters to sort or filter based on date and language
• Use several plugins for diagrams and code