Passer de WordPress à Hugo

Lorsque WordPress 5 a été publié, j'étais enthousiasmé par l'utilisation de l'éditeur Gutenberg pour créer des blocs personnalisés, comme Les messages publiés sur mon blog personnel contenaient quelques fonctionnalités que je pouvais transformer en bloc, ce qui facilitait la configuration de mon contenu. C’était vraiment une bonne chose à faire et pourtant je me sentais encore assez gonflé.

À peu près à la même époque, j’ai commencé à lire de plus en plus sur les générateurs de sites statiques et le JAMstack cet article par Chris Ferdinandi m'a convaincu ). Avec des projets personnels, vous pouvez en quelque sorte écarter une grande variété de problèmes, mais en tant que professionnel, vous devez vous assurer de produire la meilleure qualité possible. La performance, la sécurité et l'accessibilité deviennent les premières préoccupations. Vous pouvez certainement optimiser WordPress pour qu’il soit assez rapide, mais plus rapide qu’un site statique sur un CDN qui n’a pas besoin d’interroger la base de données ni de générer votre page à chaque fois? Pas si facile.

Je pensais pouvoir mettre cela en pratique avec un de mes projets personnels d'apprendre et de pouvoir ensuite utiliser cela pour des projets professionnels. Certains d'entre vous voudront peut-être aussi savoir comment. Dans cet article, j'examinerai comment j'ai effectué la transition de WordPress vers un générateur de site statique spécifique appelé Hugo.

Hugo est construit en Go un langage assez rapide et facile à utiliser une fois. vous vous habituez à la syntaxe, ce que je vais vous expliquer. Tout se compile localement pour que vous puissiez prévisualiser votre site directement sur votre ordinateur. Le projet sera ensuite enregistré dans un référentiel privé. De plus, je vous expliquerai comment l'héberger sur Netlify et enregistrer vos images sur un Git LFS (stockage de fichiers volumineux). Enfin, nous verrons comment configurer un système de gestion de contenu pour ajouter des publications et des images (similaires au backend WordPress) avec le CMS Netlify.

Notez que tout cela est absolument gratuit, ce qui est assez étonnant. si vous me demandez (bien que vous deviez payer un supplément si vous utilisez tout votre stockage LFS ou si le trafic de votre site est intense). De plus, j'écris ceci du point de vue de l'utilisateur Bitbucket, fonctionnant sur un Mac. Certaines étapes peuvent être légèrement différentes, mais vous devriez pouvoir suivre, peu importe la configuration que vous utilisez.

Vous devez être assez à l’aise avec HTML, CSS, JS, Git et le terminal de commande. Avoir quelques notions avec des langages de gabarit tels que Liquid pourrait également être utile, mais nous examinerons les modèles de Hugo pour vous aider à démarrer. Je vais néanmoins fournir autant de détails que possible!

Je sais que cela semble beaucoup, et avant que je commence à étudier cela, c'était aussi pour moi. Je vais essayer de rendre cette transition aussi douce que possible pour vous en décomposant les étapes. Il n’est pas très difficile de trouver toutes les ressources, mais il me fallait un peu de devinette, allant d’une documentation à l’autre.

1. Exportation du contenu depuis WordPress
2. Préparation de la conception de votre blog
3. Un nouveau référentiel
4. Activation de Git LFS (facultatif)
5. Création du site sur Netlify
6. Préparation de Netlify Large Media (Facultatif)
7. Configuration de Hugo sur votre ordinateur
8. Création de votre thème personnalisé
9. Remarques sur la syntaxe Hugo
10. Contenu et données
11. Déploiement sur Netlify
12. Configuration d'un domaine personnalisé
13. Modification du contenu sur le CMS Netlify

Note : Si vous rencontrez des problèmes avec certains laissez-moi savoir dans les commentaires et je vais essayer de vous aider, mais notez que ceci est destiné à être appliqué à un blog simple et statique qui ne comporte pas une douzaine de widgets ou de commentaires (vous pouvez le configurer plus tard ), et non un site d’entreprise ou un portefeuille personnel. Vous pourriez sans doute le faire, mais par souci de simplicité, je vais m'en tenir à un blog simple et statique.

Conditions préalables

Avant de faire quoi que ce soit, créons un dossier de projet où tout, de nos outils à notre référentiel local va résider. Je l'appellerai «WP2Hugo» (n'hésitez pas à l'appeler comme vous le souhaitez).

Ce tutoriel utilisera quelques outils en ligne de commande tels que npm et Git. Si vous ne les avez pas déjà, installez-les sur votre ordinateur:

