Configuration du CMS Ghost: Partie 2

Historiquement, j'ai utilisé Drupal, Joomla, WordPress. Quand on lance Ghost, à première vue, on se dit "bof", cela ressemble aux autres… De plus, pff… c'est en anglais… Bon, je me suis dit "Ne fais pas ton paresseux, vas-y ! » De toute façon, ça ne coute rien d'essayer ce "truc". Tout compte fait ! Je me suis laissé emporter et au fur et à mesure, j'ai été séduit et bluffé ! Rien de compliqué du tout, je ne dis pas que WordPress est difficile d'accès, mais il s'embarrasse de beaucoup d'éléments ...

Ici, au contraire, on voit rapidement que les créateurs sont concernés par le pragmatisme. Je vous le dis honnêtement, en ce qui me concerne, il y a un avant Ghost, et un après. Il ne réinvente rien, mais il renouvelle le genre. C'est simple, fonctionnel et efficace !!!

Alors, oui, il faut appréhender l'édition d'un autre point de vue, ici, pas de super éditeur avec des fonctions programmées sur quasiment toutes les balises "HTML" : non, chez Ghost, l'éditeur principal est Markdown. Franchement, la simplicité des balises ! Un enfant de quatre ans serait les mémoriser !

Les paramètres sont en anglais, soit, mais c'est juste une page et rien de compliqué à interpréter.

Je ferai un reproche plutôt technique concernant la mise en place du service des e-mails. Elle est un peu fastidieuse, et au nombre de "posts" en anglais à ce sujet, je ne suis pas le seul à le penser. C'est une des raisons de mon choix d'installer ce CMS avec Ghost-cli, la configuration est plus aisée via le fichier "json". Je n'y suis pas arrivé avec Docker en intégrant les données d'environnement dans le fichier compose. Dans les deux cas, je n'ai pas réussi à faire fonctionner la messagerie avec iCloud, du coup, je me suis rabattu à regret chez Gmail.
Les développeurs de Ghost ont implémenté Mailgun qui est une bonne idée en soi, mais malheureusement, pour être pleinement fonctionnel, il faut s'orienter vers un abonnement payant.
Et quoi d'autre… Ah, si je n'ai pas réussi à mettre le site en mode maintenance… ce n'est pas bien grave, on en reparlera.

1-1ᵉʳ démarrage

On reprend là où on s'était arrêté, c'est-à-dire au premier lancement de notre blog :

http://10.0.0.22:2368/ghost/

Nous voici sur la page de démarrage où il faut indiquer quelques éléments :

On remplit dans l'ordre :

1. Le nom du blog
2. Son nom et prénom réels ou pas
3. Son email
4. Un mot de passe (attention, il ne demande pas une confirmation).
5. On valide "Create...)

Nous sommes maintenant, sur la page d'accueil de l'administration:

Pour l'instant, on ne va pas s'occuper de la partie droite, ni de la partie gauche d'ailleurs, on va directement aller dans les paramètres : c'est la petite roue dentée ⚙️ tout en bas à gauche :

2-La page des paramètres

Je vais développer chaque item de ce menu.

2a-General settings : réglages globaux partie 1

1. Titre&description : Titre et description, c'est important puisque c'est là que vous donnez un nom et une description de votre site.
   Ces deux éléments apparaissent en premier sur votre blog, c'est l'accroche pour le visiteur.
2. Site timezone : la zone du fuseau horaire où vous résidez
3. Publication Language : quelle langue pour vos publications ?
   "fr" pour français. (cela ne traduit pas le site)
4. Meta data : je dirais que c'est la partie la plus importante sur laquelle il faut s'attarder ou revenir en tout cas dessus afin d'être opérationnel. Ces données vont être indexées par les moteurs de recherche, le titre doit refléter ce que votre site implique et la description doit être la plus précise possible afin que les recherches d'un internaute puissent aboutir et qu'il clique sur un de vos liens... Vous pourrez aussi affiner chaque publication sur leur propre zone "meta"

2b- General settings : Réglages globaux : partie 2

1. X card (anciennement twitter)
   Si vous souhaitez que votre blog apparaisse sur X
2. Facebook card
   Idem.
3. Socials accounts : compte de réseaux sociaux.
   Renseignez vos comptes de connexion (facultatif)
4. Make site private : passer le site en mode privé
   Vous vous rappelez, je vous ai dit que je n'avais pas trouvé comment s'affiche le site en maintenance. C'est une option de remplacement, mais les moteurs de recherche ne peuvent plus indexer dans ce mode.
