DEV Community

Cover image for Multilingual website with Gatsby and Contentful - Part 3
Louis Bertin
Louis Bertin

Posted on • Updated on


Multilingual website with Gatsby and Contentful - Part 3

Final part, the deployment! 🚀

I'm going to use Netlify because I really appreciate the service, their UI and their features


  • My previous tutorials works
  • Or, you have a Gatsby project who runs locally

🚨 Your project should be hosted on a version-control platform like Github, Gitlab or Bitbucket.

Few steps before going online

  • create an .env file at your project root repository
  • add your Contentful credentials and require the dotenv package at the top
Enter fullscreen mode Exit fullscreen mode
  • replace your credentials in your gatsby-config.js
  path: `.env`,

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@louisbertin`,
  plugins: [
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      resolve: `gatsby-plugin-intl`,
      options: {
        // language JSON resource path
        path: `${__dirname}/src/intl`,
        // supported language
        languages: [`en`, `fr`],
        // language file path
        defaultLanguage: `en`,
        // option to redirect to `/en` when connecting `/`
        redirect: true,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit:
    // `gatsby-plugin-offline`,

Enter fullscreen mode Exit fullscreen mode

Netlify setup

  • Create your account on Netlify
  • Then, log you in and click on "New site from Git"
  • Pick your repository with your prefered platform
  • Personally, I'm using Github. I have to click on "Configure Netlify on Github". After the redirection you have to choose if you prefer to give all access or restrict to a few repositories.
  • You can go back to Netlify and select your repository
  • Use the master branch, gatsby build command line and public/ folder at the configuration step
  • ⚠️ Click on "Show advanced" and add your Contentful environment variables based on your .env values Environment variables
  • If everything's good.. click on "Deploy site"! 🚀

Wait a little and Netlify give you an url to access your website, this is mine :

By the way, your multilingual website reach the 100 score on Google Pagespeed 😎
Google score

What can you do after ?

  • You can add your own domain name
  • You can add a form Netlify Forms or FormSpree
  • Finalize your blog! You only have a demo app!

👋 By the way, my repository is still available on Github !

Top comments (6)

dinhhuyams profile image

Do you have the repo?

louisbertin profile image
Louis Bertin

Of course!
Juste here :

rafaelmouradev profile image

You can show up with printscreens how you setup your CMS(contentful)
Its would save my life

louisbertin profile image
Louis Bertin

Sorry for the late answer!

First, you should create a Content model :

Content model

Then, you can create a Content item :
Content item

Finally you can fill up your fields with content and don't forget to enable multiple locales on the right side 🙂 :

Content fields

musicformellons profile image

I have a similar setup. It works, but when I alter the languages JSON it does not Hot Reload. Is this the same in your setup?

louisbertin profile image
Louis Bertin


Yes, you have to re-run your project with gatsby develop to see your changes 🙂