Une fois ceux-ci installés, commençons!

1. Exportation du contenu à partir de WordPress

Premièrement, nous devrons exporter votre contenu à partir de WordPress: publications, pages et téléchargements. Hugo mentionne quelques-uns des outils disponibles mais personnellement, un seul d'entre eux a fonctionné: blog2md . Celui-ci fonctionne en exécutant un fichier JavaScript avec Node.js dans votre terminal de commande. Il prend les fichiers XML exportés par WordPress et génère des fichiers Markdown avec la bonne structure, convertissant votre code HTML en Markdown et ajoutant ce que l’on appelle le Front Matter qui permet de formater les métadonnées au début de chaque

Accédez à votre administrateur WordPress et ouvrez le menu Outils, sous-menu Exporter. Vous pouvez exporter ce que vous voulez à partir de là. Le fichier exporté est appelé YOUR-WP-EXPORT.xml .

Vous pouvez sélectionner exactement les données que vous souhaitez exporter depuis votre blog WordPress.

Dans notre dossier WP2Hugo, je vous recommande de créer un nouveau dossier nommé blog2md dans vous placerez les fichiers de l'outil blog2md, ainsi que votre exportation XML à partir de WordPress ( YOUR-WP-EXPORT.xml ). Créez également un nouveau dossier appelé sur où seront envoyées vos publications Markdown. Ensuite, ouvrez votre terminal de commande et naviguez avec la commande cd vers le dossier “blog2md” que vous venez de créer (ou tapez cd avec un espace et faites-le glisser dans le dossier.

Vous pouvez maintenant exécuter les commandes suivantes pour obtenir vos publications:

 npm install
node index.js avec YOUR-WP-EXPORT.xml

Recherchez dans le répertoire / WP2Hugo / blog2md / out pour vérifier si tous vos messages (et les pages potentielles) y sont. Si tel est le cas, vous remarquerez peut-être quelque chose à propos des commentaires dans la documentation: j’avais un blog sans commentaires, je n’avais donc pas besoin qu’ils soient réalisés, mais Hugo offre à plusieurs options pour les commentaires . Si vous avez des commentaires sur WordPress, vous pouvez les exporter pour les réimplémenter ultérieurement avec un service spécialisé tel que Disqus.

Si vous connaissez suffisamment JS, vous pouvez modifier le fichier index.js . pour modifier la façon dont vos fichiers de messages seront publiés en modifiant la fonction wordpressImport . Vous souhaiterez peut-être capturer l'image sélectionnée, supprimer le lien permanent, modifier le format de la date ou définir le type (si vous avez des publications et des pages). Vous devrez l’adapter à vos besoins, mais sachez que la boucle ( posts.forEach (fonction (post) {...}) ) parcourt tous les messages de l’exportation, de sorte que vous pouvez vérifiez le contenu XML de chaque publication dans cette boucle et personnalisez votre sujet principal.

De plus, si vous devez mettre à jour les URL contenues dans vos publications (dans mon cas, je souhaitais que les liens de l'image soient relatifs plutôt qu'absolus). le formatage de la date, c’est le bon moment pour le faire, mais ne vous endormez pas. De nombreux éditeurs de texte proposent une édition en masse afin que vous puissiez insérer une expression régulière et apporter les modifications souhaitées à vos fichiers. De plus, vous pouvez exécuter le script blog2md autant de fois que nécessaire, car il écrasera tous les fichiers existants du dossier de sortie.

Une fois que vous avez vos fichiers Markdown exportés, votre contenu est prêt. La prochaine étape consiste à préparer votre thème WordPress pour qu'il fonctionne dans Hugo.

2. Préparation de la conception de votre blog

Mon blog avait une présentation typique avec un en-tête, une barre de navigation, le contenu et la barre latérale, ainsi qu'un pied de page – assez simple à configurer. Au lieu de copier des morceaux de mon thème WordPress, je l'ai tout reconstruit à partir de zéro pour m'assurer qu'il n'y avait pas de styles superflus ou de balises inutiles. C’est le bon moment pour mettre en œuvre de nouvelles techniques CSS ( pssst… Grid is awesome! ) et mettre en place une stratégie de nommage plus cohérente (quelque chose comme les directives CSS Wizardry ). Vous pouvez faire ce que vous voulez, mais souvenez-vous que nous essayons d'optimiser notre blog, il est donc utile de passer en revue ce que vous aviez et de décider s'il vaut la peine de le garder. ce qui va où. Cela vous aidera à structurer votre balisage et vos styles. A propos, Hugo a la capacité intégrée de compiler Sass en CSS, alors n'hésitez pas à diviser ces styles en fichiers plus petits autant que vous le souhaitez!

