How to Make a Multilingual Website with Hugo

In this tutorial, I am going to show you how to create a multilanguage website using Hugo. I am a big fan of Hugo, an awesome open-source static site generator with tons of cool features. It makes building websites fun again and it also supports multilingual mode. This means you can easily translate your Hugo website in any language you want! Follow me and I will teach you how to do it.

First, you need to do some changes in your config.toml configuration. Add the following piece of code at the top of your configuration:

DefaultContentLanguage = "en"

In this way, you choose a default language for your Hugo configuration (in this example English). Now, you need to specify language-specific parameters that will be different for each language. Let’s set up the website title, description and main menu:

[Languages]
[Languages.en]
	title = "Atanas Yonkov"
	name = "Atanas Yonkov"
	description = "Blogger, Web Developer"
	weight = 0
[[Languages.en.menu.main]]
	url    = "/"
	name   = "Home"
	weight = 1
[[Languages.en.menu.main]]
	url = "/post"
	name = "Blog"
	weight = 2

You should replace the menu items with the ones that you use on your website. You can also add more menu items if you want. These values are unique for the English language. Now, let’s set up the parameters for the non-default language (in our case Russian):

[Languages.ru]
	title = "Атанас Йонков"
	name = "Атанас Йонков"
	description = "Блоггер, Веб-разработчик"
	weight = 1
[[Languages.ru.menu.main]]
	name = "Главная"
	url = "/ru"
	weight = 3
[[Languages.ru.menu.main]]
	name = "Блог"
	url = "/ru/post/"
	weight = 4

Please note that everything that is not defined in the [languages] block is not language-specific and it will fall to the global value for that key.

Cool! Now, when you go to https:/yourwebpage.com/ru, you should be able to see the non-default language version of your homepage. Some parts of it (title, menu bars) should now be translated into Russian. However, we still haven’t translated the content. Let me show you how to do that in the next paragraph.

How to translate the content?

It is very easy to do so! Just go to the content folder and choose the markdown file that you would like to translate. Then, add the language extension for your non-default language:

/post/about.md
/post/about.ru.md

Do not forget to set the correct language parameter in the top part of your markdown file (language= “English” and language= “Russian” for each verson respectively).

Now, when you visit https:/yourwebpage.com/ru/post/about.md, you should be able to see the Russian version of the page. In this way, you can go on and translate all of your pages and posts in Hugo.

How to create a language switcher?

It is easy to create a list of links to your translated content in Hugo. What you need to do is create a partial called allLanguages.html and put it in your layouts/partials folder. Paste the following code in it:

{{ if .IsTranslated }}
{{ range .Translations }}
    <li>
		<span class="language-switcher" style=""> 
			<i class="fa fa-globe"></i>
			<a href ="{{ .Permalink }}" style="">{{ .Lang }}: {{ if .IsPage }} {{ end }} </a>
		</span>
    </li>
{{ end}}
{{ end }}

What this code does is adding a language switcher with a language icon from font awesome (you should add a link to font awesome in your css file, if your theme does not use it). You need to include this partial somewhere in your template files. This is specific for your theme and your personal preferences. In my case, I put it in menu.html partial, at the end of my menu bar:

<ul class="nav navbar-nav">
    {{ range .Site.Menus.main }}
		<li>
			<a href="{{ .URL }}">{{ .Name }}</a>
        </li>
        {{end}}
	{{ partial "allLanguages.html" . }}
</ul>

The important part here is to include allLanguages.html somewhere in your partial html files. Now, you should be able to see the language switcher on all the translated web pages.