heymath < Blog />

Hello Blog

Publié le Mis à jour le

Hey!

Je me suis dit que ce serait bien que ce domaine serve enfin à autre chose que d’afficher mon Curriculum Vitae en moins complet.

Alors, j’ai passé une demi-journée à configurer et faire l’intégration de ce blog avec Gatsby et un starter blog. Puis j’ai écrit cet article, ce qui m’a pris nettement plus de temps !

Installation

Et voilà comment on a un blog qui tourne en local en un rien de temps :

npm i -g gatsby
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
cd blog
gatsby develop

Structure

├── .cache/
├── content/
│   ├── assets/
│   │   │── picture.jpg
│   │   └── ...
│   └── blog/
│       │── my-article/
│       │   ├── index.md
│       │   └── image-inserted-in-article.jpg
│       └── my-other-article/
│           └── index.md
├─ node_modules/
├─ public/
├─ src/
│   │── components/
│   │── pages/
│   │   │── 404.js
│   │   └── index.js
│   └── templates/
│       └── blog-post/
│           └── blog-post.js
└── static/
    │── favicon.ico
    └── robots.txt

Notre contenu est dans le dossier content/ avec les articles dans content/blog/, puis les images et autres assets dans content/assets/.

Dans content/blog/ chaque nom de dossier (et sous-dossier) correspond au slug de l’article, j’ai préféré faire un dossier par année pour éviter des conflits de slug et ne pas avoir tous les articles dans le même dossier tout simplement.

content/
└── blog/
    │── 2020/
    │   ├── my-article/
    │   │   ├── index.md
    │   │   └── image.jpg
    │   └── ...
    └── 2021/

Notre code source est dans le dossiers src/ pour les templates, composants, pages, styles, etc.

Les deux domaines sont bien séparés et on évite de mélanger les choses, c’est simple, mais j’aime beaucoup !

All inclusive

C’est très simple à faire tourner, tout est préparé pour gérer beaucoup de choses direct:

  • Syntaxe JSX de React
  • Polyfills
  • Transpiling avec support IE 9+
  • Styles globaux, css modules, inline
  • Pages écrites en markdown
  • Optimisations des images
  • Minification du HTML, CSS et JS
  • Requêter des données depuis des fichiers statiques
  • Hot Module Reload (HMR)
  • Meta HTML de base
  • Warning des imports et variables inutilisés
  • ...

Plugins everywhere

C’est bien d’avoir un premier rendu fonctionnel très vite, mais je trouve ça aussi un peu déroutant de voir autant de configuration et de plugins qu’on ne maîtrise pas. Du coup c’est parfois difficile de savoir qui fait quoi comment ...

Par exemple, ci-dessous la liste des plugins après que j’ai fait un petit nettoyage. Il y a des choses très simples à comprendre et d’autres plus “mystiques” :

// gatsby-config.js
{
    plugins: [
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                path: `${__dirname}/content/blog`,
                name: `blog`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                path: `${__dirname}/content/assets`,
                name: `assets`,
            },
        },
        {
            resolve: `gatsby-transformer-remark`,
            options: {
                plugins: [
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            maxWidth: 720,
                        },
                    },
                    {
                        resolve: `gatsby-remark-responsive-iframe`,
                        options: {
                            wrapperStyle: `margin-bottom: 2.4rem`,
                        },
                    },
                    `gatsby-remark-prismjs`,
                    `gatsby-remark-copy-linked-files`,
                ],
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                trackingId: `UA-********-*`,
            },
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `Heymath`,
                short_name: `Heymath`,
                start_url: `/`,
                background_color: `#1c1c1c`,
                theme_color: `#62788f`,
                display: `minimal-ui`,
                icon: `content/assets/profile-pic.jpg`,
            },
        },
        `gatsby-plugin-react-helmet`,
        // Enables Progressive Web App + Offline functionality
        // To learn more, visit: https://gatsby.dev/offline
        // `gatsby-plugin-offline`,
    ],
}

Plugins suck?

