ce bon vieux blog

Dans cette deuxième partie nous allons voir comment configurer Netlify pour servir les pages du site. Si vous ne l’avez pas lue je vous conseille de démarrer par la partie 1 de l’article qui explique comment déplacer le code du site dans Github.

Le truc génial avec Netlify, c’est qu’il s’occupe de faire tout ce qui est généralement bien pénible à configurer :

• Il va être le serveur web des pages
• Il est CDN (Content Distributed Network) pour accélérer la performance du site, et prend entièrement à sa charge la gestion du rafraîchissement du cache. Fini les arrachages de cheveux parce que le cache ne s’est pas mis à jour correctement.
• Il offre un DNS très rapide pour réduire la latence de connexion.
• Il gère le https pour vous (si vous le souhaitez), et force la redirection de http vers https.

Pour pas un roro, c’est déjà super. Mais si en plus je vous dis que Netlify :

• Compile automatiquement le site hugo pour vous à partir du repository Github
• Déploie automatiquement la branche compilée
• Permet de tester autant de branches alternatives (versions de test ou versions futures par exemple) que souhaité
• Permet de faire du A/B testing automatiquement
• Permet de faire un rollback (retour en arrière) simplement en cas de catastrophe.
• Offre un système de gestion de contenu hyper rapide (CMS).

Et tout ça toujours pour zéro roros ? Elle est pas belle la vie ?

Configurer Netlify

C’est bien beau tout ça, mais du coup ça doit sûrement être compliqué de tout paramétrer. Ben non. La magie de Netlify c’est que tout reste super simple.

Créer un compte Netlify

Pour créer un compte Netlify, identifiez-vous avec votre compte Github.

Pourquoi avec votre compte Github ? Parce que… Netlify va automatiquement vous proposer les différents projets que vous avez stockés sur Github. Donnez l’autorisation à Netlify d’accéder à votre compte Github. Voilà, vous venez de configurer votre compte Netlify.

Ajouter son site Hugo sur Netlify

Pour ajouter un site commençons par cliquer sur le bouton « New site from Git ».

Ensuite, il faut choisir « Github » (ou une des autres options si votre code est hébergé chez GitLab ou un autre).

Il faut de nouveau autoriser Netlify à accéder aux repositories GitHub.

Sélectionnez alors le repository qui contient le code de votre site, dans mon cas « www.testtoto.com ».

Il ne reste désormais plus que quelques informations à fournir :

• Vous pouvez normalement laisser le nom de la branche à déployer à « master » (comme expliqué dans l’article précédent, c’est le nom par défaut de la version « validée »).
• La « Build command » est simplement… hugo
• Le nom du répertoire de publication est public

Une fois ces informations renseignées, vous pouvez cliquer sur « Deploy Site ». En général la compilation et publication d’un site prend entre quelques secondes et quelques minutes maximum.

Netlify attribue automatiquement un URL au nouveau site qu’il gère. Dans mon exemple cet URL est http://eager-hugle-1657a8.netlify.com - Le site est désormais accessible directement à cet URL, mais il ne vous convient certainement pas. Nous allons donc maintenant passer aux étapes 2 et 3 : la configuration d’un nom de domaine personnalisé et du https.

Configurer le nom de domaine

Mon nom de domaine est pierremorsa.com, et je l’ai acheté il y a un bout de temps… Pour le configurer, il y a deux solutions :

• Modifier les informations du DNS existant pour pointer vers les serveurs de Netlify.
• Ou utiliser les serveurs DNS de Netlify.

Je ne vais décrire ici que la deuxième option, utiliser les serveurs DNS de Netlify. Ils se vantent d’avoir les serveurs DNS les plus rapides du monde. J’ignore si c’est vrai.

Cette opération est rendue la plus simple possible par Netlify, mais elle reste malgré tout assez délicate, et parfois un peu déroutante, car il y a un temps de latence entre le moment où l’on demande la modification des paramètres d’un DNS et le moment où ces changements deviennent effectifs partout dans le monde. C’est une opération à faire le moins souvent possible.

