🎉 New Web Site Grand Opening!

27 May 2025·
Svetlana Cranga
Svetlana Cranga
Jean-Marc Le Peuvédic
Jean-Marc Le Peuvédic
· 2 min read
Bye! Bye! Wix! Image credit: Natixar / S. Cranga

🚧 Building Our Site: From Confusion to Creation (and a Few Laughs Along the Way)

Welcome to the backstage tour of how we built a multilingual, dynamic, and modern website—without losing our minds! This is the real-life story of how a state-of-the-art web presence is now within reach, thanks to Hugo, Hugo Blox, Tailwind CSS, Decap CMS, and a little help from AI.

🌍 Step 1: Go Global or Go Home

We wanted our site to speak every language our audience might use. Hugo and Hugo Blox made it possible to manage French, English, Portuguese, Chinese, and Spanish — sometimes with just a YAML file, a data folder, and the magic of i18n shortcodes:

With the right shortcodes and the right folder structure, no message gets lost in translation — unless you forget to add the translation file, in which case Hugo lets you know. Loudly.

⚡ Step 2: Content That Writes Itself (Almost)

We stopped drowning in markdown files by moving shared info to data files (/data/contact.fr.yaml etc.), and teaching our templates to look up the right content depending on language — no more tedious duplication! A sprinkle of smart partials, and voilà:

When in doubt, we debugged with {{ printf "Lang: %s" .Lang }} and let AI double-check our logic. Goodbye repetitive copy-paste, hello maintainable content!

{{ $lang := .Lang | default "en" }}
{{ with (index site.Data.contact $lang) }}
  {{ .locale.address_format }}
{{ end }}

🎨 Step 3: Make It Pretty—Responsively

Who knew layouts could be fun? We replaced row and col-12 col-lg-8 from Bootstrap with Tailwind CSS and—when needed—a dash of custom vanilla CSS for those “no-utility-class-for-this” moments. Our pages now reshape themselves gracefully, whether viewed on a smartphone or a cinema screen.

If Tailwind didn’t have the class we wanted, we just added a