How to localise a static website?

Question

For a website I'm doing, I'm only using static content such as HTML, javascript, CSS, images (no PHP or server-side language).

I want to be able to localize in English and French, but I'm unsure what would be a good solution. Here are the solutions I have in mind so far:

Duplicate HTML pages
Pros: simple, SEO friendly
Cons: a pain if I decide to change anything, I'll always have to do it twice

Dreamweaver templates
Pros: SEO friendly, update friendly
Cons: so many places to add regions that it would double the HTML size, messy code

JST: javascript templating
Pros:update friendly, code friendly
Cons: SEO?, not made for this?

Any other ideas or further advice on the current list?

Answer 1

Use a little PHP to replicate the pages on your side. Treat the HTML pages like PHP files, localize the PHP files, then use the web server to compile your PHP into static web pages (using file_get_contents). Just compile the HTML into a language directory and have English be the default root. Even if your production server fails to have PHP, you can save yourself some time by using PHP on your side.

Answer 2

A hybrid solution may work for you:

• Develop the main HTML content, all in DIVs with IDs, in English (SEO-friendly for English at least).
• Create links on the page to switch to another language
• When the user clicks the link, rather than loading more static files, run some JavaScript that loads a static JSON array of IDs and translated language, loops through the array and replaces the InnerHTML of the DIVs.
• As a bonus, have that code also change all internal links on the page to add #language-en or whatever to all links. Then, when your page loads, have the Javascript check for a language argument in the URL and automatically load the preferred language.

Use JQuery to handle all the messy ID selection and AJAX calls to load language files.

If images need to be replaced, make your JSON data more robust by having three columns: element ID, attribute name (to switch either "src" or "InnerHTML" or whatever), and the content (which, for an image, would be a localized src, and for a DIV, the replacement text).

Answer 3

I have always been a fan of the first option (duplicate HTML files) as it tends to be the easiest and most SEO-friendly while not requiring the use of any JavaScript, but having to copy your modifications over to several files can be really annoying. My work around for this has been to use static site generators. Creating layouts and populating them with text retrieved from localized files eliminates the problem. Here's a few different options that should do the trick.

Jekyll (with the multiple languages plugin)

Jekyll is probably the first thing that comes to mind when thinking of static site generators as it's by far the most popular. Using the multiple languages plugin, you can build multilingual websites with the blog framework.

Pros: It's Jekyll, so you'll likely find a decent amount of support.

Cons: Jekyll is a blog framework, so it might not be the best option if you're not building a blog.

Nikola

I didn't know about this one before digging it up on Google recently, but it may be promising with support for building localized websites out of the box.

Pros: Actively being developed, supports almost 40 languages out of the box without any plugins. It also has lots of other useful features like incremental rebuilds, multiple formats, a friendly CLI, and a content management system.

Cons: Doesn't have as much support as Jekyll, also might not be as suitable depending on what you're building.

Hugo

Hugo can also be used to build multilingual websites.

Pros: Hugo is also a very popular static site generator so you can expect lots of support there as well. Unlike Jekyll, however, you can use Hugo to build multilingual websites without the use of any plugins.

Cons: Unlike Nikola, Hugo wasn't built with localization in mind. Achieving it is more of a trick used in the configuration file.

Ampersand

As much as I don't like self promotion, I've been working on a static site generator that's primary focus is building multilingual websites statically. I think it might help with your problem if you choose to use it.

Pros: Built from the ground up with localization in mind. Ampersand isn't a blog framework so it can be used in virtually any web development project without a ton of adaptation and chasing down template files.

Cons: Still early in development where backwards-incompatible updates come often.

If anyone knows another static site generators which can be used to build multilingual websites that I haven't mentioned above, I encourage you to note it in the comments.