Quand je dis simple, je veux dire très simple.

Sinon, vous pouvez complètement ignorer cette étape pour le moment et personnaliser votre blog au fur et à mesure que votre site Hugo est défini. up. J'avais le balisage de base en place et je préférais une approche itérative des styles. C’est aussi un bon moyen de savoir ce qui fonctionne et ce qui ne fonctionne pas.

3. Configurer un nouveau référentiel

Maintenant que cela est réglé, nous devons configurer un référentiel. Je suppose que vous souhaiterez créer un nouveau référentiel pour cela, ce qui sera une excellente occasion d’utiliser Git LFS (système de fichiers volumineux). La raison pour laquelle je conseille de faire cela maintenant est que mettre en œuvre Git LFS alors que vous avez déjà des centaines d'images n'est pas aussi fluide. Je l’ai fait, mais c’est un mal de tête que vous voudrez probablement éviter. Cela apportera également d’autres avantages avec Netlify.

Bien que je fasse tout cela via Bitbucket et leur interface graphique propriétaire Git, Sourcetree, vous pouvez absolument le faire avec GitHub et GitLab et leurs propres outils de bureau. Vous pouvez également le faire directement dans le terminal de commande, mais j'aime automatiser et simplifier autant que possible le processus, ce qui réduit le risque de commettre des erreurs stupides.

Lorsque vous avez créé votre nouveau référentiel sur la plate-forme Git de votre choix, créez un dossier vide dans votre dossier de projet local (WP2Hugo), par exemple hugorepo ouvrez ensuite votre terminal de commande ou votre outil d'interface graphique Git et initialisez votre référentiel Git local; liez-le ensuite au référentiel distant (vous pouvez généralement trouver la commande exacte à utiliser sur le référentiel distant nouvellement créé).

Je vous recommanderais de créer un dev (ou étape ]) branche afin que votre branche principale soit strictement utilisée pour des déploiements en production. Cela limitera également la création de nouvelles versions uniquement lorsque vous avez terminé avec une série de modifications potentielles. La création d’une branche peut être effectuée localement ou sur la page Web distante de votre référentiel.

GitHub facilite la création d'une branche en cliquant sur le sélecteur de branche et en tapant un nouveau nom. Sur GitLab, vous devez ouvrir le menu déroulant «Plus» pour accéder à l’option. Bitbucket nécessite que vous ouvriez le menu «Plus» à gauche pour ouvrir le menu déroulant, puis cliquez sur «Créer une branche» dans la section «Au travail».

4. Activer Git LFS (facultatif)

Git Large File System est une fonctionnalité de Git qui vous permet de sauvegarder des fichiers volumineux de manière plus efficace, tels que des documents Photoshop, des archives ZIP et, dans notre cas, des images. Comme les images peuvent nécessiter un contrôle de version mais ne sont pas exactement du code, il est logique de les stocker différemment des fichiers texte ordinaires. Cela fonctionne en stockant l'image sur un serveur distant et le fichier de votre référentiel sera un fichier texte contenant un pointeur sur cette ressource distante.

Hélas, ce n'est pas une option sur laquelle vous cliquez simplement pour l'activer. Vous devez configurer votre référentiel pour activer LFS, ce qui nécessite du travail sur place. Avec Git installé, vous devez installer une extension Git-LFS :

 git lfs install

Si, comme moi, cette commande ne fonctionnait pas pour vous, essayez l’alternative Homebrew (pour macOS ou Linux):

 brew install git-lfs

Une fois cela fait, vous devrez spécifier les fichiers à suivre dans votre référentiel. Je vais héberger toutes les images que j'ai téléchargées dans le dossier / upload de WordPress dans un dossier portant le même nom sur ma configuration Hugo, sauf que ce dossier sera situé dans un dossier / static (qui sera résolu à la racine une fois compilé). Décidez de la structure de vos dossiers et suivez vos fichiers dans:

 git lfs track "static / uploads / *"

Ceci suivra tous les fichiers du dossier / static / uploads . Vous pouvez également utiliser les éléments suivants:

 git lfs track "* .jpg"

Ceci suivra tous les fichiers JPG de votre référentiel. Vous pouvez combiner et faire correspondre pour ne suivre que les fichiers JPG d'un certain dossier, par exemple.

