What are the options for making a simple static website multilingual?

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.