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 !
Oldest comments (6)
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 π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 :
Then, you can create a Content item :
Finally you can fill up your fields with content and don't forget to enable multiple locales on the right side π :
Do you have the repo?
Of course!
Juste here : github.com/LouisBertin/gatsby-cont...