Forem: Louis Bertin

Vim theme + plugin manager!

Louis Bertin — Thu, 07 Jan 2021 14:57:46 +0000

I am frequently watching tech/dev youtubers (DistroTube, Luke Smith..) and I've always asked myself how they have an Atom/Vs Code/Sublime Text-like Vim editor.
I have always wanted the same things because Vim is a must have and literally changed my life (as a software engineer..). I discover new features every day and each time this blows my mind.

So, I have done some research to improve my setup and here are few steps to have a better Vim experience.

⚠️ This tutorial is for macOS, on Linux systems you just have to deal with your own package manager.

Prerequisites

Brew installed

How to pimp your Vim

1. Install Neovim

I advise you to install Neovim instead of the classic Vim. Neovim is a fork of Vim, developed in order to improve Vim.

On macOS, just install it with Brew : brew install neovim Then, you can access it with the nvim command line. Or, you can create and add an alias to your .bashrc or .zshrc : alias vim='/usr/local/bin/nvim'

2. Install Vim-plug

Vim-plug is one of the best plugin managers for Vim. It simplifies the way to install new Vim features.

First, you have to create Vim config folder if it doesn't exist : cd ~/.config/ && mkdir nvim
Then, you can install Vim-plug : sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

⚠️ Here is the command line coming from the Vim-plug repository, I advise you to get the latest one on the official repo.

3. Vim plug configuration and plugin installation

Create a Neovim config file into the Neovim config folder (~/.config/neovim/) : touch init.vim

Now we need to configure Neovim to install the Onedark.vim theme (my favorite one), you can choose another theme but this tutorial is not covering this subject.

Here is my config file with a few plugins :

onedark.vim : neovim colorscheme
lightline.vim : colorscheme for vim mode (insert, normal, etc)
vim-polyglot : to handle multiple languages

"Specify a directory for plugins"
call plug#begin('~/.config/nvim/plugged')

"Neovim theme"
Plug 'joshdick/onedark.vim'
"Lightline vim"
Plug 'itchyny/lightline.vim'
"Multiple language support"
Plug 'sheerun/vim-polyglot'

"Initialize plugin system"
call plug#end()


"Use 24-bit (true-color) mode in Vim/Neovim when outside tmux.
"If you're using tmux version 2.2 or later, you can remove the outermost $TMUX check and use tmux's 24-bit color support
"(see < http://sunaku.github.io/tmux-24bit-color.html#usage > for more information.)
if (empty($TMUX))
  if (has("nvim"))
    "For Neovim 0.1.3 and 0.1.4 < https://github.com/neovim/neovim/pull/2198 >
    let $NVIM_TUI_ENABLE_TRUE_COLOR=1
  endif
  "For Neovim > 0.1.5 and Vim > patch 7.4.1799 < https://github.com/vim/vim/commit/61be73bb0f965a895bfb064ea3e55476ac175162 >
  "Based on Vim patch 7.4.1770 (`guicolors` option) < https://github.com/vim/vim/commit/8a633e3427b47286869aa4b96f2bfc1fe65b25cd >
  " < https://github.com/neovim/neovim/wiki/Following-HEAD#20160511 >
  if (has("termguicolors"))
    set termguicolors
  endif
endif

"onedark theme"
syntax on
colorscheme onedark

Now, you just have to install your plugins, into Neovim run the following command PlugInstall a window pops up and you can see your plugins installed.

Restart Neovim and appreciate your new theme! 🙂

4. This is just the beginning!

I have intentionally talked about a simple configuration (Keep It Simple Stupid!), but you can create your own plugin or add another one to your Vim configuration.

Ultimate translation method for static website generator in 2020 - Hugo

Louis Bertin — Mon, 06 Jul 2020 12:31:58 +0000

🇪🇸 A spanish translation written by Chema Bescos is available here : https://www.ibidemgroup.com/edu/traduccion-web-hugo/

Couple months ago, I've posted a series of posts about how to make your Gatsby website multilingual. It works but involves a lot of changes in your codebase and time to implement it.

Today I'll show you a way to translate your entire static website with 3 lines of code. Amazing, right ?

Prerequisites

I'm using Hugo, a static website generator coded in Go which I love for the speed and the simplicity. And I'm starting to like it a lot because it adheres to the KISS principle.
Netlify CMS for the back-end
Finally, a Weglot account

Hugo and Netlify setup

I advise you to follow the Hugo Quick Start, follow the steps, and, of course you can add more customization.
Once your project is working, you can push it to the cloud! 🚀

Create a Netlify account and a Github/Gitlab account to push your code. Then, check your Hugo version: hugo version and place a netlify.toml file at your project root directory.

