Static multi-language personal site with Gatsby, DatoCMS and Netlify

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:

Administrative Area

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.

Enable localization on bio field

Now contents will show a tab for each new locale. Fields without localization will be the same for all languages.

the

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:

Lorezz/datocms-gatsby-portfolio-2

While a working example is hosted here.