5. Staff : C'est la team, c'est l'équipe du site.
   Vous pouvez inviter d'autres personnes à rejoindre votre équipe de rédaction.

2c-Site

1. Design & branding : conception et apparence du site
   La partie esthétique de votre blog, c'est ici que vous allez gérer votre thème en fonction des paramètres que celui-ci autorise, couleurs, logo, description et présentation générale de votre page d'accueil et de vos posts...
   On reviendra en détail sur cette partie.

2. Navigation : la navigation dans le site, c'est là que vous mettez les liens vers les différentes pages de votre site. S'il y en a, ils apparaitront en menu en haut de la page principale.

3. Announcement : Annonce, c'est l'endroit en haut du site où vous pouvez indiquer un message particulier, une annonce ou autre chose à vos lecteurs.
   Cela ne fonctionne pas avec tous les thèmes.

2d-Menbership: adhésion

1. Portal settings : paramètres de l'invite ou portail pour les inscriptions et les connexions de vos membres. On y reviendra aussi plus tard.
2. Access: Les accès, c'est la façon dont vous autorisez les accès à votre site :
   ⇛ Qui peut s'inscrire sur votre site ?
   ⇛ Qui peut lire vos posts ?
   ⇛ Qui peut déposer des commentaires ?
   C'est vous qui choisissez, ça peut être personne...😁
3. Tiers: vous pouvez ici définir la manière dont les membres ont accès à vos contenus : gratuit ou payant.
4. Analytics : analyse : cela vous permet d'obtenir des statistiques de votre site en les collectant auprès de vos membres : nombre de clics, nombre d'ouvertures des newsletters, etc.

2e-Growth: Croissance du site

Ces deux éléments peuvent aider à booster votre site en augmentant les nombres de vues.

1. Recommendations: vous pouvez ici recommander des sites autres que le vôtre, vos membres peuvent également proposer des liens de publication.

2. Embeddable signup form : formulaire à intégrer à votre site : cela vous permet d'afficher directement sur votre page un formulaire d'inscription au lieu d'un simple lien.

2f-Email newsletter : courriel

1. Newsletter sending: autorise l'envoi des posts par courrier à vos membres.
2. Default recipients: Qui peut recevoir les e-mails ?
   –Celui qui souscrit
   –Les membres seulement
   –Personne, etc.
3. Newsletters: créer un modèle de newsletter pour l'envoi des posts à vos membres. Cela fonctionne uniquement avec Mailgun.
4. Mailgun : C'est le prestataire recommandé par Ghost pour l'envoi de newsletters ou courriels à vos membres. Sans un compte chez ce prestataire, vous ne pouvez pas envoyer de newsletters. Si vous voulez interagir avec les membres sans ce service, il faudra paramétrer la réception et l'envoi d'un e-mail d'une autre façon.

2g-Avanced : Options avancées

1- Integrations : c'est une liste d'applications "tierces» qu'on peut intégrer à Ghost. A part Unsplash (dossier d'images en ligne) qui est activé par défaut, je ne m'attarde pas, à vous de voir si vous en avez l'utilité.

2- Migrations tools : vous pouvez importer vos données d'autres plateformes de publication, je n'en connais aucune.🤔
⇛Par contre, le dernier bouton "universel import" nous intéresse. On peut récupérer les sauvegardes de nos configurations et de nos posts. L'onglet "export" permet de sauvegarder ces éléments !

Comme on l'a vu dans la première partie de l'installation, Ghost-cli permet aussi de faire des sauvegardes :
# ghost backup

Je profite pour insister sur la sauvegarde. Le fait de rédiger prend énormément de temps, un incident est vite arrivé et perdre des heures, des jours, des semaines, voire des mois de travail, ce n'est pas drôle du tout. Alors, pensez-y, cela prend trois secondes pour le faire !!!

3- Code injection : Ici, on peut modifier quelques aspects du thème choisi, en injectant du code CSS ^[1]
Soit en tête de site(header) ou bas de site (footer), cela peut être par exemple : Le format de l'image ne vous parait pas adapté, vous pouvez dans ce cas injecter un code permettant la modification de la taille. À cet endroit, votre code va concerner l'ensemble des posts. Il est possible de le faire individuellement...

