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

Prerequisite

  • 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
CONTENTFUL_SPACE_ID=dbveb9zaujav
CONTENTFUL_ACCESS_TOKEN=StN-7u3ijFP5IoDwg9-fxP4HdbNiQwmVSRnrOO11IUY
Enter fullscreen mode Exit fullscreen mode
  • replace your credentials in your gatsby-config.js
require("dotenv").config({
  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: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      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: https://gatsby.dev/offline
    // `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 : https://practical-villani-66d629.netlify.com/

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)

Collapse
 
dinhhuyams profile image
TrinhDinhHuy

Do you have the repo?

Collapse
 
louisbertin profile image
Louis Bertin

Of course!
Juste here : github.com/LouisBertin/gatsby-cont...

Collapse
 
rafaelmouradev profile image
Rafael.js

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

Collapse
 
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

Collapse
 
musicformellons profile image
musicformellons

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?

Collapse
 
louisbertin profile image
Louis Bertin

Hi!

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