Utiliser Google Docs pour rédiger le contenu de son site Gatsby

24 septembre 2020

3 min

Gatsby est un framework permettant de créer des sites avec ReactJS.

Il existe une multitude de solutions pour rédiger et stocker le contenu de son site Gatsby.

Le plus commun est d’utiliser des fichiers markdown accolés au code source du projet.

L’inconvénient majeur de cette méthode est qu’elle nécessite des connaissances techniques et ne permettra pas facilement à une personne extérieure à collaborer à l’édition du contenu.

Aussi pour certaines raisons, on préfère ne pas polluer l’historique Git de son projet avec le contenu .

Ce sont les raisons pour lesquelles de nombreux CMS ont vu le jour.

La plupart ont des plans gratuits mais qui sont vite limitants :

Espace disponible limité
Nombre d’images restreints
Nombre de collaborateur limité
Internationalisation

Pourquoi utiliser Google Docs

Gratuit: Si vous ne stockez pas de fichiers très volumineux dans votre Google Drive, vous n’aurez jamais rien à débourser pour utiliser le service.
Stockage illimité: Les fichiers Google Docs ne sont pas décomptés de l'espace de stockage Google Drive, même s’ils sont remplis de photos. Vous ne risquez pas de dépasser votre quotas.
Hors ligne: Editez vos documents n’importe quand, même sans connexion internet
Collaboration: Plusieurs personnes peuvent éditer un même document en temps réel
Correcteur orthographique
Ecriture à la voix

Utilisation

Téléchargement

Nous devons tout d’abord télécharger le paquet dans le dépôt NPM.

yarn add gatsby-source-google-docs gatsby-transformer-remark gatsby-remark-images

Afin de transformer en HTML le contenu des documents Google Docs, qui a été généré en markdown par le plugin gatsby-source-google-docs, nous utiliserons le plugin gatsby-transformer-remark. Nous pourrons ainsi profiter du large panel de plugins remark développés par la communauté de Gatsby afin d’enrichir le contenu HTML de nos pages.

Pour rendre les images "responsives" et afficher une version floue de l’image en attendant le chargement du format optimisé, nous utiliserons le plugin gatsby-remark-images. Si vous ne souhaitez pas utiliser d’images dans vos documents, vous pouvez vous passer de ce plugin.

Configuration

Nous devons ensuite ajouter les plugins précédemment installés dans notre fichier de configuration gatsby-config.js.

module.exports = {
    plugins: [
        {
            resolve: "gatsby-source-google-docs",
            options: {
                folder: "GOOGLE_DRIVE_FOLDER_ID"
            }
        },
        {
            resolve: "gatsby-transformer-remark",
            options: {
                plugins: ["gatsby-remark-images"],
            },
        },
    ],
}

Vous pourrez retrouver l’identifiant de votre dossier Google Drive dans l’url

https://drive.google.com/drive/folders/GOOGLE_DRIVE_FOLDER_ID

Génération du token

Nous devons générer un Google OAuth 2.0 token pour permettre à notre application d’accéder aux contenu des documents Google Docs mais aussi aux métadonnées des documents Google Drive.

Générer un tel token n’est pas une opération limpide. Pour faciliter la tâche, gatsby-source-google-docs met à disposition un script nodeJS.

Ouvrez un terminal à la racine de votre projet

gatsby-source-google-docs-token

Suivez les instructions. Le script va vous guider et générer trois variables d’environnement dans vos fichiers .env.

GOOGLE_OAUTH_CLIENT_ID=2...m.apps.googleusercontent.com
GOOGLE_OAUTH_CLIENT_SECRET=Q...axL
GOOGLE_DOCS_TOKEN={"access_token":"ya...J0","refresh_token":"1..mE","scope":"https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/documents.readonly","token_type":"Bearer","expiry_date":1598284554759}

Si le fichier .env n’existe pas, il sera créé. Si vous avez plusieurs fichiers pour différents environnement, les variables seront ajoutés à la fin de chaque fichier.

Fonctionnalités

Titres

Rétrograder les titres

Textes

Vous pouvez utiliser les formatages suivants :

gras

italique

souligné

~~barré~~

^exposants_indices

Indentations

coloréfond coloré

Liens

Vous pouvez ajouter des liens externes mais aussi des liens internes.

Les URLs des liens inter-documents seront remplacées par les urls relatives à votre site.

Les URLs au format suivant seront considérés comme des URLs internes:

Pour trouver l’URL de votre document, ouvrez simplement votre document en mode édition et copiez l’URL se trouvant dans la barre d’adresse.

Je préfère personnellement enlever le /edit de la fin de mes urls même si le comportement reste le même.

Images

L’insertion d’image dans un document Google Docs est très puissante.

votre disque dur ou la mémoire interne de votre téléphone
depuis le web
Google Drive
Google Photos

Image de couverture

Pour ajouter une image de couverture, il suffit d’ajouter une image dans le "header" de la première page du document et cocher "Première page différente"

Tableaux

Vous pouvez aussi ajouter des tableaux dans vos documents.

La première ligne sera automatiquement une ligne d’en-tête dans vos pages.

Code

Pour ajouter un extrait de code, le plus simple est d’utiliser l’extension Code Blocksdisponible sur le Google Workspace Marketplace pour formater son texte dans son document et d’utiliser ensuite le plugin gatsby-remark-prismjs pour une bonne mise en forme sur vos pages.

Installation

yarn add gatsby-transformer-remark gatsby-remark-prismjs prismjs

Configuration

Dans le fichier gatsby-config.js :

module.exports = {
    plugins: [
        "gatsby-source-google-docs",
        {
            resolve: "gatsby-transformer-remark",
            options: {
                plugins: ["gatsby-remark-prismjs"],
            },
        },
    ],
}

Citations

"Ajoutez un tableau de 1 ligne 1 colonne et ajoutez-y votre citation entourée de smartquotes """

Partages

Commentaires