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.