# netlify.toml
[build]
    publish = "public"
    command = "hugo --gc --minify"

[context.production.environment]
    HUGO_VERSION = "YOUR_HUGO_VERSION"
    HUGO_ENV = "production"
    HUGO_ENABLEGITINFO = "true"

Now you have everything to deploy your web app. Hugo documentation has a guide to deploy to Netlify : https://gohugo.io/hosting-and-deployment/hosting-on-netlify/

Netlify CMS

🚨 I advise you to use Netlify DNS instead of your registrar. Faster to implement and works smoothly with Weglot.

Netlify CMS documentation is pretty straightforward : https://www.netlifycms.org/docs/hugo/#getting-started-with-netlify-cms.
Follow the steps and don't forget to create the admin folder and to enable Identity & Git Gateway in Netlify. This is not too much highlighted in the documentation.

⚠️ Personally I choose Invite only in Netlify registration preferences and I didn't enable the Netlify Identity Widget. In that case, when you invite users in the Identity tab of your Netlify project, it generates an email with a registration link like this yourdomain.com?auth_token=YOUR_TOKEN and it doesn't work. Instead, change the URL to yourdomain.com/admin?auth_token=YOUR_TOKEN and you're automatically redirected 😉

Now you can access your admin area and create posts.

Weglot configuration

🚨 Weglot provided a DNS method to implement the translation. It works with a proxy to build your translated website with a server-side rendering. Much better for SEO optimization!

First, create an account here : Register | Weglot
Then, create a project and choose Other as a project technology

After, register your domain name and your languages

At the next step, Weglot gives you the DNS settings you have to configure, click on check DNS status to validate your configuration. Here is the example with Netlify DNS.

You are almost done! Weglot is building your other domain. When they are ready, you can click on them.

Congratulations! Your website is automatically translated with no effort 🥳

Language switcher

Weglot gives you a few lines of code at the last step to automatically switch between language. You don't have to code it yourself! Weglot also provides a way to fully customize it.

Here is the example for three languages and three domains :

<link rel="alternate" hreflang="en" href="https://multilingual-hugo.com">
<link rel="alternate" hreflang="fr" href="https://fr.multilingual-hugo.com">
<link rel="alternate" hreflang="es" href="https://es.multilingual-hugo.com">
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'YOUR_WEGLOT_API_KEY'
    });
</script>

You should see the language switcher on the bottom right as here : https://multilingual-hugo.com/

In my case I needed to override my theme templates to put the HTML code above. You can find a guide here to do the same thing.

Conclusion

That's it, you have a multilingual website built in a few minutes with a language switcher fully customizable 🚀
You can manage all your translations in the Weglot dashboard, ask for a professional translator and maintain your translations if you add pages or modify your content.

What's next ?

You can work on your front-end
Improve your translation fields in the Weglot dashboard
Request another tutorial with another technology

👋 By the way, my repository is available on GitHub !

Fastest way to setup the actual state of the art VPN for cheap

Louis Bertin — Fri, 03 Apr 2020 17:12:17 +0000

In this tutorial, we are going to see how to install Wireguard on a VPS with a few command lines!

Step 1️⃣

You have to create a VPS instance to setup your VPN. I can advise you
Scaleway, Vultr or Linode because their prices are cheap.
Don't forget to check what kind of IP they have : all these providers have multiple geographical zones available to create a VPS instance.

I advise you to use Debian or Ubuntu image because we are using PiVPN to install Wireguard and it's optimized for debian based distributions.

Personally, I'm creating a DEV1-S VPS instance located in France, with a Debian Buster image with a volume of 20 GB. Add your ssh key at the end of the process.

➡️ Click on the green button to build your instance!

Step 2️⃣

To connect to your VPS, use the following command line : ssh root@YOUR_VPS_IP

For me, it was ssh root@51.15.244.227 and upgrade your packages : sudo apt update -y && sudo apt upgrade -y and reboot the server sudo reboot

To secure your VPS server, I advise you to create an user account, setup your SSH key and disable password authentication to the server. I found some useful resources on the internet about these steps : Disable SSH passwords on linux, Create sudo user on Debian, Disable the root access and Change default SSH port

Now, it's the right time to install Wireguard and PiVPN! First of all, I've got some errors during the installation with iptables-persistent package : now I have to run sudo apt install netfilter-persistent.
Sometimes, it can happen that you have to reboot your server to activate the changes.
Then, go to your user folder, and the command line to download and launch PiVPN installer :

curl -L https://install.pivpn.io > pivpn.sh
sudo bash pivpn.sh

