Polyglot Tech Blog

Commencer avec le modèle Polyglot Tech Blog

Florent Tassy — Sun, 09 Jul 2023 14:00:00 +0000

Introduction

Vous avez découvert Polyglot Tech Blog et vous souhaitez l'utiliser comme base pour votre blog. Génial ! Voyons les étapes à suivre pour obtenir le code et l'adapter à vos besoins.

Obtenir le code et installer les dépendances

En premier lieu, vous avez besoin du code du modèle. Le moyen le plus simple pour ça est d'utiliser git. Allez dans le répertoire où vous souhaitez mettre les fichiers et clonez le dépôt :

git clone https://gitlab.com/florent_tassy/polyglot-tech-blog.git

Vous avez ensuite besoin d'installer les dépendances du modèle. Pour ce faire, il vous faut node et npm ou Yarn. Rendez-vous dans le répertoire nouvellement cloné et entrez :

npm ci # avec npm
yarn install --frozen-lockfile # avec Yarn

Lancer le serveur local et adaptez le modèle

Vous avez maintenant tout ce qu'il vous faut. Vous pouvez démarrer le serveur de développement pour voir une version locale et rafraîchie automatiquement de votre code. Depuis le répertoire du modèle, exécutez :

npm run dev # avec npm
yarn dev # avec Yarn

Vous pouvez maintenant ouvrir votre navigateur web favori, aller sur localhost:8080, et voir le résultat en temps réel !

Adapter le contenu

La première personnalisation que vous voudrez apporter est certainement le changement du contenu. Voici les concepts à connaître pour réaliser ceci :

Le contenu est dans le répertoire "src".
Les pages statiques sont écrites en HTML avec les portions de modèle en Nunjucks, mais sachez qu'Eleventy propose beaucoup d'autres langages.
Les articles de blog sont écrits en Markdown, mais là aussi, d'autres langages sont possibles.
Les fichiers au premier niveau dans "src" sont essentiellement des fichiers de configuration et des fichiers techniques. Vous pouvez changer le contenu de index.html et 404.html, mais ces fichiers ne sont pas censés être affichés, sauf si la redirection vers la langue locale ou la langue par défaut échouent. Vous devrez aussi ajouter / modifier vos fichiers de déploiement.
Vous devez modifier le fichier src > data > data.json avec vos informations. Voici quelques commentaires utiles à ce sujet :

{

    // Le nom complet de la 
    // personne écrivant le blog
    "author": "Florent Tassy",

    // Optionnel, mais un plus pour 
    // le web sémantique : l'URI 
    // unique qui identifie la 
    // personne écrivant le blog. 
    // Évitez d'utiliser une URL 
    // du blog au risque d'obtenir 
    // des associations d'ID bizarres
    "authorUri": "https://gitlab.com/florent_tassy",

    // Les codes BCP 47 des langues 
    // utilisées par le blog. La 
    // première est la langue par 
    // défaut. Il en faut au moins 
    // une.
    "languages": [ "en", "fr" ],

    // Étiquettes des langues. 
    // Tous les codes déclarés ci-dessus 
    // doivent avoir une étiquette
    // correspondante ici.
    "languageLabels": {
        "en": "English",
        "fr": "Français"
    },
    
    // Optionnel, mais un plus pour 
    // le web sémantique : les URIs
    // qui identifient les langues du
    // blog. http://lexvo.org et 
    // https://dbpedia.org proposent
    // des ressources intéressantes 
    // ici.
    "languageUris": {
        "en": "http://dbpedia.org/resource/English_language",
        "fr": "http://dbpedia.org/resource/French_language"
    },

    // Le titre du blog. Tous les 
    // codes déclarés ci-dessus 
    // doivent avoir une 
    // correspondance ici.
    "title": {
        "en": "Polyglot Tech Blog",
        "fr": "Polyglot Tech Blog"
    },

    // L'URL à laquelle votre blog 
    // sera déployé. Ne mettez pas de 
    // "/" à la fin. Je vous 
    // recommande de la laisser telle 
    // quelle et de réaliser la 
    // substitution au moment du 
    // déploiement.
    "baseUrl": "http://localhost:8080",

    // Les mots-clés généraux du blog. 
    // Il seront utilisés dans les 
    // balises <meta> des pages. Là 
    // aussi, chaque code de langue 
    // défini dans "languages" doit 
    // avoir sa correspondance ici.
    "keywords": {
        "en": "polyglot, multilingual, blog, eleventy, 11ty, starter, template",
        "fr": "polyglotte, multilingue, blog, eleventy, 11ty, départ, modèle"
    }
}