Cliquez sur « Set up a custom domain ». Si vous avez loupé cet écran, cliquez simplement sur « Domain settings » → Domain management → Domains et cela reviendra au même.

Cliquez ensuite sur « Add custom domain », entrez le nom de votre domaine, puis sur Save.

À ce niveau, vous allez probablement avoir une erreur. Cliquez sur le message « Check DNS configuration ». Cliquez alors sur « Set up Netlify DNS for votredomaine.com ».

Dans l’écran qui apparaît, cliquez sur Create DNS zone.

Netlify crée alors les données de base pour le DNS, mais vous pouvez allez avoir besoin d’ajouter des infos manuellement. Encore une fois, c’est la partie la plus « compliquée » du processus car chaque cas est différent. Par exemple si vous avez un service d’email lié à votre nom de domaine (dans mon exemple email@testtoto.com) vous devrez configurer correctement les données DNS de votre service d’email sinon vos emails vont se perdre dans la nature.

Une fois cette étape effectuée, allez sur le service chez qui vous avez enregistré votre nom de domaine, et modifiez les serveurs DNS actuels par ceux de Netlify.

Une fois cette étape terminée, et une fois que les serveurs DNS dans le monde se seront mis à jour, votre site Hugo www.votresite.com sera servi par Netlify hyper rapidement ! Il ne vous restera plus qu’à activer le https pour que tout soit parfait ; l’opération étant très simple, je ne la détaillerai pas ici.

Dans cette première partie je vous propose un tutoriel pas à pas pour créer le fichier netlify.toml, et héberger le code du site sur Github.

Ce blog est une sorte de cobaye. Je lui fais subir des tas d’expériences lorsque je veux tester ce que cela donne. À l’origine c’était une simple page web, puis il a migré sur Joomla un des premiers « CMS » 100% Web, puis sur Wordpress qui était et est encore la solution préférée de beaucoup de sites. Fatigué des problèmes à répétition de WordPress (sécurité, mise à jour des plugins, etc.) j’ai fini par migrer en 2016 vers un site statique généré par le génial Hugo.

Jusqu’il y a peu ce blog était encore chez un hébergeur classique, mais depuis la semaine dernière il tourne avec le couple Github + Netlify. Github stocke tout le contenu et tout le « code » du site (à mon sens ce n’est pas vraiment du code car ça n’exécute rien, mais plutôt des données structurées), et Netlify sert les pages depuis son CDN. À en croire ce test, le résultat en termes de performances me semble plutôt probant :

Évidemment ce test risque de ne pas être 100% impartial vu qu’il est proposé depuis le site de Netlify. Cependant mon autre site Ideas on Stage a un score presque parfait alors qu’il n’est pas hébergé par Netlify mais par le tandem Dreamhost + Cloudflare, donc je crois à une certaine objectivité.

Je dois dire que je suis très impressionné par Netlify. Son avantage ce n’est pas que la rapidité. C’est aussi tous les outils qui vont autour. En tandem avec Github, il est possible de tester autant de branches différentes que l’on veut (une branche, c’est un peu comme une « version alternative d’un site»). Il est également possible de faire un « rollback », autrement dit de revenir simplement à la version précédente du site en cas de problème. En utilisant un webhook déclenché depuis Zapier j’ai même pu automatiser la publication des nouveaux articles à intervalles réguliers, ce qui était plus difficile à faire avec mon système précédent.

Le seul désavantage c’est que je n’ai plus du tout de statistiques, car je n’avais que les chiffres collectés par défaut par mon hébergeur. C’est facile à résoudre en intégrant Google Analytics, mais ce blog étant garanti 100% sans JavaScript je ne l’utiliserai pas, et pour moi ce n’est pas gênant.

Coût total de l’hébergement avec cette solution : 0€. Oui c’est assez dingue, ça ne coûte rien pour les versions de base. la seule partie qui reste payante est le nom de domaine.

Ci-dessous vous trouverez la procédure que j’ai suivie pour migrer ce blog vers Github + Netlify. Je l’ai réalisé depuis un Mac, mais c’est très similaire depuis n’importe quel autre système. Pour suivre ce tutoriel il vaut mieux :

