Multilingual website with Gatsby and Contentful - Part 3
Louis Bertin
Posted on November 30, 2019
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`,
],
}
- If you have to deal with multiple environments, the dedicated topic on GatsbyJS website explains everything Environment Variables - GatsbyJS
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 andpublic/
folder at the configuration step - ā ļø Click on "Show advanced" and add your Contentful environment variables based on your
.env
values - 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 š
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 !
š šŖ š
š©
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.