Localizing your site

Grow's goal is to be the best and easiest way to localize high-quality, content-heavy web sites. We've tried to turn localization from an often-confusing process/requirement into one that fits, neatly and flexibly, right into your web site production workflow.

Specifying locales

In our codelab's podspec, we've specified that the default locale for our site is "en" and the site should be available in four locales. The below configuration applies to all pages and content throughout the site.

# In /podspec.yaml...

localization:
  default_locale: en
  locales:
  - de
  - en
  - ja
  - zh

In order to actually build a page to a localized URLs, a localized URL path format is specified for a page's content collection.

# In /content/pages/_blueprint.yaml...

path: /{slug}/
localization:
  path: /{locale}/{slug}/

The combination of the config in the podspec and the config in the blueprint instructs Grow to build four pages for each piece of content in the pages collection. One for the default locale, and three localized variations. The path configs determine the URL paths for the default and the localized pages, respectively.

Adding locales

To localize your site into an additional locale, simply add it to the list of locales in the podspec file. All content that inherits the site-wide configuration will now be configured to have that additional locale.

Go ahead and add the es locale to the list of locales in podspec.yaml.

locales:
- es

Refresh your site and notice the language select in the footer. The choice corresponding to the es locale has been automatically added to the menu. Choosing the menu item brings you to the es-localized site.

Machine translation

Grow comes with a machine translation feature (by way of the Goslate library which leverages Google Translate). Machine translation can help you prepare your site ready for professional localization and translation.

You can populate your pod with machine translations during the design and development phase, and then send off the message catalogs to a translation provider for professional translation. (Machine translations can be very useful, but you probably shouldn't rely on them for your production site!)

Let's try machine translating the ja locale. Run the following command:

grow machine_translate --locale=ja ./my-codelab/

If you've left your server running, you'll have to restart your development server for the translations to take effect. Open http://localhost:8080/ja/ and view the localized web site. Note that machine translation does not translate the Markdown body of a content document – just tagged fields in configs and tagged UI strings.

Translation storage

All translations are stored in the /translations/ directory of your pod in formats compatible with gettext. The messages.pot file is a message template, and each locale has its own messages.po catalog file. Translations are compiled to messages.mo files.

Back Next: Building your site