Currently, I'm in the process of developing a multilingual website using Hugo with the support of a multilingual theme called Ananke. For this project, I have added content in two different languages and configured the necessary settings in the configuration file as shown below:
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = true
In addition to that, I have defined the two languages with their respective base URLs like so:
[languages]
[languages.en]
baseURL = "https://example.com/en"
weight = 100
[languages.nl]
baseURL = "https://example.com/nl"
During the generation process by Hugo, the expected directories for each language are created successfully. However, when deploying the website and accessing the base URL example.com, no HTML content is generated at that location.
To address this issue, one solution would be to manually add an index.html file at the root of the site with a JavaScript script that redirects users based on their preferred language setting:
<!DOCTYPE html>
<html lang="en-us">
<head>
<script type="text/javascript>
var languageCookie = getCookie("preferredLanguage")
if (languageCookie) {
var language = languageCookie
} else {
var language = navigator.language || navigator.userLanguage;
}
if (language == "nl") {
window.location.href = "https://example.app/nl"
document.cookie = "preferredLanguage=nl"
}
else {
window.location.href = "https://example.app/en"
}
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
</script>
</head>
</html>
However, I am looking for a way for Hugo to automatically generate this HTML instead. Is there a method to specify a separate page or JavaScript code that is independent of the language? Any guidance on how to achieve this would be greatly appreciated.