Ultimate translation method for static website generator in 2020 - Hugo
Tags: webdev, hugo, jamstack
Published: 2020-07-06 12:31:58

🇪🇸 A spanish translation written by Chema Bescos is available here : https://www.ibidemgroup.com/edu/traduccion-web-hugo/

--

Couple months ago, I've posted a series of posts about how to make your Gatsby website multilingual. It works but involves a lot of changes in your codebase and time to implement it.

## Today I'll show you a way to translate your entire static website with 3 lines of code. Amazing, right ?


### Prerequisites 

- I'm using [Hugo](https://gohugo.io/), a static website generator coded in Go which I love for the speed and the simplicity. And I'm starting to like it a lot because it adheres to the [KISS principle](https://en.wikipedia.org/wiki/KISS_principle).
- Netlify CMS for the back-end
- Finally, a [Weglot](https://weglot.com/) account


### Hugo and Netlify setup

I advise you to follow the [Hugo Quick Start](https://gohugo.io/getting-started/quick-start/), follow the steps, and, of course you can add more customization.
Once your project is working, you can push it to the cloud! 🚀

Create a Netlify account and a Github/Gitlab account to push your code. Then, check your Hugo version: `hugo version` and place a `netlify.toml` file at your project root directory.

```toml
# netlify.toml
[build]
    publish = "public"
    command = "hugo --gc --minify"

[context.production.environment]
    HUGO_VERSION = "YOUR_HUGO_VERSION"
    HUGO_ENV = "production"
    HUGO_ENABLEGITINFO = "true"
```

Now you have everything to deploy your web app. Hugo documentation has a guide to deploy to Netlify : https://gohugo.io/hosting-and-deployment/hosting-on-netlify/


### Netlify CMS

🚨 I advise you to use Netlify DNS instead of your registrar. Faster to implement and works smoothly with Weglot.

Netlify CMS documentation is pretty straightforward : https://www.netlifycms.org/docs/hugo/#getting-started-with-netlify-cms. 
Follow the steps and don't forget to create the `admin` folder and to **enable Identity & Git Gateway in Netlify**. This is not too much highlighted in the documentation.

⚠️ Personally I choose **Invite only** in Netlify registration preferences and I didn't enable the **Netlify Identity Widget**. In that case, when you invite users in the Identity tab of your Netlify project, it generates an email with a registration link like this `yourdomain.com?auth_token=YOUR_TOKEN` and it doesn't work. Instead, change the URL to `yourdomain.com/admin?auth_token=YOUR_TOKEN` and you're automatically redirected 😉

Now you can access your admin area and create posts.

### Weglot configuration

🚨 Weglot provided a DNS method to implement the translation. It works with a proxy to build your translated website with a server-side rendering. Much better for SEO optimization!

First, create an account here : [Register | Weglot](https://dashboard.weglot.com/register)
Then, create a project and choose `Other` as a project technology

![Project - first step](https://dev-to-uploads.s3.amazonaws.com/i/ju4nt4qtkd2mq00808pq.png)

After, register your domain name and your languages

![Project - second step](https://dev-to-uploads.s3.amazonaws.com/i/d2xz5x3ehdjqnsxk71ud.png)

At the next step, Weglot gives you the DNS settings you have to configure, click on check DNS status to validate your configuration. Here is the example with Netlify DNS.

![Project - third step](https://dev-to-uploads.s3.amazonaws.com/i/l2bzlsvgx3ll07c7doel.png)

![DNS setup](https://dev-to-uploads.s3.amazonaws.com/i/7k1etkq4sk0l1j6u9cy3.png)

You are almost done! Weglot is building your other domain. When they are ready, you can click on them.

![Project - Fourth step](https://dev-to-uploads.s3.amazonaws.com/i/v3e2ic6phloulwbbphtj.png)

Congratulations! Your website is automatically translated with no effort 🥳


### Language switcher

Weglot gives you a few lines of code at the last step to automatically switch between language. You don't have to code it yourself! Weglot also provides a way to fully customize it.

Here is the example for three languages and three domains :

```html
<link rel="alternate" hreflang="en" href="https://multilingual-hugo.com">
<link rel="alternate" hreflang="fr" href="https://fr.multilingual-hugo.com">
<link rel="alternate" hreflang="es" href="https://es.multilingual-hugo.com">
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'YOUR_WEGLOT_API_KEY'
    });
</script>
```

You should see the language switcher on the bottom right as here : https://multilingual-hugo.com/

In my case I needed to override my theme templates to put the HTML code above. You can find a guide [here](https://bwaycer.github.io/hugo_tutorial.hugo/themes/customizing/) to do the same thing.

### Conclusion

That's it, you have a multilingual website built in a few minutes with a language switcher fully customizable 🚀
You can manage all your translations in the Weglot dashboard, ask for a professional translator and maintain your translations if you add pages or modify your content.

![Dashboard translations](https://dev-to-uploads.s3.amazonaws.com/i/8qpkb6td1wo1nrpjmf67.png)

## What's next ?

- You can work on your front-end
- Improve your translation fields in the Weglot dashboard
- Request another tutorial with another technology

&nbsp;

👋 By the way, my repository is available on [GitHub](https://github.com/LouisBertin/hugo-cms) !