Une fois ce processus en place, vous pouvez enregistrer vos fichiers de configuration LFS dans votre référentiel et les transférer dans votre référentiel distant. La prochaine fois que vous validerez localement un fichier qui correspond à la configuration de suivi LFS, il sera "converti" en une ressource LFS. Si vous travaillez sur une branche de développement, fusionnez ce commit dans votre branche principale.

Voyons maintenant Netlify.

5. Création du site sur Netlify

À ce stade, votre référentiel est configuré. Vous pouvez donc continuer et créer un compte sur Netlify . Vous pouvez même vous connecter avec votre compte GitHub, GitLab ou Bitbucket si vous le souhaitez. Une fois sur le tableau de bord, cliquez sur le bouton "Nouveau site de Git" dans le coin supérieur droit et créez votre nouveau site Netlify.

Note : Vous pouvez laisser toutes les options à l'adresse leurs valeurs par défaut pour l'instant.

Sélectionnez votre fournisseur Git: une fenêtre contextuelle s'ouvrira pour vous authentifier. Lorsque cela est fait, la fenêtre se ferme et vous verrez une liste de référentiels sur ce fournisseur Git auquel vous avez accès. Sélectionnez votre repo fraîchement créé et continuez. On vous demandera plusieurs choses, que vous pouvez simplement laisser par défaut car toutes les options sont modifiables plus tard.

Pour l'instant, dans les paramètres du site, cliquez sur «Changer le nom du site» et nommez votre site comme vous le souhaitez. je veux aller avec chris-smashing-hugo-blog . Nous allons maintenant pouvoir accéder au site via chris-smashing-hugo-blog.netlify.com : une belle page 404!

6. Préparation de Netlify Large Media (Facultatif)

Si vous configurez Git LFS et prévoyez d’utiliser Netlify, vous souhaiterez suivre ces étapes. C'est un peu plus compliqué, mais ça en vaut vraiment la peine: cela vous permettra de définir des chaînes de requête sur les URL de l'image qui seront automatiquement transformées.

Supposons que vous avez un lien vers portrait.jpg qui est un image qui est 900 × 1600 pixels. Avec Netlify Large Media, vous pouvez appeler le fichier portrait.jpg? Nf_resize = fit & w = 420 qui l’échelonnera proportionnellement. Si vous définissez à la fois w et h et définissez nf_resize = smartcrop il sera redimensionné par recadrage pour se concentrer sur le point d'intérêt de l'image (comme déterminé par un algorithme de fantaisie, alias robot magic brain! ). Je trouve que c'est un excellent moyen d'avoir des miniatures comme celles générées par WordPress, sans avoir besoin de plusieurs fichiers pour une image sur mon référentiel.

Si cela vous intéresse, paramétrez-le!

installation de l'interface de ligne de commande de Netlify via npm:

 npm install netlify-cli -g

Si cela fonctionne, exécuter la commande netlify devrait donner des informations sur l'outil.