• Savoir vous servir un peu du terminal
• Comprendre les notions Github de « commit », « branch », « pull » et « push »
• Comprendre comment un DNS fonctionne

Créez un fichier netlify.toml

À la racine du site, dans le même répertoire que celui qui contient déjà config.toml il faut ajouter un fichier nommé netlify.toml, qui contiendra les versions de Hugo à utiliser par Netlify pour compiler le site. Voici le contenu de mon fichier netlify.toml :

[context.production.environment]
  HUGO_VERSION = "0.31"
  
[context.deploy-preview.environment]
  HUGO_VERSION = "0.31"

Pour les total flemmards vous pouvez télécharger directement le fichier ici

Mettez le code du blog sur Github

Si vous ne connaissez pas du tout Github, à la base c’est une solution pour gérer différentes versions d’un « répertoire ». C’est très utile pour les développeurs, qui peuvent ainsi garder une version stable de leur code et en parallèle travailler sur des nouvelles versions sans devoir tout dupliquer. Qui peut le plus peut le moins. Github peut servir à « versionner » des répertoires de documents, et dans notre cas le code source d’un site.

Créez un compte Github

Je ne vais pas expliquer cette partie, il suffit d’aller sur github.com et de se créer un compte, c’est à la portée du premier utilisateur de Facebook venu. Si comme pour moi laisser le code source de votre site accessible à tous n’est pas un souci, vous pouvez créer un compte gratuit, sinon il faudra payer 7$ par mois pour avoir un repository privé. Gardez bien le nom d’utilisateur et le mot de passe car nous allons en avoir besoin.

Si vous ne connaissez pas le fonctionnement de Github je vous conseille de lire le guide de démarrage car ce n’est pas forcément intuitif, surtout si vous n’avez jamais fait de développement.

Par contre pas besoin de démarrer un nouveau projet, car nous allons utiliser le répertoire existant sur votre ordi.

Initialisez le « repository » Github

À partir du terminal, allez dans le répertoire qui contient le code du site. Par exemple ~/Sites/Hugo/www.testtoto.com/

Une fois dans le bon répertoire tapez la commande suivante pour initialiser le répertoire Github :

git init

Vous devriez avoir un message du genre

Initialized empty Git repository in ~/Sites/Hugo/www.testtoto.com/.git/

Voilà, c’est tout, on pourrait tout faire depuis la ligne de commande en tapant des tas de trucs qui font intelligent mais ça me casse les pieds. Je vais donc utiliser le client Github Desktop pour la suite.

Téléchargez et installez Github Desktop.

Pour ce faire cliquez sur le lien ci-dessous :

Github Desktop

Une fois installé, lancez Github Desktop, et utilisez votre nom d’utilisateur et mot de passe pour vous connecter à votre compte Github.

Ajoutez votre répertoire git local à Github Desktop

Si l’application ne vous le propose pas par défaut commencez par ajouter votre repository :

File → Add Local Repository...

Attention : avant de lancer la copie de vos fichiers vers Github, vérifiez qu’il n’y a pas d’autres répertoires .git cachés dans les sous-répertoires, en particulier dans les répertoires des thèmes, sinon vous risquez d’avoir des erreurs.

Voilà, normalement la barre du haut doit ressembler à ça :

Si nécessaire faites un commit de tous les changements sur la branche master (par défaut master est la branche principale de votre projet, celle qui fait office de référence pour la version « stable » de votre code). L’opération de commit « officialise » les changements, cela signifie, « c’est bon ces changements sont validés et peuvent être publiés ».

Il suffit maintenant de cliquer sur le bouton Publish repository et tous les fichiers locaux vont être copiés vers Github.

L’avantage est que vous pouvez désormais synchroniser vos modifications locales et en ligne (dans le clllowwd comme on dit). Cependant pour se faire il faut bien comprendre les notions de « branch » et « commit » sinon vous risquez de galérer. J’essaierai de prendre le temps de les expliquer plus en détail dans un autre billet. Pour la suite du tutoriel je vais prendre l’hypothèse que vous modifiez les fichiers uniquement depuis le répertoire local.

