What would be the best way to translate a site with multiple static html pages

Following this post, I have created a site which relies almost exclusively on “complex” html pages.

My pages (about.html, contact.html, partners.html, etc) are located at the root of content/.

All these pages are rendered based on a single.html template located in layouts/_defaults. So far so good, my site renders well.

Now I am wondering how I can integrate the new multilingual feature with this type of structure. Since a content file cannot render {{ i18n "key" }}, I need to find a way to translate the content of the files without having to duplicate the same html files (for maintenance reasons) for each language. I have given it a few thoughts and listed them here:

  1. One solution would be to create a shortcode that would return the translated string, which could then be placed in the content file. As an example:

     <!-- content/contact.html -->
     +++
     some frontmatter 
     +++
      <html>
     {{< translate "key" >}} or {{< i18n "key" >}}
    
       ....Many html elements....
       .....
    

This solution would allow to make modification to the contact.html page and then copy/paste the full HTML into contact.de.html

2 . Use content files that are empty except the frontmatter section (one file per language) and create a template for each html page (layouts/contact.html, layouts/partners.html, layouts/home.html, etc) which would contain the {{ i18n "key" }} functions. (seems pretty hacky to me)

I would be very interested to hear about someone’s thoughts on how to tackle this.