Using Hugo as a static website generator, the content is decoupled from the theme. The website's content is written in Markdown inside the /content/ directory. The current theme is chimp-hugo.
The main content which needs to be translated is the website's content files. The most important is the /content/<language>/_index.md. It's the website landing page, therefore it is a priority to translate this file.
When it's translated, important pages are those located in directories other than /content/<language>/blog/.
If you want, you can translate blog posts (located inside /content/<language>/blog/). Technical posts (e.g. development updates) don't really need to be translated. They're hard to translate, and interested people are very likely to understand English anyway.
Finally, a few words/sentences are located inside the theme's /i18n/ folder. It's where sentences like "[n] minutes to read" are translated. There isn't much work there, but it's worth having a look in case translations are missing.
Make sure you selected the right branch before making changes!
The easy way is to create and edit files directly inside GitHub. It's easy, but it's not the recommended way.
A better solution would be to download the repository on your computer and edit the files directly. However, it would require you to have (and understand) git installed.
The best way would be to clone the repository on your computer and test in real-time with Hugo. For informations about installing Hugo, visit Hugo's documentation.
To see your translations in real time, use hugo server -D (-D builds draft pages).
After cloning the repository, you will need to run
npm installinside the theme's directory.
The general idea if to translate content that makes sense. However, content files are made of two parts, and you will find a handful of different things inside it, so you need to know a few details.
The first one, on top between the pair of ---, is the Front Matter formatted in YAML. If >, >-, | or |- is used before defining a text, make sure you keep it, and keep the text structure similar (new lines kept and at the same place).
The second part, after the second ---, is the page's content written in Markdown.
Sometimes, you will find Shortcodes. You can recognize them by their {{< … >}} structure. Make sure you only translate the values defined inside (tip: {{< name key="value" key="value" key="value" >}})
Let's look at examples of shortcodes:
-
{{< youtube id="_LYsnmRmhA8?start=3570" title="My part of the Pépite Starter demo day video" >}}Here, you only need to translate the
title.idis the video unique identifier, so you shouldn't touchit. In French, you would have:{{< youtube id="_LYsnmRmhA8?start=3570" title="Mon passage dans la vidéo du \"*Demo Day*\" Pépite Starter" >}} -
{{< figure src="https://res.cloudinary.com/monki-projects/image/upload/f_auto,w_1024/v1617994923/website/en/uploads/articles/our-new-website-with-dark-mode/header-old" title="Old header (light mode only)" >}}srcis the image URL, so you only need to translatetitle. In French, it gives:{{< figure src="https://res.cloudinary.com/monki-projects/image/upload/f_auto,w_1024/v1617994923/website/en/uploads/articles/our-new-website-with-dark-mode/header-old" title="Ancienne en-tête (mode clair seulement)" >}}If
altis provided, you can translate it. If not, you can add it by yourself. It's a description of the picture for people who have difficulties and need to use a screen reader. Describe the image as if you were talking to a blind person. Describe useful things, and avoid meaningless details.
If you find HTML (<div>, <iframe>, etc.), generally don't touch it, or ask us if you're not sure.
To submit your changes, commit them, and then create a pull request from your language's branch to the main branch. We'll review it, ask for changes if needed, and merge it when it's ready (with automatic publishing to the website).
This will lead to conflicts in the future if different people translate at the same time, but we'll keep things simple for now.
Note: This is a Work In Progress, we'll do it soon.
To appear on the "contributors" page on the website, create a file named <first_name>-<last_name>.md inside the /content/english/contributors/ directory and its localized versions.
We know it's not very efficient 😕 We'll find a more clever way of defining contributors one day.
Use hugo new --kind contributor <language>/<contributors_dir>/<first_name>-<last_name> for each language, replacing each part with the correct value.
For example, adding an entry for "Rémi Bardon" in English and French would result to:
hugo new --kind contributor english/contributors/remi-bardon
hugo new --kind contributor french/contributeurs/remi-bardonNow, you should have skeleton files in the <language>/<contributors_dir>/ directories.
Copy the /archetypes/contributors.md file inside the directories cited before, and fill them the same way.
Since Hugo couldn't process the file, you will have to replace the title and every {{ .Date }} by the current ISO 8601 timestamp.