Vous pouvez personnaliser src > index.html et src > 404.html, mais ce n'est pas obligatoire.

Adaptez le style

Vous pouvez vous reporter à l'article sur les couleurs pour de plus amples détails sur cette étape.

Ajouter ou retirer des langues

Enlever une langue se fait simplement en effaçant le répertoire correspondant et en mettant à jour le fichier src > _data > data.json. Lorsque l'on ajoute une langue, il y a quelques considérations supplémentaires à avoir, détaillées dans l'article dédié.

Ajouter des pages statiques

Le modèle est fourni avec quatre pages statiques : "Accueil", "À propos", "Blog" et "404". Elles sont écrites en HTML et sont disponibles dans chaque répertoire de langue :

src
 ├── (tous les fichiers dans src)
 ├── en
 │   ├── index.html <- la page d'accueil
 │   ├── about.html
 │   ├── blog.html
 │   └── 404.html
 └── fr
     ├── index.html <- la page d'accueil
     ├── about.html
     ├── blog.html
     └── 404.html

Vous pouvez décider d'ajouter d'autres pages statiques. Là aussi, un article dédié couvre le sujet.

Ajouter des articles

Voici probablement la chose la plus évidente attendue d'un modèle de blog. Vous pouvez suivre les instructions de article dédié pour ajouter des articles.

Vérifiez la validité de vos balises

Le modèle comprend des commandes qui et des dépendances pour vérifier la validité du HTML et du CSS générés grâce au vnu-jar du V3C. Cependant, vnu-jar est écrit en Java, il vous faudra donc installer un Java Runtime Environment pour exécuter ces commandes. Je vous recommande le libre et excellent Eclipse Temurin.
Vous pouvez donc vérifier la validité de votre HTML avec :

npm run check:markup:unix # avec npm sous un système Linux ou unix-like
yarn check:markup:unix # avec Yarn sous un système Linux ou unix-like

npm run check:markup:win # avec npm sous un système Windows
yarn check:markup:win # avec Yarn sous un système Windows

Vous pouvez vérifier la validité du CSS avec :

npm run check:css:unix # avec npm sous un système Linux ou unix-like
yarn check:css:unix # avec Yarn sous un système Linux ou unix-like

npm run check:css:win # avec npm sous un système Windows
yarn check:css:win # avec Yarn sous un système Windows

Vérifiez différents indicateurs de votre blog

Le nombre de choses à faire pour s'assurer de l'accessibilité (a11y), la performance, l'optimisation pour les moteurs de recherche (SEO), la validité du code... d'un site web est illimité et demande des compétences et des outils avancés. Quelques tests simples et sont couverts par un article dédié

Assemblage et déploiement

Notre blog est prêt à être mis en ligne. Cela peut être fait de nombreuses manières selon où votre code se trouve, et qui va héberger le blog. Cet article couvre quelques scénarios communs.

Conclusion

Nous avons vu toutes les étapes qui permettent d'obtenir un Polyglot Tech Blog opérationnel avec votre contenu. Si vous avez suivi toutes ces étapes, vous avez désormais un blog en ligne. Félicitations ! Bien sûr, de nombreuses autres modifications et adaptations sont possibles, n'hésitez donc pas à expérimenter et à partager vos idées sur GitLab 😉

Personnaliser les couleurs

Florent Tassy — Wed, 05 Jul 2023 14:00:00 +0000

Introduction

Les couleurs d'un blog sont l'élément le plus fondamental à choisir pour se sentir chez soi et refléter qui l'on est. Voyons où Polyglot Tech Blog définit ses couleurs afin de les modifier.

Modifier le bon fichier

Polyglot Tech Blog supporte les fichiers SASS. Il inclut également le micro-framework CSS Chota. C'est une feuille de style CSS unique qui fournit assez pour style ce que nous voulons.

Les couleurs de Chota sont prêtes à être surchargées dans le fichier src > sass > style.scss. Les 40 premières lignes contiennent les variables CSS et attribuent leurs valeurs pour les thèmes clair et sombre :

