Multilingual website with Gatsby and Contentful - Part 3

louisbertin

Louis Bertin

Posted on November 30, 2019

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 !

šŸ’– šŸ’Ŗ šŸ™… šŸš©
louisbertin
Louis Bertin

Posted on November 30, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related