For the first answer, select your user and then Wireguard.

For the DNS selection : Quad9 or Cloudfare depending on your needs. You can find some article about them over the internet. Personally, I'm using Cloudflare for his speed.
You can respond the default answer to all the following questions except if you want to have a specific configuration

➡️ Reboot your system and tada! 🎉

Step 3️⃣

Now the final step is to create and configure the client :

The config file is located in your home folder, you can copy the configuration (as you can see above) and paste it in the client app of your OS

And now it has to works correctly! 🍻

Wireguard client for macOS

Download all Flickr photos of a user with only 20 lines of Python 🐍

Louis Bertin — Sun, 12 Jan 2020 15:11:14 +0000

Introduction

Today, a friend wanted to download all photos of a photograph he likes a lot on Flickr.. but that's a long and a boring task.. especially when the user has many photos.

So, I just asking myself how I can automate this task.. and Python is the answer!

Prerequisite

Python and Pip (the higher is better!)
venv : optional, but I advise you to use it.

Let's jump into the code!

At the root of your working directory run the following command to install flickr_api as a dependency

pip install flickr_api

Next you have to create an account on Flickr and log you in to get your api_key and your api_secret with the following link
Then use this code and replace API_KEY, API_SECRET and USER_NAME with your credentials 🙂

import os
import flickr_api

flickr_api.set_keys(api_key = 'API_KEY', api_secret = 'API_SECRET')
os.makedirs(os.path.join(os.getcwd(), "photos"), exist_ok=True)

user = flickr_api.Person.findByUserName("USER_NAME")
pages_nb = user.getPublicPhotos().info.pages
total = user.getPublicPhotos().info.total
current = 0

for page_nb in range(1, pages_nb+1):
    for index, photo in enumerate(user.getPublicPhotos(page=page_nb)):
        sizes = photo.getSizes()
        biggest_size = list(sizes.keys())[-1]
        filename = photo.title.replace("/", "-") + "_" + photo.id

        current += 1
        try:
            print(f"{current}/{total}", filename)
            photo.save(os.path.join(os.getcwd(), "photos", filename), size_label = biggest_size)
        except Exception as e:
            print(e)

Multilingual website with Gatsby and Contentful - Part 3

Louis Bertin — Sat, 30 Nov 2019 15:20:25 +0000

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 and public/ 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 !

Multilingual website with Gatsby and Contentful - Part 2

Louis Bertin — Sun, 24 Nov 2019 12:38:00 +0000

⚠️ Sometimes, it happens that graphQL don't find your intl data located in intl , run the command gatsby clean to remove the cache 🙂

Prerequisite

The first part of the tutorial have to work! We previously linked Gatsby and Contentful together 🙂

Multilingual website with Gatsby and Contentful - Part 1

Louis Bertin ・ Nov 9 '19

#gatsby #javascript #react #jamstack

React-intl setup

First, you have to install the plugin based on react-intl which offers you to translate your website.

⚠️ I'm French so, I define the other locale to fr put your own instead!

Install your plugin : npm install --save gatsby-plugin-intl
Now, configure your config file : gatsby-config.js

{
    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,
    },
},

You can create the intl folder into the src and create two files corresponding to your locales

// src/intl/en.json
{
    "title": "Gatsby English",
    "description": "Project description",
    "author": "@louisbertin",
    "hello": "Hi people!",
    "welcome": "Welcome to your new Gatsby site.",
    "title_page2": "Page two",
    "hello_page2": "Hi from the second page",
    "go_page2": "Go to page 2",
    "welcome_page2": "Welcome to page 2",
    "go_back": "Go back to the homepage",
    "footer_build": "Built with",
    "notfound": {
        "header": "NOT FOUND",
        "description": "You just hit a route that doesn't exist... the sadness."
    }
}

// src/intl/fr.json
{
    "title": "Gatsby French",
    "description": "Project description",
    "author": "@louisbertin",
    "hello": "Salut les gens!",
    "welcome": "Bienvenue sur votre nouveau site Gatsby",
    "title_page2": "Page deux",
    "hello_page2": "Salut depuis la seconde page",
    "go_page2": "Aller à la page 2",
    "welcome_page2": "Bienvenue sur la page 2",
    "go_back": "Retour à la page d'accueil",
    "footer_build": "Construit avec",
    "notfound": {
        "header": "NOT FOUND",
        "description": "Vous voulez accéder à une route qui n'existe pas..."
    }
}

Build multilingual blog

To use all keys located in intl folder you have to change all your react components and pages to work with react-intl. I'll give you an example with the index page.

// pages/index.js
import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