4- Labs : laboratoire, c'est l'endroit où Ghost propose des options expérimentales : une nous intéresse, c'est "portal translation", si vous l'activez, vous aurez votre formulaire d'abonnement en français.

5- History : C'est le journal des logs.

6- Danger zone : C'est assez explicite, si vous appuyez, vous détruisez tout !!!🫢😱😭

7- Et pour finir "About Ghost" Cela vous indique la version, l'environnement, la base de données, etc.
Vous avez un message en rouge qui indique peut-être que vous n'utilisez pas la bonne version de MariaDB. Le message indique la version 8, nous sommes sur la version 10… Eh bien, moi, je dis "Roulez jeunesse"

3-Apparence du site

Les thèmes

Je reviens sur l'option "Design&Branding" qui est l'endroit où l'on va gérer l'apparence du site :

Si on clique sur "customize", on arrive sur la page concernée.

La première chose à faire, c'est d'adapter un thème à votre site. Pour ce faire, vous cliquez en bas à droite "change theme".

Vous avez des propositions par défaut, mais sachez qu'aucun de ces thèmes n'est prévu pour une publication en français. Il existe des sites qui mettent à disposition des thèmes gratuits ou payants.

Je peux vous proposer deux thèmes gratuits pour une publication en français. J'insiste bien sûr "publication", c'est-à-dire que cela va franciser les indications de vos pages et de vos posts dans votre langue, mais pas les pages d'administration du site.

Le thème Liebling master
Le thème Casper français

Sur la page de "github" vous avez un bouton vert où il y est inscrit "code" Vous cliquez et vous téléchargez le thème à l'emplacement "download zip".

Une fois téléchargé, importer le thème de cette façon :
En haut à droite, vous avez un bouton noir "upload theme", vous cliquez et vous suivez les instructions, ce n'est pas compliqué.
À la fin, il vous propose de l'activer pour votre site.
Pour "liebling master, il se peut qu'il vous indique une erreur, ce n'est pas gênant pour la suite, activez quand même.

Pour l'exemple, je choisis le thème casper-i18n (le français).
Nous voici donc sur la page du thème :

Tout en haut, vous avez à gauche les onglets "Home page" et "Post", en cliquant dessus, vous voyez les changements qui sont faits sur l'un ou sur l'autre.
Sur la même ligne au milieu, vous avez deux icônes "écran" et "smartphone" cela vous permet de voir ce que donne le site sur un écran PC et sur un téléphone.
Allez, on commence !

Toutes les modifications s'affichent automatiquement à gauche.
vous avez un bouton en haut de la page "view site" qui vous permet de voir l'aspect global du site

• Le premier onglet "Brand" signifie "Marque" :

  • vous pouvez aussi, à cet endroit, modifier votre description.
  • Vous pouvez modifier la couleur globale du site, cela concerne les bandeaux, les boutons, les liens, etc.
  • Vous pouvez importer une icône (taille maxi 60 px), celle qui accompagne votre URL.
  • Vous pouvez aussi intégrer un logo sur votre entête de site
  • Une image de couverture pour la présentation de votre page d'accueil. Ici, il ne faut pas qu'elle soit trop gourmande (maxi 2000 pixels) afin de ne pas gêner la fluidité du site.

• Le deuxième onglet "Sitewide" qui veut dire à "l'échelle du site" :

  • Vous pouvez définir ou doit apparaitre le logo (s'il y en a un),
  • Vous pouvez changer la police du titre, de la description ainsi que les éléments du site.
  • Le "color sheme" c'est l'apparence claire ou sombre du site. Soit, vous décidez d'un aspect, soit vous laissez en automatique.

• Le troisième onglet "Home page" page d'accueil en français :

  • le premier item : "show publication cover", vous affichez ou pas l'image de couverture (votre image téléchargée ou par défaut le panneau couleur).
  • Ensuite,"header style", vous pouvez décider de la position du titre et de la description dans l'entête du site.
  • Suivi de "feed layout", vous pouvez modifier l'organisation des posts (les entêtes de vos publications) sur votre page d'accueil. La plus sympa, c'est "classic".

• Le dernier onglet "Post" : L'aspect votre publication (cliquez sur l'onglet "post" en haut à gauche pour voir les modifications) :

  • Le premier "post image style" vous permet de modifier la largeur de l'image d'entête ou de la cacher.
  • "email signup text" vous permet de mettre un texte ou pas pour attirer un futur membre.
  • Le dernier qui est un bouton, vous permet d'afficher en bas de page le titre des derniers articles.