:root {
    --bg-color: #ffffff;
    --bg-secondary-color: #f3f3f6;
    --color-primary: #14854f;
    --color-lightGrey: #d2d6dd;
    --color-grey: #747681;
    --color-darkGrey: #3f4144;
    --color-error: #d43939;
    --color-success: #2c8017;
    --font-color: #333333;
    --navbar-bg-color: #f8bb6d;
    --footer-bg-color: #f8bb6d;
    --transparent-error: rgba(255, 194, 204, 0.3);
    --transparent-success: rgba(145, 238, 145, 0.3);
    --link-color: #333333;
    --grid-maxWidth: 120rem;
    --grid-gutter: 2rem;
    --font-size: 1.6rem;
    --font-family-sans: sans-serif;
    --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
    --content-width: 75%;
}

.dark-theme {
    --bg-color: #222222;
    --bg-secondary-color: #333333;
    --color-primary: #4cad7e;
    --color-lightGrey: #323232;
    --color-grey: #747681;
    --color-darkGrey: #8794a8;
    --color-error: #d43939;
    --color-success: #28bd14;
    --font-color: #dddddd;
    --navbar-bg-color: #741e00;
    --footer-bg-color: #741e00;
    --transparent-error: rgba(255, 194, 204, 0.3);
    --transparent-success: rgba(145, 238, 145, 0.3);
    --link-color: #dddddd;
}

Changer les couleur de toute la page web, c'est simplement changer les valeurs des variables dans ce fichier.

Coloration syntaxique

Si vous prévoyez d'utiliser la coloration syntaxique, vous souhaitez peut-être également changer le style de la coloration. Comme vous pouvez l'imaginer, cela se passe dans les fichiers src > css > code-highlight-dark.njk et src > css > code-highlight-light.njk.

Ces deux modèles contiennent en fait du code CSS et sont traduits par deux feuilles de styles CSS qui sont chargées alternativement suivant le schéma de couleur sélectionné. Par défault, le thème clair est le thème "prism-coy" qui fait partie de PrismJS. N'importe quel thème proposé sous forme de paquet NPM pourrait être ajouté de la même manière..

Le thème sombre et dérivé du thème sombre Gruvbox par Azat S.. Cependant, il a été un peu modifié pour passer les tests automatiques d'accessibilité effectués par l'extension de navigateur axe. Dans ce cas donc, le code CSS a simplement été copié et modifié dans le fichier src > css > code-highlight-dark.njk.

Conclusion

Nous avons vu les fichiers à modifier or remplacer pour changer les couleurs de notre blog. Mais faites preuve de sagesse au moment de choisir vos couleurs et gardez à l'esprit que l'accessibilité dépend pour beaucoup du contraste des couleurs. Si vous souhaitez évaluer l'accessibilité de votre schéma de couleurs, l'article sur les indicateurs du blog devrait vous donner du grain à moudre.

Ajouter une langue

Florent Tassy — Sun, 02 Jul 2023 14:00:00 +0000

Introduction

Polyglot Tech Blog vient avec l'anglais et les français pour montrer ses capacités en action. Cependant, il est possible d'ajouter autant de langues que l'on souhaite. Découvrons comment en ajoutant l'allemand 🇩🇪

Mettre à jour data.json

Ajoutez simplement la nouvelle langue :

src > _data > data.json:

{
    // Other properties
-   "languages": [ "en", "fr" ],
+   "languages": [ "en", "fr", "de" ],
    "languageLabels": {
        "en": "English",
-       "fr": "Français"
+       "fr": "Français",
+       "de": "Deutsch"
    },
    "title": {
        "en": "English",
-       "fr": "Français"
+       "fr": "Français",
+       "de": "Deutsch"
    },
    "keywords": {
        "en": "blog, english",
-       "fr": "blog, français"
+       "fr": "blog, français",
+       "de": "blog, deutsch"
    }
}

Créez le répertoire de la langue

La première étape la plus simple ici est probablement de copier un répertoire de langue existant, disons "en", de le coller dans le répertoire "src", et de le renommer du nom de la langue souhaitée. Ici, nous allons renommer le répertoire en "de". On obtient donc cette structure :

src
 ├── (tous les fichiers dans src)
 ├── en
 ├── fr
 └── de

Le nom du répertoire doit-être une étiquette de langue compatible BCP 47.

Changez le contenu du répertoire

Tout d'abord, renommez le fichier en.json en de.json. Ensuite, ouvrez-le et mettez à jour les traductions et la langue :

src > de > de.json :

{
    "lang": "de",
    "home": "Startseite",
    "blog": "Blog",
    "about": "Über",
    "madeBy": "Erstellt von",
    "seeOn": "Überprüfen Sie es auf",
    "read": "Lesen",
    (...)
}