D’ailleurs, je me suis dit que le plugin le plus mystérieux en termes de nom c’était probablement gatsby-remark-smartypants, du coup je suis allé voir ce que c’est :

Replaces "dumb" punctuation marks with “smart” punctuation marks using the retext-smartypants plugin. — gatsby-remark-smartypants

'He said, "A \'simple\' english sentence. . ."'
// Yields
He said, “A ‘simple’ english sentence…”

Ça remplace donc les apostrophes et guillemets "basiques" par des plus “jolis”.

C’est sympa car c’est une tâche automatisée, mais est-ce que ça en vaut vraiment le coup ? Un énième plugin qui se glisse dans la chaîne, qui tourne en arrière-plan, qu’on oublie, et si jamais il déraille, est-ce que tout déraille ?

J’ai l’impression qu’à trop accumuler de plugins, on peut finir par créer une machine infernale, déjà que Gatsby nous abstrait beaucoup de choses, je me dis autant garder uniquement ce qui me semble vraiment utile.

J’ai retiré le plugin, je fais mes “jolies” apostrophes moi-même et je peux même en écrire des "basiques" si j’ai envie.

Apostrophes : alt + ' et alt + shift + '

Guillemets : alt + " et alt + shit + "

No, plugins rock

Code blocks styles

Globalement, je trouve quand même le boostrap avec les plugins proposés par Gatsby très intéressants, par exemple pour que les snippets de code écrits dans les fichiers Markdown s’affichent de toute beauté, il m’a suffit de rajouter :

// gatsby-browser.js
import "prism-themes/themes/prism-atom-dark.css";

Et ça, je trouve que ça vaut vraiment le coup :) Le fait de pouvoir écrire du Markdown très simple qui s’affiche ensuite en une page HTML stylisée, sans me casser la tête avec une config de la mort, c’est vraiment ce qui m’a donnée envie de tester Gatsby.

Sitemap

J’ai rajouté un plugin, très simple à utiliser pour générer le sitemap du site. Ça rajoute automatiquement toutes les urls des pages générées par Gatsby dans un fichier sitemap.xml :

// gatsby-config.js
{
    siteMetadata: {
        siteUrl: `https://mon-site.fr`,
    },
    plugins: [`gatsby-plugin-sitemap`],
}

NB: ne pas oublier de rajouter votre siteUrl qui est nécessaire pour ce plugin.

Et pour changer les changefreq et priority par défaut, ce n’est pas sorcier avec la méthode serialize. On peut faire notre propre logique en se basant sur le path des pages :

// gatsby-config.js
{
    siteMetadata: {
        siteUrl: `https://mathieudutto.fr`,
    },
    plugins: [
        {
            resolve: `gatsby-plugin-sitemap`,
            options: {
                createLinkInHead: false,
                serialize: ({ site, allSitePage }) => {
                    return allSitePage.edges.map(({ node }) => {
                        const isHomePage = node.path === '/';
                        return {
                            url: `${site.siteMetadata.siteUrl}${node.path}`,
                            changefreq: isHomePage ? `weekly` : `monthly`,
                            priority: isHomePage ? 1.0 : 0.5,
                        };
                    });
                },
            },
        },
    ],
}

1990’s style

Je suis assez surpris que par défaut les styles soient en attributs HTML. Est-ce pour garder les choses simples dans ce boostrap ou est-ce considéré comme une bonne pratique (ou non-mauvaise pratique) d’avoir tous les styles comme cela ?

// src/components/component.js
export function Component({ title }) {
    return (
        <div style={{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
        }}>
            {title}
        </div>
    );
}

J’ai préféré changer avec un fichier CSS global qui pose les resets CSS et bases du site : il suffit d’importer les fichiers CSS dans gatsby-browser.js

// gatsby-browser.js
import "./src/global.css";
/* src/global.css */
html {
    font-size: 62.5%;
    font-family: Georgia, sans-serif;
    color: #e6e6e6;
    background-color: #1c1c1c;
}