Vous devrez ensuite vous assurer que vous vous trouvez bien dans le dossier de votre référentiel local (que j'ai nommé «hugorepo»). plus tôt), et exécutez:

 netlify login

Autorise le jeton. Ensuite, nous devrons installer le plugin Netlify Large Media. Exécuter:

 plugins netlify: installer netlify-lm-plugin
netlify lm: installer

Il devrait y avoir une ligne de commande à la fin du message résultant que vous devez copier (qui devrait ressembler à /Users/YOURNAME/.netlify/helper/path.bash.inc sur Mac) – exécuter. Notez que Keychain peut vous demander le mot de passe de l’administrateur de votre ordinateur sous macOS.

La prochaine étape consiste à relier Netlify:

 netlify link.

Vous pouvez indiquer le nom de votre site ici (j'ai fourni le nom de chris-smashing-hugo-blog que je lui avais donné précédemment). Ceci mis en place, il vous suffit de configurer la fonction Large Media en exécutant les opérations suivantes:

 netlify lm: setup

Enregistrez ces nouvelles modifications dans votre référentiel local et envoyez-les à la branche de développement à distance. J'ai eu quelques erreurs avec Sourcetree et Keychain du type git "credential-netlify" n'est pas une commande git . Si tel est votre cas, essayez d’appuyer manuellement avec les commandes suivantes:

 git add -A
git commit -m "Configurer Netlify Large media"
git push

Si cela ne fonctionne pas, vous devrez peut-être installer Netlify credential Helper . Voici comment le faire avec Homebrew:

 brassez le robinet netlify / git-credential-netlify
brasser installer git-credential-netlify

Essayez de pousser votre commit jusqu'à maintenant (avec votre interface graphique ou votre terminal de commande): cela devrait fonctionner!

Note : Si vous modifiez votre mot de passe Netlify, exécutez netlify logout et encore une fois netlify login .

Vous pourriez vous demander: «Tout cela, et nous n'avons toujours pas initialisé notre version Hugo?" Oui, je sais, cela a pris un certain temps. mais tous les préparatifs de la transition sont terminés. Nous pouvons maintenant installer notre blog Hugo!

7. Configurer Hugo sur votre ordinateur

Vous devez d’abord installer Hugo sur votre ordinateur avec l’une des options fournies. Je vais utiliser Homebrew mais les utilisateurs de Windows peuvent utiliser Scoop ou Chocolatey, ou télécharger un package directement.

 brew install hugo

Vous devrez ensuite créer un nouveau site Hugo, mais cela ne vous plaira pas de le configurer dans un dossier non vide. Première option: vous pouvez le créer dans un nouveau dossier et déplacer son contenu dans le dossier du référentiel local:

 hugo new site your_temporary_folder

Seconde option: vous pouvez le forcer à s’installer dans votre référentiel local avec un drapeau. Assurez-vous de l’exécuter dans le bon dossier:

 hugo new site. --Obliger

Vous avez maintenant un site Hugo que vous pouvez lancer avec cette commande:

 hugo server

Vous obtiendrez un aperçu local de localhost . Malheureusement, vous n'avez aucun contenu et aucun thème de votre choix. Ne vous inquiétez pas, la configuration sera bientôt terminée!

Commençons par examiner le fichier de configuration ( config.toml dans mon cas): définissons le nom du blog et l'URL de base. (ceci doit correspondre à l'URL de votre tableau de bord Netlify):

 title = "Chris 'Smashing Hugo Blog"
baseURL = "https://chris-smashing-hugo-blog.netlify.com"

Ce lien sera écrasé pendant le développement local, évitez les erreurs 404.

Laissons à Hugo nos articles exportés au format Markdown. Ils devraient être assis dans le dossier / WP2Hugo / blog2md / out de la première étape. Dans le dossier Hugo (répertoire du référentiel local.a.k.a.), accédez au dossier content et créez un sous-dossier nommé posts . Placez vos fichiers Markdown là-bas, puis définissons un thème.

8. Création de votre thème personnalisé

Pour cette étape, je vous recommande de télécharger le passe-partout Saito qui contient tous les partiels dont vous aurez besoin pour commencer (sans styles) – un point de départ très utile. . Vous pouvez, bien sûr, consulter cette collection de thèmes prêts à l'emploi pour Hugo si vous souhaitez ignorer cette partie du processus.

A partir du dossier du référentiel local, clonez le thème dans themes / saito :

 sous-module git add https://github.com/hakuoku/saito-boilerplate.git thèmes / saito

Vous pouvez renommer ce dossier en tout ce que vous voulez, tel que cool-theme . Vous devrez indiquer à votre configuration Hugo le thème que vous souhaitez utiliser en modifiant votre fichier config.toml / yaml / json . Modifiez la valeur du thème comme suit: saito ou cool-theme ou quel que soit le nom du dossier de votre thème. Votre aperçu devrait maintenant afficher le titre de votre blog avec une ligne de copyright. C'est un début, n'est-ce pas?

Ouvrez le fichier layout / partials / home.html du thème et modifiez-le pour afficher votre contenu en vous limitant aux cinq premiers éléments de type . ] (dans le dossier content / posts / ), avec la plage d’abord et où :

 

{{plage 5 premiers (où .Paginator.Pages "Type" "posts")}}
    

        
 {{.Titre}} 
        

             {{.Content}}
        
    
 {{fin}}

Votre contenu est maintenant visible, de la manière la plus élémentaire.

Templating With Hugo

Vous pouvez commencer par lire l'Introduction to Hugo templating si vous voulez, mais je vais essayer de passer en revue quelques points essentiels. cela vous aidera à comprendre les bases.

Toutes les opérations dans Hugo sont définies dans des délimiteurs: double accolade (par exemple, {{.Titre}} ), ce qui devrait vous sembler familier si vous avez fait un peu de templating avant. Si ce n’est pas le cas, envisagez-le comme un moyen d’exécuter des opérations ou d’injecter des valeurs à un point spécifique de votre balise. Pour les blocs, ils se terminent par la balise {{fin}} pour toutes les opérations autres que les codes abrégés.

