loading...
Cover image for Multilingual website with Gatsby and Contentful - Part 3

Multilingual website with Gatsby and Contentful - Part 3

louisbertin profile image Louis Bertin Updated on ・2 min read

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
  • 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`,
  ],
}

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 !

Posted on by:

louisbertin profile

Louis Bertin

@louisbertin

Hi! A french Software Engineer, Freelancer, Writer 🇫🇷🥖 Currently thinking about my next challenge!

Discussion

pic
Editor guide
 

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

 

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

 

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?

 

Hi!

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