Cela fait des mois que je souhaite créer un blog minimaliste, design, performant et optimisé SEO mais je ne suis jamais passé à l’action et pour cause, je manque cruellement de temps.
Dans cet article je vous partage mes réflexions et surtout un guide comme raccourci vous permettant de faire de même.
Pourquoi Ghost ?
Après avoir envisagé WordPress, Strapi, et même SvelteKIT avec de simples fichiers Markdown, je me suis tourné vers Ghost qui :
- est basé sur Node JS
- offre de remarquables performances
- propose du Markdown
- intègre nativement certaines fonctionnalités essentielles
Tout cela en restant ridiculement simple aussi bien dans l’utilisation que l’installation et la maintenance.
C’est également Open Source, robuste, minimaliste et surtout très agréable à utiliser.
En bref cela colle parfaitement à mes besoins et mes valeurs.
Installation de Ghost sur un VPS
Je déteste dépendre d’un service tiers sur lequel je n’ai pas la main à 100% mais je dois avouer que l’auto hébergement colle aussi bien avec mon côté bricoleur et…Mon envie de tout contrôler. Du coup un VPS avec mes petites applications en « self-hosted », imaginez bien que pour un autiste comme moi c’est le top.
Prérequis
- Pour suivre ce guide vous devez connaître les bases de l'éditeur de texte "nano" et avoir installé une version récente de docker sur votre machine.
- Être en capacité d’ajouter un enregistrement de type IPV4 (A) sur son nom de domaine pour le faire pointer sur le VPS.
- Comprendre et maîtriser l’utilisation du serveur web permettant le reverse proxy et le SSL comme Caddy, Apache ou encore Nginx.
Création du docker compose
- Connectez-vous sur votre serveur via SSH et commencez par créer un dossier pour Ghost sur lequel vous aller vous positionner.
- Utilisez nano pour créer un fichier "docker-compose.yml".
- Insérez ceci dans le fichier :
Ce docker compose inclus à la fois le CMS Ghost mais également la base de données MySQL sur laquelle il repose et également PhpMyAdmin qui peut permettre certaines choses qui ne sont normalement pas possible. Je pense notamment à la suppression d’un commentaire indésirable sans qu’un message du type « Ce commentaire a été supprimé » n’apparaisse.
Créer le fichier de configuration Ghost
Ce fichier de configuration
Utilisez nano pour créer un fichier "config.production.json".
Insérez ceci dans le fichier :
Lancer l’app
Il est temps de lancer notre application !
Pour ça on commence par créer les volumes :
Puis, on exécute la commande suivante.
Bravo ! Votre Ghost fonctionne, vous pouvez en attester en visitant cette adresse : « <ip-de-votre-vps>:3000/ghost ».
Configurer votre DNS et votre « reverse proxy »
C’est pas le tout d’avoir Ghost, il faut maintenant lui associer un nom de domaine.
J’ajoute donc un enregistrement dans la zone DNS de mon nom de domaine de type « A » qui contient l’ip de mon serveur afin de le faire pointer vers le VPS.
Et je modifie la configuration de caddy pour ajouter une redirection de port :
Si vous n'avez pas de reverse proxy, je vous invite à consulter cet article dans lequel je vous aide à installer Caddy.
Après avoir redémarré Caddy, mon blog est accessible depuis mon nom de domaine !
Traduction du thème
En tant que bon français, l’idée de rendre accessible le dev à d’autres qui ne parlent pas anglais me plaît bien. Pour être cohérent, j’ai donc décidé de traduire les boutons d’abonnement du thème « solo » que j’ai choisi.
Dans ce but, on va se connecteur sur le conteneur docker, installer nano et modifier le fichier thème.
Entrer dans le Shell du conteneur
- On cherche l’id du conteneur où est Ghost
- On entre dans le terminal du conteneur en mode interactif (-it)
Installation de nano sur Alpine
- On met à jour les dossiers et on installe nano
Modification du thème Ghost
- On va dans le dossier du thème que l’on souhaite modifier
- On édite le fichier voulu (ex : index.hbs)
Sortie et redémarrage du conteneur docker
- On sort du conteneur
- On redémarre ghost
Configuration SMTP pour les e-mails transactionnels
En essayant de m’« abonner » à mon propre blog, je me suis rendu compte que ça ne fonctionnait pas.
Une erreur s’affichait, m’envoyant me faire cuire un œuf - et vérifier les logs…
Il s’agissait d’un e-mail transactionnel qui avait décidé de ne pas partir. Normal, je n’ai configuré aucune adresse e-mail.
Si vous n’avez pas déjà d’adresse e-mail disponible en SMTP facilement, je vous conseille d’utiliser le service Resend qui offre 3000 emails par mois gratuitement. Pour ma part je dispose d’un « Mailu » lui aussi auto hébergé qui me permet de faire cela.
Accéder au fichier de configuration Ghost
Connectez-vous à nouveau en SSH à votre VPS et accédez à nouveau au fichier de configuration créé plus tôt :
Configurer son serveur SMTP
Actuellement, voici à quoi ressemble l’objet email :
Pour utiliser un serveur SMTP, il suffit de le remplacer par quelque-chose qui ressemble à ceci :
J’ai volontairement laissé mon prénom et mon nom pour plus de clarté mais sachez que ce qu’il y a dans le from est le nom qui s’affiche lorsqu’un utilisateur reçois un email.
smtp.resend.com
, le port 465
, le username resend
, le mot de passe une clé API que tu auras préalablement créé et dans l'expéditeur tu peux mettre ce que tu veux tant que le nom de domaine est celui que tu as configuré sur resend (ex : test@timtiret.com
ou contact@timtiret.com
, pour le nom de domaine timtiret.com
.Redémarrer Ghost
Pour appliquer la nouvelle configuration, vous pouvez redémarrer le conteneur Ghost.
Affichage de code
Nativement il est possible d'afficher du code mais c'est pas très beau, ni efficace, j'ai donc décider d'ajouter la coloration syntaxique ("syntax highlighting") et un bouton de copie.
Pour ce faire, il suffit d'injecter un outil nommé "Prismjs".
Coloration syntaxique
On se rend donc dans les paramètres de Ghost puis tout en bas dans la section "Advanced" sur le menu "Code injection".
Voici ce qu'il faut ajouter dans l'onglet "Site header".
Ici, j'utilise le thème Okaidia que je préfère personnellement mais vous pouvez remplacer prism-okaidia.min.css
pour avoir un autre thème.
En voici la liste :
- Tomorrow :
prism-tomorrow.min.css
- Dark :
prism-dark.min.css
- Funky :
prism-funky.min.css
- Okaida :
prism-okaidia.min.css
- Twilight :
prism-twilight.min.css
- Coy :
prism-coy.min.css
- Solarized :
prism-solarizedlight.min.css
Bouton permettant la copie
De même, pour afficher le petit bouton "copy", voici le code à ajouter.
J'avoue, le CSS ne vient pas de moi et je ne me suis pas amusé à l'analyser mais je l'ai légèrement modifié et je trouve que cela rend bien.
Sauvegardes
Je rajoute cette partie quelques-mois après car j'avoue avoir peur de perdre tout ce que je mets sur ce blog. On va donc mettre en place un système de sauvegardes distantes qui nous permettra de dormir sur nos deux oreilles...
Je retourne donc sur mon serveur dans mon dossier ghost :
On va créer 2 scripts qui nous permettrons respectivement de sauvegarder et de restaurer la dernière sauvegarde de notre blog.
Les scripts sont aussi disponibles sur ce repository.
Script de sauvegarde
Pour cela, j'utilise nano :
Et voilà mon petit script (merci à ChatGPT pour son aide lol) :
Il faut maintenant configurer les variables en début de fichier, perso ça donne un truc du style :
Le configuration SFTP pour les sauvegardes distantes est facultative, bien que recommandée... On en reparle un peu plus bas.
Bien-sûr on ferme et on enregistre le fichier...
On va maintenant rendre notre script exécutable :
Notre système de sauvegarde est déjà prêt !
Pour l'executer, rien de plus simple...
Et hop ! Votre sauvegarde est prête dans le dossier sauv
.
Script de restauration
Avoir une sauvegarde c'est bien, mais c'est encore mieux quand on peut la restaurer facilement.
Voici un script que je vous invite à mettre dans un fichier ghost_restore.sh
par exemple et de même à rendre exécutable.
Une fois de plus, je le personnalise avec mes paramètres :
Quand je l'exécute, on me demande si je veux bien restaurer et en appuyant sur y
ça fonctionne ! 🎉
Transfert sur un serveur distant via SFTP
On peut faire mieux que des sauvegardes... Des sauvegardes distantes ! Au moins si le serveur crame, on ne perds rien.
J'ai déjà paramétré ce qu'il fallait dans les variables de mon ghost_backup.sh
, il ne me manque plus qu'à décommenter les lignes qui permettent le transfert via SFTP et à relancer mon script.
Si vous rencontrez des difficultés, sachez que j'entre un peu plus dans le détail dans cet article, qui utilise un processus similaire à Ghost mais pour N8N.
Automatisation des sauvegardes régulières
Pour ne pas avoir besoin de s'en occuper sans arrêt, je vais vous présenter mon petit esclave : CRON.
Il suffit de lui dire quand et à quelle fréquence et il s'occupera de lancer n'importe quelle tâche pour vous.
Pour l'invoquer, j'utilise la CRONTAB, je vous explique ici un peu plus en détail comment faire.
Dans ce cas précis, j'utilise cette ligne :
Merci pour votre lecture.