(Ici, vous devriez remarquer que je ne parle pas allemand...)

Allez ensuite dans le répertoire blog, ouvrez le fichier blog.json, et changez le tag "en" en "de" :

src > de > blog > blog.json :

{
  "layout": "article.html",
  "tags": [
    "post",
-    "en"
+    "de"
  ]
}

Mettez à jour les permaliens

Assurez-vous qu'il n'y ait plus de permalien dans le répertoire "de" qui pointe sur une URL "en/...".

Maintenant, la partie la plus longue si jamais vous avez déjà du contenu...

Traduisez toutes les pages et les articles de blog en allemand !

Changer la langue par défaut

Si vous souhaitez changer la langue par défaut du blog, vous devrez également mettre à jour la propriété "defaultLanguage" dans .eleventy.js.

Conclusion

C'est terminé, nous avons ajouté une langue à notre page web ! Plus d'infos sur 11ty i18n documentation

Ajouter une page

Florent Tassy — Fri, 30 Jun 2023 14:00:00 +0000

Introduction

Polyglot Tech Blog contient trois pages :

Accueil, la page par défaut
À propos
Blog, ou tous les articles de blog sont listés ... ainsi qu'une page d'erreur 404.

Que faire si je souhaite ajouter une nouvelle page statique ? Ajoutons une page "Portefeuille" pour montrer comment faire.

Ajouter les fichiers

Dans chacun de vos répertoires "langue", créez un fichier nommé "portfolio.html". TCe nom doit être le même dans tous vos répertoires "langue". Le nom d fichier détermine ce que sera l'URL de la page. Ici, ce sera quelque chose de la forme https://<my-domain>/<language>/portofio.html.

Vous devriez avoir la structure suivante :

src
 ├── (fichiers dans src)
 ├── en
 │   ├── (fichier dans en)
 │   └── porfolio.html
 └── fr
     ├── (fichiers dans fr)
     └── portfolio.html

Ajoutez le contenu à vos fichier avec le front matter ci-après :

fr > portfolio.html:

---
title: "Portefeuille"
layout: "base.html"
---

<div class="container">
    <p>
        Voici mon contenu. <br>
        Je l'écris en anglais dans le répertoire "en". <br>
        Et bien sûr, je l'écris en français dans le répertoire "fr".
    </p>
</div>

👍 C'est fait, vous avez une nouvelle page statique !

Optionnel: Ajouter une entrée dans la barre de navigation

Cette étape est optionnelle. Si vous souhaitez avoir un lien vers la page portefeuille dans la barre de naviagtion, vous devez faire les modifications suivantes :

src > _includes > components > navbar.html:

        <!-- Pages -->
        <div class="tabs">
            <a href="{{ '/' | locale_url | url }}">{{ home }}</a>
+           <a href="{{ '/portfolio' | locale_url | url }}">{{ portfolio }}</a>
            <a href="{{ '/about' | locale_url | url }}">{{ about }}</a>
            <a href="{{ '/blog' | locale_url | url }}">{{ blog }}</a>

Enfin, le {{ portfolio }} fait référence à une variable qui doit être ajoutée dans les fichiers en.json et fr.json :

src > fr > fr.json:

{
    "lang": "fr",
    "home": "Accueil",
    "blog": "Blog",
    "about": "À propos",
    "madeBy": "Codé par",
    "seeOn": "Retrouvez-moi sur",
-   "read": "Lire"
+   "read": "Lire",
+   "portfolio": "Portefeuille"
}

src > en > en.json :

{
    "lang": "en",
    "home": "Home",
    "blog": "Blog",
    "about": "About",
    "madeBy": "Made by",
    "seeOn": "Check it out on",
-   "read": "Read"
+   "read": "Read",
+   "portfolio": "Portfolio"
}

Désormais, votre page est accessible depuis la barre de navigation 🥳

Conclusion

Nous avons ajouté une nouvelle page statique "Portefeuille" à notre blog. Voilà qui ouvre de nombreuses possibilités 🤩

Ajouter un article

Florent Tassy — Fri, 23 Jun 2023 14:00:00 +0000

Introduction

Schématiquement, un blog est constitué de quelques pages statiques et de beaucoup d'articles. Voyons comment créer un article dans chacune des langues prises en charge par notre blog.

Créer les fichiers

Il s'agit probablement de l'un des choses les plus faciles à faire avec le modèle. Lorsque l'on veut ajouter un article, il suffit de créer un fichier avec le même nom dans chaque répertoire de langue. Par exemple, je veux écrire sur les dauphins en Arctique dans mon blog en français / anglais. Je vais ajouter les fichiers suivants :