Les thèmes ont un dossier layout qui contient les éléments de la mise en page. Le dossier _default sera le point de départ de Hugo, baseof.html étant ( vous l’avez deviné! ) la base de votre mise en page. Il appellera chaque composant appelé «partials» (plus de détails à ce sujet dans la documentation de Hugo sur Partial Template ), de la même manière que vous utiliseriez incluez en PHP, que vous avez peut-être déjà vu dans votre thème WordPress. Les partiels peuvent appeler d'autres partiels – ne faites pas simplement une boucle infinie.

Vous pouvez appeler un partiel avec {{partial "file.html". }} syntaxe. La section partial est assez simple, mais les deux autres pourraient avoir besoin d'explications. Vous pourriez vous attendre à devoir écrire partials / file.html mais, comme tous les partiels doivent se trouver dans le dossier "partials", Hugo peut très bien trouver ce dossier. Bien sûr, vous pouvez créer des sous-dossiers dans le dossier «partiels» si vous avez besoin de plus d’organisation.

Vous avez peut-être remarqué un point parasite: c’est le contexte que vous passez à votre partiel. Si vous aviez un menu partiel et une liste de liens et d’étiquettes, vous pouvez transmettre cette liste au partiel afin qu’il ne puisse accéder qu’à cette liste et rien d’autre. Je parlerai davantage de ce point insaisissable dans la section suivante .

Votre fichier baseof.html est un shell qui appelle tous les partiels nécessaires au rendu de la présentation de votre blog. Il devrait contenir un minimum de HTML et de nombreux partiels:

    
        
        {{partial "head.html". }}
    
    
         {{partial "header.html". }}
        {{partial "nav.html". }}

        

            {{block "main". }}{{ fin }}
        

        

        {{partial "footer.html". }}
    

