Using Ghost's dynamic routing configuration layer, your site can support multi-lingual content served across unique URLs with SEO-friendly, semantic templates. This means you can have each language run on it's own URL, for example example.com for English content and example.com/de for German content.

Setting up multi-language content involves configuring collections in your routes.yaml file, as well as creating different templates in your theme for each collection.

This tutorial walks you through the entire setup process for a multi language site using the Ghost theme layer including configuring the routes.yaml and creating templates for each language.

Configure collections for each language

First of all, configure your routes.yaml file to include collections for each desired language. In the Labs page in Ghost admin, download your routes.yaml file and open it in any code editor.

This file is split into three sections, and for this tutorial we will be using the "collections" section. Read more about dynamic routing in the core concepts.

Here is an example of the code required to create a collection for German content:

routes:

collections:
  /:
    permalink: /{slug}/
    filter: 'tag:-de'
  /de/:
    permalink: /de/{slug}/
    filter: 'tag:de'

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

This configuration will allow you to filter your posts and pages that contain multi-language content using tags in the editor.

Note: in the current beta version of Dynamic Routing, it's necessary to specify the inverse of filters using -.

Create templates for each collection

Once your collections are in place, you'll need to create different templates for each collection and define html lang attributes in those templates, for example:

index.hbs
<html lang="en">

de.hbs
<html lang="de">

If you need further help creating a custom template, visit the theme documentation for more detailed information about working with the Ghost theme layer.

Finally, update your post template to ensure the correct template is used for each collection, for example:

post.hbs
{{#post}}{{#has tag="de"}}<html lang="de">{{else}}<html lang="en">{{/has}}{{/post}}

Implement your collections and templates

Once you have finished editing the routes.yaml file, created your new handlebars templates and made any necessary adjustments to your CSS files, it's time to get your new multi-language collections up and running.

  1. Upload your edited routes.yaml file in Ghost admin
  2. Upload your new theme .zip containing new templates and CSS in Ghost admin
  3. Visit your site and ensure your multi-language content renders correctly

Summary

This same process can be repeated to create multiple collections for different languages as required and you can use the new templates you create to determine how the content for each language specific collection should render.