Middleman Localization

Recently when developing a site using middleman, my client wonder that if we can do localization for the website. Fortunately, Middleman comes with the localization extension i18n which is pretty simple to integrate it into the site. Although there’s a quick overview of Middleman Localization available on the middlemanapp.com, I still find it a little bit confused for Middleman beginners. Here are quick steps how to set it up:

1. Activate i18n and update your bundle.

To activate, going to your config.rb file, then add at the end of file.

activate :i18n
Open terminal and direct to your middleman app, then run.
$ bundle update

2. Organize your middleman folders so that it knows where translated files located.

  • All the translated files should be located inside “locales” folders, in your root directory of your source code. For example, the structure of my directory:
  • Then you need to put all your template files in one folder called localizable.


3. Add translation text into your translated files:

  • Go to your “locales” folder, and create files called: en.yml, and es.yml, these will include all translation text of English and Spanish for your site.

For example, in my en.yml file, it contains:

  siteName: “Khoa Pham”
    privacy: “Privacy”
    legal_disclosure: “Legal Disclosure”
    terms_of_use: “Terms of Use”
    copyright: “Copyright”

  • In my es.yml, it contains:
      siteName: “Khoa Pham”
        privacy: “Privacidad”
        legal_disclosure: “Aviso legal”
        terms_of_use: “Términos de uso”
        copyright: “Copyright”

4. Output translation text to your template files.

Since you already put your template files into the localizable folders, now you can go to files in that folder and output localizable text. My site only has one template file called index.html.erb:

To output translated text from the translated files, we use: <%= I18n.t(“your_key_here”) %>. For example,

<%= I18n.t(“siteName”) %>
<%= I18n.t(“footer.privacy”) %>
<%= I18n.t(“footer.legal_disclosure”) %>
<%= I18n.t(“footer.terms_of_use”) %>
<%= I18n.t(“footer.copyright”) %>

You can view your site under Spanish by going to: http://localhost:4567/es/index.html

More Articles

Set up Nginx with Centos

Create App With Meteor

Sync Middleman with Amazon S3

Setting up Amazon Web Services