Le {{block "main". La ligne}} {{end}} est différente car il s'agit d'un bloc défini avec un modèle basé sur le contenu de la page en cours (page d'accueil, page de publication unique, etc.) avec {{define " main "}} .

Feuilles de style

Dans votre thème, créez un dossier nommé assets dans lequel nous placerons un dossier css . Il contiendra nos fichiers SCSS, ou un fichier CSS de confiance. Maintenant, il devrait y avoir un fichier css.html dans le dossier partials (appelé par head.html ). Pour convertir Sass / SCSS en CSS et réduire la feuille de style, nous utiliserions cette série de fonctions (en utilisant la syntaxe Hugo Pipes au lieu d’envelopper les fonctions les unes autour des autres):

 {{$ style: = resources.Get "css / style.scss" | toCSS | minify | empreinte digitale }}
 

En prime – depuis que j'ai eu du mal à trouver une réponse directe – si vous voulez utiliser Autoprefixer, Hugo implémente également PostCSS. Vous pouvez ajouter une fonction de tuyau supplémentaire entre toCSS et minify à la première ligne, comme suit:

 {{$ style: = resources.Get "css / style.scss" | toCSS | postCSS | minify | empreinte digitale }}

Créez un fichier «postcss.config.js» à la racine de votre blog Hugo et transmettez les options, telles que:

 module.exports = {
    plugins: {
        préfixe automatique: {
            navigateurs: [
                "> 1% ",
                "2 dernières versions"
            ]
        }
    },
}

Et hop! De Sass aux CSS préfixés et minifiés. La fonction de pipe «d'empreinte digitale» sert à s'assurer que le nom de fichier est unique, comme dans style.c66e6096bdc14c2d3a737cff95b85ad89c99b9d1.min.css . Si vous modifiez la feuille de style, l'empreinte digitale change, le nom du fichier est donc différent et vous obtenez ainsi une solution de contournement du cache efficace .

9. Notes sur la syntaxe Hugo

Je veux m'assurer que vous comprenez «le point», c'est-à-dire comment Hugo étudie les variables (ou dans mes propres mots, fournit une référence contextuelle) que vous utiliserez dans vos modèles.

Le point et la portée

Le point est comme une variable de niveau supérieur que vous pouvez utiliser dans n'importe quel modèle ou shortcode, mais sa valeur est adaptée à son contexte. La valeur du point dans un modèle de niveau supérieur tel que baseof.html est différente de la valeur dans les blocs de boucle ou avec les blocs .

Supposons que cela se trouve dans notre modèle dans notre head.html partiel:

 {{avec .Site.Title}}  {{fin}}

Même si nous l’utilisons dans le champ principal, la valeur de Dot change en fonction du contexte, qui est .Site.Title en l’espèce. Donc, pour imprimer la valeur, il suffit d'écrire . au lieu de retaper le nom de la variable à nouveau. Cela m'a confondu au début, mais vous vous y êtes habitué très rapidement et cela aide à réduire la redondance puisque vous ne nommez la variable qu'une seule fois. Si quelque chose ne fonctionne pas, c’est généralement parce que vous essayez d’appeler une variable de niveau supérieur à l’intérieur d’un bloc ciblé.

Comment utilisez-vous donc la portée de niveau supérieur dans un bloc ciblé? Disons que vous voulez vérifier une valeur mais en utiliser une autre. Vous pouvez utiliser $ qui sera toujours la portée de niveau supérieur:

 {{avec .Site.Params.InfoEnglish}} {{$ .Site.Params.DescriptionEnglish}} {{fin}}

Dans notre état, la portée est .Site.Params.InfoEnglish mais nous pouvons toujours accéder aux valeurs en dehors de celle-ci avec $ où l'on utilisait intuitivement .Site.Params .DescriptionEnglish ne fonctionnerait pas car il tenterait de résoudre le problème en .Site.Params.InfoEnglish.Site.Params.DescriptionEnglish en générant une erreur.

Variables personnalisées

Vous pouvez affecter des variables en utilisant la syntaxe suivante:

 {{$ customvar: = "custom value"}}

Le nom de la variable doit commencer par $ et l'opérateur d'affectation doit être : = s'il s'agit de la première affectation, = sinon, comme ceci:

 {{$ customvar = "valeur mise à jour"}}

Le problème que vous pourriez rencontrer est que cela ne sortira pas du champ d'application, ce qui m'amène au point suivant.

Scratch

La fonctionnalité Scratch vous permet d'attribuer des valeurs. qui sont disponibles dans tous les contextes. Disons que vous avez une liste de films dans un fichier movies.json :

  [
    {
        "name": "The Room",
        "rating": 4
    },
    {
        "name": "Back to the Future",
        "rating": 10
    },
    {
        "name": "The Artist",
        "rating": 7
    }
]

Maintenant, vous voulez parcourir le contenu du fichier et stocker votre fichier favori pour l’utiliser ultérieurement. C'est ici qu'intervient Scratch:

 {{.Scratch.Set "favouriteMovie" "None"}} {{/ * Facultatif, afin que vous puissiez voir la syntaxe de différence basée sur la portée * /}}

{{range .Site.Data.movies}}
        {{si ge .rating 10}}
            {{/ * Nous devons utiliser .Scratch préfixé par un $, car la portée est .Site.Data.movies, à l'index actuel de la boucle * /}}
            {{$ .Scratch.Set "favouriteMovie" .name}}
        {{ fin }}
{{ fin }}
[...]
Mon film préféré est {{.Scratch.Get "favouriteMovie"}}

     

The other file you’ll need to create is the configuration file: config.yml. It will allow you to define your site’s settings (name, URL, etc.) so that you can set up what your posts’ front matter should contain, as well as how your data files (if any) should be editable. It’s a bit more complex to set up, but that doesn’t mean it isn’t easy.

If you’re using GitHub or GitLab, start your config.yml file with:

backend:
    name: git-gateway
    branch: dev # Branch to update (optional; defaults to master)

If you’re using Bitbucket, it’s a bit different:

backend:
    name: bitbucket
    repo: your-username/your-hugorepo
    branch: dev # Branch to update (optional; defaults to master)

Then, for our uploads, we’ll have to tell the CMS where to store them:

media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads

When you create a new post, the CMS will generate the slug for the filename which you can customize with three options:

slug:
    encoding: "ascii" # You can also use "unicode" for non-Latin
    clean_accents: true # Removes diacritics from characters like é or å
    sanitize_replacement: "-" # Replace unsafe characters with this string

Finally, you’ll need to define how the data in your posts is structured. I will also define how the data file coolsites is structured — just in case I want to add another site to the list. These are set with the collections object which will definitely be the most verbose one, along with a nice handful of options you can read more about here.

collections:
    - name: "articles" # Used in routes, e.g., /admin/collections/blog
        label: "Articles" # Used in the Netlify CMS user interface
        folder: "content/posts" # The path to the folder where the posts are stored, usually content/posts for Hugo
        create: true # Allow users to create new documents in this collection
        slug: "{{slug}}" # Filename template, e.g., post-title.md
        fields: # The fields for each document, usually in front matter
            - {label: "Title", name: "title", widget: "string", required: true}
            - {label: "Draft", name: "draft", widget: "boolean", default: true }
            - {label: "Type", name: "type", widget: "hidden", default: "post" }
            - {label: "Publish Date", name: "date", widget: "date", format: "YYYY-MM-DD"}
            - {label: "Featured Image", name: "featuredimage", widget: "image"}
            - {label: "Author", name: "author", widget: "string"}
            - {label: "Body", name: "body", widget: "markdown"}
    - name: 'coolsites'
            label: 'Cool Sites'
            file: 'data/coolsites.json'
            description: 'Website to check out'
            fields:
                - name: coolsites
                    label: Sites
                    label_singular: 'Site'
                    widget: list
                    fields:
                        - { label: 'Site URL', name: 'link', widget: 'string', hint: 'https://…' }
                        - { label: 'Site Name', name: 'label', widget: 'string' }

Note: You can read more about how to configure individual fields in the Netlify CMS Widgets documentation which goes over each type of widget and how to use them — especially useful for date formats.

Authentication

The last thing we need to do is to ensure only authorized users can access the backend! Using your Git provider’s authentication is an easy way to go about this.

Head over to your Netlify site and click the “Settings” tab. Then go to “Access control” which is the last link in the menu on the left side. Here, you can configure OAuth to run via GitHub, GitLab or Bitbucket by providing a key and a secret value defined for your user account (not in the repository). You’ll want to use the same Git provider as the one your repo is saved on.

GitHub

Go to your “Settings” page on GitHub (click your avatar to reveal the menu), and access “Developer Settings”. Click “Register a new application” and provide the required values:

• a name, such as “Netlify CMS for my super blog”;
• a homepage URL, the link to your Netlify site;
• a description, if you feel like it;
• the application callback URL, which must be “https://api.netlify.com/auth/done”.

Save, and you’ll see your Client ID and Client Secret. Provide them to Netlify’s Access Control.

GitLab

Click your avatar to access the Settings page, and click “Applications” in the “User Settings” menu on the left. You’ll see a form to add a new application. Provide the following information:

• a name, such as “Netlify CMS for my super blog”;
• a redirect URI, which must be “https://api.netlify.com/auth/done”;
• the scopes that should be checked are:
  • api
  • read_user
  • read_repository
  • write_repository
  • read_registry

Saving your application will give you your Application ID and Secret, that you can now enter on Netlify’s Access Control.

Bitbucket

Head over to your user account settings (click your avatar, then “Bitbucket settings”). Under “Access Management”, click “OAth”. In the “OAuth consumers” section, click “Add consumer”. You can leave most things at their default values except for these:

• a name, such as “Netlify CMS for my super blog”;
• a callback URL, which must be “https://api.netlify.com/auth/done”;
• the permissions that should be checked are:
  • Account: Email, Read, Write
  • Repositories: Read, Write, Admin
  • Pull Requests: Read, Write
  • Webhooks: Read and write

After saving, you can access your key and secret, which you can then provide back on Netlify’s Access Control.

After providing the tokens, go to Netlify, and find the Site Settings. Head to “Identity” and enable the feature. You can now add an External Provider: select your Git provider and click on “Enable”.

In case you need additional details, Netlify CMS has an authentication guide you can read.

You can now access your Netlify site’s backend and edit content. Every edit is a commit on your repo, in the branch specified in your configuration file. If you kept your main branch as the target for Netlify CMS, each time you save, it will run a new build. More convenient, but not as clean with “in-between states”.

Having it save on a dev branch allows you to have finer control on when you want to run a new build. This is especially important if your blog has a lot of content and requires a longer build time. Either way will work; it’s just a matter of how you want to run your blog.

Also, please note that Git LFS is something you installed locally, so images uploaded via Netlify CMS will be “normal”. If you pull in your remote branch locally, the images should be converted to LFS, which you can then commit and push to your remote branch. Also, Netlify CMS does currently not support LFS so the image will not be displayed in the CMS, but they will show up on your final build.

Recommended reading: Static Site Generators Reviewed: Jekyll, Middleman, Roots, Hugo

Conclusion

What a ride! In this tutorial, you’ve learned how to export your WordPress post to Markdown files, create a new repository, set up Git LFS, host a site on Netlify, generate a Hugo site, create your own theme and edit the content with Netlify CMS. Not too bad!

What’s next? Well, you could experiment with your Hugo setup and read more about the various tools Hugo offers — there are many that I didn’t cover for the sake of brevity.

Explore! S'amuser! Blog!

Further Resources

(dm, yk, il)