Porting all my content into a static-site

Tags
Screenshot demonstrating how the taxonomy module works on a blog post with tags and categories

Taxonomy system demonstration on the new site

Actually...

I started working on it a little bit before COVID-19 pandemic and only would work on it 4 years later, around the end of my Full-Time Parenting period that ended in .

The conversion work will be covered in another article.

It's been more than ten years that I haven't touched my site and I want to make-use of my skills working with Vue.js and modern Front End of the last years back to my own profit.

So this is going to be a complete port of all my previous content, talk slides, experiments, posts, Twitter feed, examples, code bits all in a static site.

Current Status

The site is currently live at https://renoirb.github.io/site/ and will eventually replace the WordPress installation at It took 4 years before I could finish! https://renoirboulanger.com.

Integration with Existing Projects

I'm planning to leverage several of my public packages:

New Features

Enhanced Code Display

The new site includes improved code block presentation with syntax highlighting and multiple formats:

GET /hello
Accept: application/json

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Date: Fri, 16 Sep 2005 19:22:04 GMT
Vary: Accept

{
  "body": "Hello!"
}

GET /hello
Accept: plain/text

HTTP/1.1 200 OK
Content-Type: plain/text; charset=utf-8
Date: Fri, 16 Sep 2005 19:22:04 GMT
Vary: Accept

Hello!

Custom Taxonomy System

One of the key improvements is the custom taxonomy system that supports:

  • Bilingual tag and category labels
  • Hierarchical organization
  • Rich descriptions for better content discovery

Screenshots

Homepage design of the new static site showing the main navigation and content layout
New homepage design
Search interface of the new site demonstrating content discovery features
Enhanced search functionality
Article page layout showing typography and content presentation
Article page design
Screenshot demonstrating how the taxonomy module works on a blog post: two explanatory bubbles show that the module handles two types of taxonomies in the Markdown front matter - 'tags' which allow multiple values per article (shown here: 'favourites', 'best-practices', 'integration', etc.) and 'category' which is limited to one value per article (shown here: 'portfolio').
Taxonomy System Overview

On the page top, we can see grey pills. They are the links to the taxonomy that populates the index pages at /blog/tag and /blog/category

Screenshot showing the taxonomy system's bilingual support: on the left, the rendered blog tag page shows links including 'Bonne pratiques', while on the right, the corresponding fr.yaml configuration file demonstrates how tags are defined with a key (e.g. 'best-practices'), display text ('Bonne pratiques'), and description in French. A red arrow highlights how the raw YAML definition connects to the rendered tag link on the website.
Bilingual Taxonomy Configuration

This is the list of all tags.

Here is an example of the YAML definition to display more polished labels and descriptions for a tag. In the example shown, it tells that the French translation for the tag /blog/tag/best-practices be written as "Bonne pratique".

Notice that, the language is currently only shown in french as there should eventually be a way for the visitor to chose the language they're most comfortable with. Probably detect from the browser, since it's there too. It's planned in ticket #77.

Tag index page showing articles tagged with 'Bonne pratiques', demonstrating the taxonomy system in action
Tag Index Page

This is the list of all articles with the tag "Bonne pratiques"

We see the same YAML definition shown in the other screen shot.