This is a simple guide about how to scaffold a DatoCMS+Gatsby static site with internalization support.
This post is intended as an enhancement of the previous post Static Portfolio with Gatsby and DatoCMS
In order to make a more complete personal site from the portfolio, we fork the sample app and we add a few sections: a slideshow, a video in the home page, and a contact section with a Netlify Form for contacts.
Add locales and translations on DatoCMS
First step for localization is to add new locales in the Administrative Area. Here we’ve added Italian:
As you can see in the lower part we have now two supported languages. Once locales have been added, the next step is to identify the fields of contents that we want to translate, for example in the AboutPage we will enable localization on the title, subtitle and bio fields.
Now contents will show a tab for each new locale. Fields without localization will be the same for all languages.
Now from GraphiQL you can query contents by language:
{
ita_about: datoCmsAboutPage(locale: {eq: "it"}) {
title
subtitle
photo {
id
}
bioNode {
childMarkdownRemark {
html
}
}
slug
}
eng_about: datoCmsAboutPage(locale: {eq: "en"}) {
title
subtitle
photo {
id
}
bioNode {
childMarkdownRemark {
html
}
}
slug
}
}
This query works for single instance contents, but for multiple instances we need to filter contents:
{
allDatoCmsWork(
filter: { locale: { eq: $locale } }
sort: { fields: [position], order: ASC }
) {
edges {
node {
id
title
slug
locale
excerpt
}
}
}
}
Create pages per language
Now we have translated several types of contents: Work descriptions, About texts and the Home description, we’ve also added a Contact page with localization text, now we have to rethink the creation of pages to support different routes for different languages.
So our pages will be removed from /pages
folder and placed as templates, the new query for templates will require the locale. This is how will change the about page, that now has moved to the /templates
folder
And the creation logic will be moved into gatsby-node.js that will generate the pages per language and params.
The complete code can be found in this repository:
While a working example is hosted here.