Votre site est désormais sur GitHub. Si vous rafraîchissez la page vous devriez le voir apparaître dans la liste des repositories.

Vous bénéficiez désormais de la gestion des versions, qui est la raison d’être de git. Dans la partie 2 nous allons voir comment configurer Netlify pour automatiser le déploiement du site et servir les pages aux visiteurs.

Révisions :

• 2017-12-21 : amélioration de l’explication de certaines étapes en particulier pour Github.

Pourquoi Donald Trump est-il crédible ? Je veux dire, pas crédible pour vous ou moi. Mais pourquoi est-il crédible pour pratiquement 50% des américains ? Après tout, n’a-t-il pas échoué à tenir plusieurs de ses promesses, comme supprimer l’Obamacare, fermer les frontières à toute immigration et construire un mur à la frontière mexicaine financé par le Mexique ? N’a-t-il pas été pris plusieurs fois en flagrant délit de mensonge, ou tout du moins n’a-t-il pas une vision très approximative de la réalité ? Alors, qu’est-ce qui alimente la crédibilité de Trump ?

C’est son style de communication. Trump défend sans aucun complexe les valeurs identitaires de son électorat. L’exactitude des faits n’est que secondaire. Son audience accepte de « suspendre son esprit critique » car elle a envie de croire et d’adhérer aux valeurs communiquées par Trump.

Contrairement à ce qu’on lit parfois ce n’est pas une question de niveau d’éducation ; une partie de l’électorat de Trump est très intelligent et bien éduqué. Ce qui compte ici, ce n’est pas le QI, c’est l’Ego. L’Ego est l’image d’elle-même que chaque personne se construit ; et les valeurs identitaires sont une part très importante de cette image. Pour l’électorat de Trump, c’est l’adéquation du discours à leurs valeurs qui prime sur l’exactitude des faits et le côté rationnel. Vous pouvez penser qu’il est impossible que près de 50% de la population américaine partage les valeurs de Trump. Et pourtant si vous regardez bien, c’est le cas. Et si vous regardez bien les personnes qui en Europe soutiennent ou ont soutenu Donald Trump pendant un temps, ce sont des personnes qui se reconnaissent dans ses valeurs et s’y identifient.

Il serait facile de se moquer des électeurs de Trump et de leur « manque » de sens critique. Et je le ferais volontiers si les électeurs de l’autre côté, moi y compris, ne fonctionnaient pas exactement de la même manière. Ainsi Hillary Clinton n’a pas du tout perdu l’élection à cause de ses problèmes d’email, mais parce que elle n’a pas su assez incarner les valeurs des électeurs démocrates. Ce qui lui a été fatal c’est que pour toute une partie de son électorat Bernie Sanders a mieux incarné leurs valeurs qu’elle. Et le jour J une partie de ces personnes ont préféré s’abstenir plutôt que d’aller voter. Pire, un nombre non négligeable ont voté pour Trump.

Que l’on soit de gauche ou de droite, démocrate ou républicain, vert ou rouge, nos valeurs occupent une part très importante dans notre processus de décision.

C’est pourquoi Trump reste crédible tant que son discours reste crédible vis-à-vis des valeurs de son électorat, et non vis-à-vis des faits. Ce qui peut tuer Trump, c’est de déclarer du jour au lendemain que l’Obamacare est finalement un plan génial et qu’il faut le maintenir coûte que coûte. Ou de dire que le mur à la frontière du Mexique est une connerie. Ça, ça va le décrédibiliser, car ces déclarations seraient contraires aux valeurs identitaires de son électorat.

Notre Ego s’accorde assez bien du fait de s’identifier à des valeurs que nous ne respectons absolument pas en pratique ; ou plus exactement il va réussir à tordre la réalité pour qu’elle s’accorde avec l’image qu’il s’est construit de nous-mêmes. C’est pourquoi certains Nazis étaient à la fois des pères exemplaires et des monstres de barbarie. Un des grands drames de l’humanité est que notre Ego s’accorde très bien de ses contradictions, aussi horribles soient elles, tant que l’image qu’il a construit de nous-mêmes reste conforme aux valeurs auxquelles il s’identifie.

