If you're building a static website I would say you have 3 options:

1. duplicating - no one likes this word, but if you know you'll be updating your site very rarely, if ever, that could actually be a simple option that does the job, so why not. If you know you'll be updating it, better chose another way.

2. use some 3rd party libs that help you with this. A quick Google search shows i18next and Lingumania. Both can be included via a script tag so that very easy to add. The second looks a bit nicer as an API, but the first looks more supported and stable. Never used either of them so I can't really say.

3. come up with some other crazy solution like doing in CSS (it will work though!).

These are the options I see for a static website.
If instead you're up for the challenge and want to try another approach, PHP is one them, but purely frontend solutions like React, Vue or Angular will open you some more options, surely nicer than the ones you have on static website.

In any case, good luck and have fun, hope that was helpful in some way!

ps - now that I think of it another option you can look into is a static site generator like Jekyll. The learning curve is very manageable, you'd be working mainly with html and it definitely supports internationalisation. An example (this article is about building a blog, but you can easily publish "normal" pages with Jekyll and build a small website that is easy to update when you need to).

We have done this for one of our apps in a very simple way. It was a matter of taking all the text and putting it in a key/value collection (a JS object).

var en_us = {
    welcome: "Welcome!"
}

var fr_ca = {
    welcome: "Salut!"
}

var lang = en_us;

// set all the text
document.getElementById("welcome").innerHTML = lang.welcome;

This is off-the-top sketch, may not run. You could also be more clever here and have the IDs of the elements containing text exactly match the property names. Then you could write a few lines of code to loop through all the keys in the dictionary and set the text on the corresponding HTML element with the same ID.

That could facilitate developing the site once and having a JS function switch all the text out when the user changes languages.

Our case was slightly different since it was in Elm, but the concept of having two different "dictionaries" and swapping them out is similar.

Where and how do you want to do the detection? Server side? Client side? User selected?

That's the biggest thing to consider. Best option, if you really can consistently translate and keep everything up-to-date by hand, is to do it server side (this is quite simply the most portable approach, it will work even for truly ancient browsers). You don't need PHP or Node or any other server-side scripting language though, you can do it with URL rewrites and simple regex matching on the contents of the Accept-Languages header.

In short:

• Structure your site so that you have one sub-directory per-language, with your default language at the top level (this is good practice if you're handling things server-side even if you're doing some form of scripting to do it).
• If you're on a UNIX-like platform, make a symbolic link for the default language code pointing to the top-level directory. On Windows, set up the equivalent as a URL rewrite rule in the server configuration. This is just a consistency bit to help users who actually manually edit URLs.
• On each page, add something (usually in the footer, sidebar, or menu) to allow users to jump to the same page in each other language. This is something you can easily generate dynamically while deploying your site. The two popular options are flags for the country the language is associated with, or a list of languages using their native names (so Español, Svenska, François instead of Spanish, Swedish, French).
• In your server configuration, add a rule to look at the contents of the Accept-Languages header. If the header isn't present, contains none of the languages you support, or the URL is explicitly matching a specific language directory, don't modify the URL. Otherwise, pick the leftmost language code in the Accept-Languages header that you support, and rewrite the URL (or redirect) to the appropriate language directory.

This is, in essence, the traditional method of handling web page translations. I'm pretty sure MDN and a number of other sites are still doing it this way in fact. It puts no significant burden on the client (again, well behaved user agents set the Accept-Languages header properly in most cases) or the user, means you send nothing extra over the network, and makes it surprisingly easy to manage on the server side too. The downside is that it doesn't scale past maybe half a dozen languages very well unless you use some form of scripting to generate the web-server config and the language-switchers in the pages.

You could use a template engine like moustache to process your html pages before uploading them, then you can have only one version of each page and render it multiple times with the different languages and upload that to your server.

# my-page.html
<h1>{{ myPage.title }}</h1>

// en.json
{
  "myPage.title": "Welcome"
}

// es.json
{
  "myPage.title": "Bienvenido"
}

mustache en.json my-page.html > en/my-page.html
mustache es.json my-page.html > es/my-page.html

You have a very French name 😀.
A couple of people have mentioned the dictionary approach, and that really seems most suitable for your use case (it's been a few years, but last time I had to deal with this, we used a dictionary and a translation service). It's also pretty easy to implement and makes text changes a breeze. Server-side might be better for SEO, but if you're not that worried about it, client-side is totally fine.

Hey.
Try Zeta Resource Editor
its a free application that enables you to edit standard Microsoft .NET string resources from multiple different resource files together inside one single data grid...
:-)

To create a normal multilingual site is hardly any service. We selected a few website builders that did a good job with this panel: uCoz, Wix, uKit, SITE123, Tilda, Ucraft. This is not a descending or ascending ranking. You can show the features of the implementation of multilingual sites in cloud designers. You can also specify two CMS - WordPress and Joomla. Let's finish the comparison of approaches to many multilingual site projects written in pure HTML5, you can read more here :agilie.com/blog/wordpress-vs-joomla-vs-drupal