Et du CSS Modules pour les composants et les templates : il suffit de nommer les fichiers en *.module.css, puis de les importer dans les fichiers JavaScript correspondant.

Tout était déjà configuré pour que ça fonctionne.

// src/components/component.js
import style from "./component.module.css";

export function Component({ title }) {
    return (
        <div className={style.component}>
            {title}
        </div>
    );
}
/* src/components/component.module.css */
.component {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

Build

Une fois le blog personnalisé, pour tester la version de production en local, c’est très simple :

gatsby build
gatsby serve

Le site est ensuite accessible sur http://localhost:9000/.

Et si comme moi, vous vous demandiez à quoi ressemble le build généré, voici un aperçu :

├── 404/
│   └── index.html
├── 2020/
│   └── hello-blog/
│       └── index.html
├─ icons/
├─ page-data/
├─ static/
│   │── 95f467976ce1b77469cdbae2e59ae4be/
│   │   │── 4ec73/
│   │   │   └── image-de-l-article-hello-world.jpg
│   │   │── 7cc5e/
│   │   │   └── image-de-l-article-hello-world.jpg
│   │   └── 158ba/
│   │       └── image-de-l-article-hello-world.jpg
│   │── d/
│   │   │── 777588279.json
│   │   └── 1925653911.json
│   │── font-name-900-26d42c9428780e545a540bbb50c84bce.woff
│   └── font-name-900-58cd789700850375b834e8b6776002eb.woff2
│── 404.html
│── app-bdf625841d7ab870bdfb.js
│── chunk-map.json
│── component---src-pages-404-js-48db5f7df6e398ccd855.js
│── favicon.ico
│── framework-a74044b4add31353c05b.js
│── index.html
│── manifest.webmanifest
│── robots.txt
│── sitemap.xml
│── styles.7e3627916bad6f666583.css
│── styles-6b8affa5cc22cb60670e.js
│── webpack.stats.json
└── webpack-runtime-3d8034e8c692b7a1b3c4.js

NB : je ne liste pas tous les fichiers des dossiers, mais juste de quoi comprendre ce que c’est et à quoi ça ressemble.

Donc un slug dans l’url égale le chemin vers un dossier, puis ça nous affiche le contenu du index.html de ce dossier. Chaque page HTML a son contenu qui a été récupéré grâces aux requêtes GraphQL, tous les styles et scripts nécessaires au fonctionnement de la page ont été insérés, (le script de Google Analytics est inséré dans chaque page par exemple), etc.

Bref, de simples fichiers statiques calculés et générés par Gatsby avec plein d’optimisations de performances au passage.

Conclusion

Gatsby et le starter blog que j’ai utilisé me semblent bien adaptés pour faire un blog simple à développer, à écrire et à déployer :

  • Un env. de développement avec toutes les fonctionnalités
  • Un code écrit en React simple / basique
  • Le contenu source est rédigé en Markdown
  • Le site généré est statique donc déployable facilement
  • Un site rapide et optimisé automatiquement
  • Beaucoup de plugins à disposition

Le seul petit hic pour moi, c’est GraphQL, mais je pense que ce n’est pas aussi compliqué que la première impression que j’en ai eu, c’est surtout que la syntaxe est particulière.
En plus, Gatsby lance automatiquement un serveur avec une interface pour jouer et tester les requêtes GraphQL à l’adresse http://localhost:8000/___graphql.

Sources


Voilà, c’est la fin du premier article de ce blog, qui est aussi mon tout premier article.
Je ne suis pas sûr qu’il soit d’une grande qualité ni d’une grande utilité, mais ça m’a permis de me faire la main et de publier un site perso avec du “vrai” contenu.

J’espère que je vais réussir à poster des articles régulièrement et qu’ils seront un minimum intéressants et utiles.


Mathieu Dutto / développeur frontend chez Evaneos. Je m’intéresse aux performances web et à la maintenabilité du code. Vous pouvez me retrouver sur Twitter et GitHub.

Mathieu Dutto © 2020, built with Gatsby