Maintenant, peut-on changer cela ? Peut-on agir d’une manière ou d’une autre sur l’électorat de Trump pour le faire changer de camp ? Oui et non.

Non, car une partie de son électorat a des valeurs trop ancrées et trop éloignées des valeurs démocrates pour changer de camp. Même si le GOP se retrouve à l’agonie, cet électorat votera toujours pour lui… ou pour un autre parti qui porte mieux les valeurs dans lesquelles cet électorat se reconnaît.

Oui, car une autre partie de son électorat a des valeurs qui sont à cheval entre les valeurs défendues par Donald Trump et celles défendues par le camp démocrate. Si les démocrates parviennent a donner une incarnation plus forte de ces valeurs et à les rendre dominantes dans le fil narratif, ils peuvent s’imposer.

Serions-nous donc totalement conditionnés par notre Ego et ses valeurs ? Serions-nous incapables de raisonnement critique lorsque nous choisissons un candidat ? Et bien heureusement et malheureusement pas tout à fait. Une question en particulier va activer notre sens critique, ou plutôt une forme de sens critique. Mais j’expliquerai cela une autre fois.

Le logo est l’âme d’une startup. Son image, le reflet de son âme et de ses valeurs. Aussi je vais poser une question importante, vitale, essentielle :

Êtes-vous sûr d’avoir le bon logo ?

A-t-il la bonne forme ? A-t-elle l’air moderne, dans l’air du temps ? Faut-il choisir l’harmonie du cercle ou la brutale efficacité du carré ? Lequel s’affichera mieux sur l’écran d’accueil d’un iPhone ? Et d’un téléphone Android ?

Et la couleur alors ? La nuance de bleu choisie est-elle la plus efficace ? Peut-être que l’orange aurait plus d’impact ? Le rouge va-t-il être perçu comme percutant ou trop agressif ? Les couleurs offrent-elles un contraste suffisant pour les mal voyants ? La mode est-elle aux dégradés ou aux aplats ?

Plus important encore, la police de caractères. N’avez-vous pas utilisé une police de caractères trop utilisée ? Connaissez-vous son histoire ? Peut-elle être lue à distance ? Peut-être qu’une police personnalisée, construite sur mesure, serait plus adaptée ?

Vous voulez connaître le vrai secret pour faire un bon logo ?

Le secret du logo c’est que les gens normaux n’en ont rien à foutre.

Ces histoires de forme, de couleur, d’histoire de polices ? 99,99% des gens n’y connaissent rien et s’en contrefichent. Les Startups efficaces développent le meilleur produit possible, trouvent des clients, gèrent leur cash flow et ne perdent pas de temps sur cette connerie de logo.

La semaine dernière, quelqu’un a tweeté cette image¹.

Sincères condoléances, sans autre forme de procès et sans aucune autopsie le storytelling est déclaré mort et enterré. Par contre, c’est sûr, les affirmations gratuites sont bien vivantes, elles. Désolé pour ce monsieur, mais le storytelling est bien vivant, en pleine forme, et le sera tant qu’il y a des humains sur terre.

La preuve ? Chaque fois qu’un nouveau film est réalisé, le storytelling est vivant. Chaque fois qu’un livre est publié, le storytelling est vivant. Chaque fois qu’une histoire est racontée, le storytelling est vivant. Chaque fois qu’un bon orateur donne une présentation TED, le storytelling est vivant. Déclarer le storytelling mort pour créer un effet d’annonce est sans aucun doute provocant et attire l’attention —d’ailleurs cela a attiré la mienne— mais c’est tout simplement faux.

Le storytelling ne va pas disparaître car il est une partie intégrante de ce qui fait de nous des êtres humains. Depuis l’aube de l’humanité, depuis que nous avons acquis la capacité de communiquer et d’échanger par la parole, le storytelling a été présent. Pour simplement raconter des histoires, mais aussi pour transmettre notre savoir et nos valeurs morales. Même aux heures les plus sombres de l’humanité il y aura toujours des personnes pour raconter des histoires extraordinaires.

Le jour où le storytelling disparaîtra sera le jour où l’humanité disparaîtra.