Multilingual

Hugo has full multilingual support and ships with extensive demo content for english (default language) and french.

Multilinugal settings

Default language

The default language is preconfigured in the config.yml

# config.yml

languageCode: en-us
defaultContentLanguage: en
defaultContentLanguageInSubdir: false

Languages

Languages are declared in the config.yml using the standard Hugo languages properties.

# config.yml

languages:
  en:
    weight: 0
    languageName: English
    contentDir: content/en
  fr:
    weight: 1
    languageName: Français
    contentDir: content/fr

Content

Multilingual content is stored in the content folder using sub folders. This makes it easier to add new languages or remove multilingual if you only want english or a single language.

content
 - en
  - _index.md
  - services
    - _index.md
    - branding.md
    ...
 - fr
  - _index.md
  - services
    - _index.md
    - branding.md
    ...

Adding multilingual content

Let’s say you want to create a new service page.

Create a file called content/en/services/my-new-service.md like normal. This will create the english version of the page.

Create another file called content/fr/services/my-new-services.md. This will create the french version of the page.

You can set different front-matter for each language. Which means you can have different images, settings etc.

# content/en/services/my-new-services.md - the english version
---
title: 'Branding'
description: 'The expression of a brand including its name, trademark, and visual appearance.'
date: 2019-10-03
thumbnail: 'images/services/branding.png'
---
# Creating Modern Websites

Web design encompasses many different skills and disciplines in the production and maintenance of websites.

# content/fr/services/my-new-services.md - the french version
---
title: "l'image de marque"
description: "Expression d'une marque, y compris son nom, sa marque et son apparence visuelle."
date: 2019-10-03
thumbnail: 'images/services/another-branding-image.jpg'
---
# Création de sites Web modernes

La conception Web englobe de nombreuses compétences et disciplines différentes dans la production et la maintenance de sites Web.

Hugo’s approach to multilingual requires that you create a .md file for each page, in each language. And while this can sometimes seem tedious, the flexibility it provides is worthwhile.

Note: If you only create a page for one language, the language switcher will not display the other languages for that page.

Adding new languages

Let’s run through an example of adding a new language, Spanish.

First add the language in the config.yml - Add a new [languages.es] (you will need to use the correct language code)

# config.yml

languages:
  en:
    weight: 0
    languageName: English
    contentDir: content/en
  fr:
    weight: 1
    languageName: Français
    contentDir: content/fr
  es:
    weight: 1
    languageName: Español
    contentDir: content/es

Then create a new folder in the content directory ie content/es

Create a new homepage for Spanish. Create a new markdown file in content/es/_index.md - You can copy the english version of this file from content/en/_index.md and then begin editing and translating the front-matter and markdown content. Reload the homepage in the language dropdown in the top right Spanish will now be an option.