src
 ├── (tous les fichiers dans src)
 ├── en
 │   ├── (tous les fichiers dans en)
 │   └── blog
+│        └── dolphins-in-arctic.md
 └── fr
     ├── (tous les fichiers dans fr)
     └── blog
+         └── dolphins-in-arctic.md

Le format suggéré ici est le Markdown, mais les autres formats supportés par 11ty fonctionneraient aussi.

Ajoutez le contenu aux fichiers

Dans chacun des fichiers nouvellement ajoutés, je peux maintenant ajouter mon contenu. Mais avant tout, le front matter suivant est attendu :

title: Dauphins en Arctique (À traduire dans le répertoire en)
description: Un article de blog sur des dauphins en Arctique (À traduire dans le répertoire en)
date: 2010-05-25T12:00:00
update: 2023-05-28T12:00:00 (Celle-ci est optionnelle, mais si vous mettez un article existant
à jour, vous pouvez mettre la date de mise à jour ici)
author: Le nom de l'auteur ici, qui peut différer de celui dans src > _data > data.json > "author"
tags: 
    - dauphin (À traduire dans le répertoire en)
    - Arctique (À traduire dans le répertoire en)

Pour le reste, notez que :

Eleventy ajoutera automatiquement un titre de niveau un à partir du front matter. Vous devez donc ajouter des titres de niveau deux et inférieurs pour garder un HTML valide ;
si vous souhaitez inclure un lien vers un autre article du blog, par exemple article.md, la syntaxe est la suivante : [hyperlink text]({{ '/blog/example' | locale_url | url }}) ;
pour inclure un lien vers une ressource statique du blog (document, image...), par exemple image.png, la syntaxe est la suivante : ![description de l'image]({{ '/img/image.png' | url }}).

C'est fait ✅ mon nouvel article est maintenant disponible à l'adresse https://<my-domain>/<language>/blog/dolphins-in-artic.

Conclusion

À travers cet exemple, nous avons ajouté un nouvel article au blog. Comme vous avez pu le voir, cele consiste en deux étapes seulement, donc vous devriez rapidement vous en rappeler par coeur 😉

Vérifier les indicateurs du blog

Florent Tassy — Thu, 15 Jun 2023 14:00:00 +0000

Introduction

Nous allons maintenant vérifier quelques indicateurs et présenter des outils simples et faciles de prise en main pour assurer la validité, les performance, l'accessibilité et la SEO de notre blog. Ces sujets sont potentiellement infinis et très pointus, c'est pourquoi nous ne ferons qu'effleurer chacun d'entre eux à l'aide d'outils automatiques.

Lighthouse

Un bon moyen de vérifier une page web rapidement et simplement est d'utiliser Lighthouse. Cet outil est disponible parmi les outils de développement des navigateurs dérivés de Chromium, ce qui signifie qu'il peut être utilisé en développement sur localhost. Il existe aussi en tant que service en ligne sur PageSpeed Insights, mais cela implique que la page doit déjà être hébergée en ligne.

Lighthouse fournit des indicateurs et des conseils pour améliorer la performance, l'accessibilité, la SEO et d'autres bonnes pratiques, et il peut fonctionner pour les pages en configuration mobile ou bureau. Nous sous-estimez pas les appareils mobiles car plus de la moitié des pages web sont visionnées sur un appareil mobile d'après statcounter.

Accessibilité

Quand on parle d'accessibilité, WAVE et axe Tools sont de très bons outils pour évaluer automatiquement les performances de votre page web. Un moyen très simple de les utiliser est d'installer les extensions de navigateur WAVE et axe DevTools. Elles fonctionnent toutes les deux pour des pages locales ou en ligne et proposent de nombreux tests et conseils, comme par exemple pour les contrastes des couleurs.

Validité du code

Pour la validité du code, vous savez probablement déjà que le modèle Polyglot Tech Blog permet de tester le HTML et le CSS grâce au vnu-jar du W3C. Cependant, le W3C maintient de nombreux autres outils très utiles qui peuvent être utilisés pour vérifier la validité de votre code. On mentionnera ici la validation de l'internationalisation et des flux, pour en citer deux applicables au Polyglot Tech Blog.

Conclusion

Nous avons vu différents outils pour évaluer et améliorer votre code en termes de validité, performance, accessibilité et SEO. Mais finalement, tous ces éléments sont intimement liés : du code invalide ne sera pas bien interprété, menant à des problèmes de performance, et il ne sera donc pas bien géré par les outils d'accessibilité et mal référencé par les moteurs de recherche. Ces outils fournissent donc différents points de vue et conseils sur votre code. Ils sont complémentaires et, puisqu'ils sont tous automatiques, ils ont des limites inhérentes à ce qu'ils peuvent détecter.

Déploiement

Florent Tassy — Sun, 11 Jun 2023 14:00:00 +0000

Introduction

Maintenant que nous avons adapté le modèle avec notre contenu, il est temps de le déployer sur le web. Passons au travers de quelques scénarios de déploiement communs.

Déploiement manuel

Afin d'avoir des hyperliens corrects, vous devez connaître l'URL sur laquelle le site sera déployé. Créez un fichier nommé prod.js à la racine du blog et remplissez-le avec l'URL de base de votre site ainsi que le sous-répertoire dans lequel il sera déployé. Par exemple, s'il doit 'etre déployé à l'adresse https://example.com/subpath, le fichier devrait contenir :

module.exports = { 
    baseUrl: "https://example.com/subpath", // Notez l'absence de "/" à la fin de l'URL
    pathPrefix: "subpath" 
};

S'il n'y a pas de sous-répertoire, laissez la valeur vide : pathPrefix: "". S'il y a un sous-répertoire, vous pouvez effacer le fichier robots.txt car il ne sera pas lu.

Nous pouvons maintenant empaqueter le blog, c'est-à-dire traiter tous les fichiers du répertoire src afin de générer les fichiers HTML, JavaScript, CSS et autres fichiers statiques qui seront placés sur le serveur. Je vous recommande de suivre les étapes suivantes :

Arrêtez le serveur de développement local s'il tourne.
Videz le répertoire public.

npm run clean # avec npm
yarn clean # avec Yarn

Empaquetez le blog prêt au déploiement

npm run manual:build # avec npm
yarn manual:build # avec Yarn

Vous n'avez ensuite plus qu'à copier le contenu du répertoire public sur le serveur.

Déploiement sur GitLab Pages

Le modèle propose un fichier .gitlab-ci.yml qui devrait déployer le blog correctement. Vous avez seulement besoin d'adapter le fichier gitlab-pages.js :

module.exports = { 
    baseUrl: "https://florent_tassy.gitlab.io/polyglot-tech-blog", // Notez l'absence de "/" à la fin de l'URL
    pathPrefix: "polyglot-tech-blog" 
};

"Poussez" ensuite le dépôt sur votre instance de GitLab. Si le dépôt distant pest correctement configuré, la pipeline de CI/CD va déployer le blog.

Déploiement sur Netlify

Vous pouvez vous réferrer à la documentation de Netlify.

Pour un déploiement manuel, le modèle fournit un fichier netlify.js à adapter pour empaqueter le blog convaneblement :

module.exports = { 
    baseUrl: "https://polyglot-tech-blog.netlify.app", // Notez l'absence de "/" à la fin de l'URL
    pathPrefix: "" 
};

Vous pouvez maintenant empaqueter le blog en suivant les étapes ci-après :

Arrêtez le serveur de développement local s'il tourne.
Videz le répertoire public.

npm run clean # avec npm
yarn clean # avec Yarn

Empaquetez le blog prêt au déploiement

npm run netlify:build # avec npm
yarn netlify:build # avec Yarn

Vous pouvez maintenant vous connecter à Netlify et glisser-déposer le répertoire public.

Déploiement sur GitHub Pages

Le modèle propose un fichier .github > workflows > build-and-deploy.yml qui devrait déployer le blog correctement. Vous avez seulement besoin d'adapter le fichier github-pages.js :

module.exports = { 
    baseUrl: "https://ftassy.github.io/Polyglot-Tech-Blog", // Notez l'absence de "/" à la fin de l'URL
    pathPrefix: "Polyglot-Tech-Blog" 
};

"Poussez" ensuite le code sur GitHub. Si le dépôt distant est correctement configuré, la GitHub Action va déployer le blog.

Conclusion

Nous avons vu comment déployer notre blog sur un serveur de manière manuelle et sur les services d'hébergement GitLab Pages, GitHub Pages et Netlify. Si votre scénario n'est pas couvert ici, vous devriez pouvoir adapter un de ceux proposés à votre cas spécifique. Félications, votre blog est maintenant en ligne !