const IndexPage = ({ data, intl }) => (
    <Layout>
        <SEO title={intl.formatMessage({ id: "title" })} />
        <h1>
          <FormattedMessage id="hello" />
        </h1>
        <p>
          <FormattedMessage id="welcome" />
        </p>

        <br />
        <Link to="/page-2">
          <FormattedMessage id="go_page2" />
        </Link>
      </Layout>
)

export const query = graphql `
      query ContentFulPosts($locale: String) {
        allContentfulPost(filter: { node_locale: { eq: $locale } }) {
          nodes {
            contentful_id
            title
            path
          }
        }
      }
`

export default injectIntl(IndexPage)

and with a component page 🙂

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"

import { injectIntl, FormattedMessage } from "gatsby-plugin-intl"

const Layout = ({ children, intl }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0px 1.0875rem 1.45rem`,
          paddingTop: 0,
        }}
      >
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, <FormattedMessage id="footer_build" />{" "}
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default injectIntl(Layout)

Before retrieving the data, you have to create the blog post template. This template has to fetch the current locale to get the correct data.

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"

const BlogPost = ({ pageContext, data }) => (
    <Layout>
        <h1>{data.contentfulPost.title}</h1>
      </Layout>
)

export const query = graphql `
      query ContentFulPost($slug: String, $locale: String) {
        contentfulPost(path: { eq: $slug }, node_locale: { eq: $locale }) {
          path
          node_locale
          title
        }
      }
    `

export default BlogPost

Now, it's time to use gatsby-node file to generate posts pages for each locale!

const path = require(`path`)

// pages locale
exports.onCreatePage = ({ page, actions }) => {
    const { createPage, deletePage } = actions
    deletePage(page)
    // You can access the variable "locale" in your page queries now
    createPage({
        ...page,
        context: {
            ...page.context,
            locale: page.context.intl.language,
        },
    })
}

// blog posts
exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions
    const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
    // Query for markdown nodes to use in creating pages.
    // You can query for whatever data you want to create pages for e.g.
    // products, portfolio items, landing pages, etc.
    // Variables can be added as the second function parameter
    return graphql(
        `
          query MyQuery {
            allContentfulPost {
              edges {
                node {
                  path
                }
              }
            }
          }
        `
    ).then(result => {
        if(result.errors) {
            throw result.errors
        }

        // Create blog post pages.
        result.data.allContentfulPost.edges.forEach(edge => {
            const path = edge.node.path

            createPage({
                // Path for this page — required
                path: path,
                component: blogPostTemplate,
                context: {
                    slug: path,
                },
            })
        })
    })
}

Then, update graphQL query on index to display the right post

export const query = graphql `
      query ContentFulPosts($locale: String) {
        allContentfulPost(filter: { node_locale: { eq: $locale } }) {
          nodes {
            contentful_id
            title
            path
          }
        }
      }

Finally, you can access your posts and multilingual seems to work.. but to test everything we need to have a language switcher! So, create a component called Language.js and place it in the components folder of your project

import React from "react"
import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"

const languageName = {
  en: "English",
  fr: "Français",
}

const Language = () => (
  <div>
    <IntlContextConsumer>
      {({ languages, language: currentLocale }) =>
        languages.map(language => (
          <a
            key={language}
            onClick={() => changeLocale(language)}
            style={{
              color: currentLocale === language ? `yellow` : `white`,
              margin: 10,
              textDecoration: `underline`,
              cursor: `pointer`,
            }}
          >
            {languageName[language]}
          </a>
        ))
      }
    </IntlContextConsumer>
  </div>
)

export default Language

You can call the language component in the Header component for example and everything should work!

In the next post

In the next post I will explain how to deploy your multilingual blog on Netlify!

By the way, you can find my code on Github!

How to install Postgres on OSX in 2K19 with 🍺

Louis Bertin — Wed, 13 Nov 2019 17:10:51 +0000

Prerequisites

You have to be on OSX 🍎
Homebrew installed as dependency manager 🍺

Story

This morning I was working on a project that I have to install Postgres. I was thinking to myself that it was a really easy thing and that it will take me 3 minutes (the time to run brew install postgres and go grab a cup of tea in the open space)

BUT, it wasn't the case and I'm just facing with a weird issue. That's why I'm writing this article, maybe this could help someone and save your time.

Install Postgres on OSX with Homebrew

First, you have to run this brew command line brew install postgres
Just verify that the installation is successful postgres --version

Now, you can run the command line to start Postgres pg_ctl -D /usr/local/var/postgres start
If it works, you're lucky! But if you have FATAL: database files are incompatible with server you're on the right post!

Solution

The solution was to run brew postgresql-upgrade-database to upgrade your database files to the 11 version. You can have old database files who was initially created with the version 10 of Postgres. That's why you have an error.

And.. then?

Now you can rerun the command pg_ctl -D /usr/local/var/postgres start and it should work like a charm 🎉

You can also configure your Postgres! I have found a useful link who can help you : https://www.codementor.io/engineerapart/getting-started-with-postgresql-on-mac-osx-are8jcopb#iv-popular-guis-for-postgresql-on-macosx

Multilingual website with Gatsby and Contentful - Part 1

Louis Bertin — Sat, 09 Nov 2019 08:43:31 +0000

Prerequisites

You have to install NodeJS on your device. After installation, npm -v should work.

Installation

It's better to install official Gastby CLI : npm install -g gatsby-cli
Project creation :

gatsby new gatsby-site
cd gatsby-site

Finally, use this command line to run your project : gatsby develop , your website should be available at this following URL : http://localhost:8000

Contentful

In this tutorial, I have chosen Contentful, he had the advantage to be free when you want to build a classic website. You can view pricing details on the official website.

Next, create an account and create your first content model.
For this tutorial, here is the one I choose to build. He's pretty simple

    {
      "name": "Post",
      "description": "",
      "displayField": "title",
      "fields": [
        {
          "id": "title",
          "name": "Title",
          "type": "Symbol",
          "localized": true,
        },
        {
          "id": "content",
          "name": "Content",
          "type": "RichText",
          "localized": true,
        }
      ],

⚠️I have enabled this localization, this will allow me to deal with different languages in the next post.

Next, create a classic post and don't forget to enable the translation by creating a version of your post for each language.

Congratulations! Your post has been created 🎉

Connect Gastby & Contenful

First, you have to install the official Contentful plugin : https://www.gatsbyjs.org/packages/gatsby-source-contentful/?=contentful. I give you the command line if you don't want to read the documentation 😉 : npm install --save gatsby-source-contentful
Here, you have two choices, you can use the Content Delivery API or the Preview API. After reading the Contentful documentation, the Delivery API is more appropriate.
Get your spaceId and your accessToken in the tab Settings > API Keys in Contentful back-end
Then, you have to setup the plugin in Gatsby :

    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `YOUR_SPACE_ID`,
        accessToken: `YOUR_ACCESS_TOKEN`,
      },
    },

