What Are The Options For Making A Simple Static Website Multilingual?

I'm setting up a static website which I want to display in two languages. I can't find a comprehensive overview of the different options (e.g. server-side loading vs front-end loa

Solution 1:

For anyone else looking around, I found an overview on this Reddit thread. I'll also explain the option I went with below.

To summarise the thread:

1) Front-End JS (e.g. jquery.i18n)

• Generally fairly easy to implement
• They can negatively impact SEO
• Can increase page weight
• Website doesn't work for people who don't run JS
• Not recommended but ok for very small projects

2) Multiple Pages

• This is easiest to setup, but maintenance becomes a nightmare. Not recommended

3) Server Side (e.g. node-i18n)

• Because it avoid the disadvantages of front-end mentioned above, this is generally recommended for larger projects

4) Using a build tool like npm scripts or gulp (e.g. static-i18n)

• Generates separate directories for each language using build scripts
• Bit of initial set up but easy to maintain and extend
• Since only static html pages are generated, html code can be safely embedded in the translation json files.

Solution

In the end I went with option 4 using static-i18n. While it took a bit of setting up, it works well for SEO, works for static sites, is easily maintainable, is scalable, and avoids the messiness of front-end dynamic language loading.

Solution 2:

I don't think you need to bother with a library at all if all you are doing is text translation. All you need to do is write a simple function which switches between two (or more) json language files and a mechanism to display the right string from the selected json file.