Voilà pour l'exemple de "casper-i18n", les autres thèmes seront un peu près similaires avec plus ou moins d'options.

Après toutes vos modifications vous devez sauvegardez, bouton "Save" en haut à droite!!

En ce qui concerne le menu en haut des pages du site, c'est dans la partie "navigation" du menu paramètres (voir plus haut) qu'on inscrit les liens en français.

Il est possible que certains éléments des pages de votre site ne soient pas traduits, je pense notamment "Sign in" en haut du site devrait être traduit par "se connecter"
Sachez qu'il est possible de rajouter des traductions très facilement dans le thème.

Il suffit d'éditer le fichier suivant dans le thème concerné :
# sudo nano /opt/ghost/content/themes/casper-i18n-master/locales/fr.json

{
	"Enter your email": "Entrer votre email",
	"Account": "Compte",
  "Home": "Accueil",
  "Sign in": "Se connecter",
	"Subscribe": "S’abonner",
	"Subscribe to {blogtitle}": "S’abonner à {blogtitle}",
	"A collection of posts": "Une catégorie d’articles",
	"A collection of 1 post": "Une catégorie avec un article",
	"A collection of % posts": "Une catégorie avec % articles",
	"Get the latest posts delivered right to your inbox": "Recevez les derniers articles directement dans votre boîte aux lettres.",
	"Go to the front page": "Aller sur la page d’accueil",
	"Latest Posts": "Derniers articles",
	"Message": "Message",
	"No posts": "Aucun article",
	"Ref": "Réf",
	"1 post": "Un article",
	"% posts": "% articles",
	"1 min read": "1 min de lecture",
	"% min read": "% min de lecture",
	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Génial!</strong> Vérifiez votre boîte de réception et cliquez sur le lien pour confirmer votre abonnement.",
	"Please enter a valid email address!": "S'il vous plaît, mettez une adresse e-mail valide !"
}

Il suffit de faire correspondre le terme anglais au français comme indiqué dans ce fichier.

Vous enregistrerez votre modification et vous redémarrez Ghost

# Ghost restart

4-Configuration du portail des visiteurs

Et pour finir cette deuxième partie de Ghost, je reviens sur "portal settings"
C'est ici que l'on configure le portail qui permet aux visiteurs de s'inscrire et aux membres de se connecter.

Sur cette page, vous avez en haut à gauche trois onglets.

• L'onglet "Signup" montre l'aspect de la fenêtre pop-up de la souscription ou de la connexion des membres.
• L'onglet "Accounts page" montre une fenêtre vue par la personne connectée en fonction des options que vous aurez activées (vu précédemment)
• L'onglet "Links" vous donne tous les liens de connexion que vous pouvez intégrer à vos posts.

On passe maintenant à la partie droite.

• Le premier onglet "Signup options":
  • le bouton "Display name in signup form" active et désactive le champs du nom de la personne.
  • La case à cocher "free" affiche l'onglet "s'inscrire" sinon "décoché". Elle n'autorise que les membres à s'identifier.
  • Attention ici à la cohérence avec les accès que vous avez définis. On a vu cela plus haut.
  • "Display notice at signup" vous pouvez ici écrire et afficher des indications. Si vous écrivez quelque chose, un bouton apparaît juste en dessous.
    "require agreement". Si vous l'activez, cela oblige la personne qui s'abonne à valider ces indications.
• Le deuxième onglet "look&feel" permet d'afficher un bouton de souscription.
  • "Portal button style" affiche une icône avec texte ou une icône ou un texte seulement.
  • "Signup button text" permet de personnaliser le texte de ce bouton.

Personnellement, je ne l'utilise pas, il y a suffisamment d'endroits où la possibilité de s'inscrire apparaît. De plus, je trouve qu'il prend trop de place sur le smartphone, chacun voit...

• On finit par L'onglet "Account page" qui n'a qu'un seul item :
  • "Support email address": C'est là que vous indiquez l'adresse de contact qui recevra les e-mails. On utilisera cette dernière pour configurer la partie messagerie qu'on verra dans la troisième partie.

C'est terminé pour cette seconde partie. La troisième partie sera de terminer les paramétrages.

Courriel et domaine du CMS Ghost : Partie 3

Nous allons configurer la mise en service du courriel et enfin le pointage de votre blog sur le nom de domaine. Je vous recommande d’utiliser Gmail.

TOMRZOTom