After, try to retrieve your posts!

 import React from "react"
    import { graphql, Link } from "gatsby"

    import Layout from "../components/layout"
    import SEO from "../components/seo"

    const IndexPage = ({ data }) => (
      <Layout>
        <SEO title="Home" />
        <h1>Hi people</h1>
        <p>Welcome to my new Gatsby Website</p>

        <h2 style={{margin: 0}}>Posts</h2>
        {data.allContentfulPost.nodes.map(post => {
          return (
            <div key={post.id}>{post.title}</div>
          )
        })}
      </Layout>
    )

    export const query = graphql`
      query ContentFulPosts {
        allContentfulPost {
          nodes {
            id
            title
            node_locale
          }
        }
      }
    `
    export default IndexPage

Your posts should be displayed correctly on your index page! 😄

In the next post

In the next post I will explain how to implement multiple languages on a Gatsby website with content provided by Contentful 🙂

By the way, you can find my code on Github!

Forem: Louis Bertin

Vim theme + plugin manager!

Prerequisites

How to pimp your Vim

Ultimate translation method for static website generator in 2020 - Hugo

Today I'll show you a way to translate your entire static website with 3 lines of code. Amazing, right ?

Prerequisites

Hugo and Netlify setup

Netlify CMS

Weglot configuration

Language switcher

Conclusion

What's next ?

Fastest way to setup the actual state of the art VPN for cheap

Step 1️⃣

Step 2️⃣

Step 3️⃣

Download all Flickr photos of a user with only 20 lines of Python 🐍

Introduction

Prerequisite

Let's jump into the code!

Multilingual website with Gatsby and Contentful - Part 3

Prerequisite

Few steps before going online

Netlify setup

What can you do after ?

Multilingual website with Gatsby and Contentful - Part 2

Prerequisite

Multilingual website with Gatsby and Contentful - Part 1

Louis Bertin ・ Nov 9 '19

React-intl setup

Build multilingual blog

In the next post

How to install Postgres on OSX in 2K19 with 🍺

Prerequisites

Story

Install Postgres on OSX with Homebrew

Solution

And.. then?

Multilingual website with Gatsby and Contentful - Part 1

Prerequisites

Installation

Contentful

Connect Gastby & Contenful

In the next post