Tutoriels Ghost : Astuces Pratiques pour Personnaliser Votre Site

Ghost est une plateforme idéale pour les débutants, les PME et les startups qui veulent un site rapide et personnalisable sans complexité inutile. Avec plus de 70 tutoriels officiels disponibles, vous pouvez transformer votre publication en un outil sur mesure, que ce soit pour ajouter des fonctionnalités avancées ou optimiser l'expérience utilisateur. Ces ressources, mises à jour régulièrement, couvrent tout, des bases du thématage aux astuces avancées comme les flux RSS personnalisés ou les sections de lecture.

Dans cet article, je passe en revue les catégories principales des tutoriels Ghost et je détaille sept d'entre eux, adaptés à votre niveau. Chaque tutoriel inclut des étapes pas à pas, du code réutilisable et des conseils pour l'implémenter rapidement. Vous n'avez besoin que d'un éditeur de code (comme VS Code) et d'une installation locale de Ghost pour tester. Allons-y.

Les Catégories de Tutoriels : Une Vue d'Ensemble

Les tutoriels Ghost sont organisés en sections pour faciliter la navigation. Voici un résumé basé sur la bibliothèque officielle (consultée en novembre 2025) :

Les Plus Utiles (Most Helpful) : Une sélection communautaire de 6 tutoriels phares, comme l'ajout de commentaires ou la gestion de code injection.
Fondamentaux (Fundamentals) : 5 tutoriels pour débutants, couvrant l'installation locale, les concepts essentiels (Handlebars, contextes) et les partials.
Niveau Supérieur (Level Up) : 13 tutoriels pour personnaliser les templates, comme les index.hbs, default.hbs, post templates et les boucles de posts.
Faire Plus (Do More) : 7 tutoriels avancés sur les collections de contenu, les flux RSS custom, les bannières d'offres et les helpers comme log pour le debug.
Autres Thématiques : Des tutoriels isolés sur le CSS avec Gulp, les snippets de code avec Prism, les formulaires d'inscription custom, et les newsletters comme "Build with Ghost".

Au total, cela dépasse les 70 ressources, incluant des vidéos YouTube et des newsletters mensuelles. Pour les startups, commencez par les fondamentaux ; les PME gagneront du temps avec les personnalisations rapides comme les bannières d'offres.

Tutoriel 1 : Créer une Page d'Accueil Personnalisée (Custom Homepage)

Une page d'accueil sur mesure attire les visiteurs et met en avant votre marque. Ce tutoriel, basé sur le thème Casper, montre comment créer un fichier home.hbs pour un hero section et une grille d'articles.

Étapes :

Ouvrez votre thème local dans un éditeur de code.
Créez home.hbs à la racine du thème. Ajoutez {{!< default}} en haut pour hériter des éléments communs (navbar, footer).
Créez home.css pour le style et importez-le dans screen.css avec @import "home.css";. Zipez et uploadez le thème.

Ajoutez une grille d'articles récents (limite à 25 via package.json) :

<section class="p-outer">
    <div class="p-inner">
        <h2>Derniers Articles</h2>
        <div class="p-posts-grid">
            {{#foreach posts}}
            <article class="p-post-card">
                <img src="{{img_url feature_image size='m'}}" alt="{{feature_image_alt}}" />
                <h3><a href="{{url}}">{{title}}</a></h3>
            </article>
            {{/foreach}}
        </div>
    </div>
</section>

Ajoutez une section hero :

<section class="p-outer">
    <div class="p-inner p-hero">
        <div class="p-hero-left">
            <h1>Bienvenue sur Votre Site</h1>
            <p>Découvrez nos contenus exclusifs.</p>
            <div class="p-hero-buttons">
                <button data-portal="signup">S'abonner</button>
                <a href="/about/">En savoir plus</a>
            </div>
        </div>
        <div class="p-hero-right">
            <img src="{{img_url @site.cover_image size='l'}}" alt="Image hero" />
        </div>
    </div>
</section>

Astuce pour PME : Filtrez par tags avec {{#get "posts" filter="primary_tag:slug" limit="6"}} pour des sections thématiques (ex. : produits pour une startup e-commerce). Temps estimé : 30 minutes.

Tutoriel 2 : Ajouter des Commentaires aux Posts

Les commentaires boostent l'engagement. Ghost n'en a pas nativement, mais ce guide intègre des services tiers comme Disqus via post.hbs.

Étapes :

Ouvrez post.hbs (ligne ~76 dans Casper) et localisez la section commentaires commentée.
Zipez et uploadez. Testez sur un post publié.

Optionnel : Limitez aux membres payants avec :

{{#if access}}
    <!-- Code commentaires -->
{{else}}
    <p>Devenez membre pour commenter.</p>
    <a href="#/portal/">S'abonner</a>
{{/if}}

Collez le code d'intégration de votre service (ex. Disqus) :

<section class="article-comments gh-canvas">
    <!-- Code Disqus ici -->
</section>

Astuce pour Débutants : Choisissez Disqus pour sa simplicité ; pour les startups, optez pour des outils comme Commento pour la confidentialité. Temps : 15 minutes.

Tutoriel 3 : Afficher le Temps de Lecture et une Barre de Progression

Le temps de lecture aide les lecteurs ; une barre de progression les motive à finir l'article.

Étapes :

Uploadez et testez en scrollant.

Ajoutez le JS avant {{ghost_foot}} :

{{#is "post"}}
<script>
    const progressBar = document.querySelector('.reading-progress');
    function updateProgress() {
        const totalHeight = document.body.clientHeight;
        const windowHeight = document.documentElement.clientHeight;
        const position = window.scrollY;
        const progress = position / (totalHeight - windowHeight) * 100;
        progressBar.setAttribute('value', progress);
        requestAnimationFrame(updateProgress);
    }
    requestAnimationFrame(updateProgress);
</script>
{{/is}}

Stylez via Code Injection (Site Header) :

.reading-progress {
    position: fixed; top: 0; z-index: 999; width: 100%; height: 5px;
    background: #c5d2d9; -webkit-appearance: none;
}
.reading-progress::-webkit-progress-value { background: var(--ghost-accent-color); }

Ajoutez une barre de progression après {{!< default}} :

<progress class="reading-progress" value="0" max="100" aria-label="Progression"></progress>

Dans post.hbs, ajoutez le helper reading_time :

{{#post}}
    {{reading_time minute="1 min" minutes="% minutes"}}
{{/post}}

Astuce pour Startups : Personnalisez le texte pour des contenus longs (ex. : guides produits). Temps : 20 minutes.

Tutoriel 4 : Ajouter une Table des Matières Automatique

Une table des matières (TOC) améliore la navigation dans les articles longs, idéale pour les tutoriels ou blogs PME.

Étapes :

Uploadez. Utilisez des headings H1-H4 dans l'éditeur pour générer la TOC.

Dans post.hbs, avant {{content}} :

<aside class="gh-sidebar"><div class="gh-toc"></div></aside>

Avant {{ghost_foot}}, ajoutez le JS :

<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
<script>
    tocbot.init({ tocSelector: '.gh-toc', contentSelector: '.gh-content', headingSelector: 'h1, h2, h3, h4', hasInnerContainers: true });
</script>

Dans default.hbs (avant {{ghost_head}}), ajoutez le CSS Tocbot :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">
<style>
.gh-content { position: relative; }
@media (min-width: 1300px) { .gh-sidebar { position: absolute; top: 0; grid-column: wide-start / main-start; } .gh-toc { position: sticky; top: 4vmin; } }
.gh-toc .is-active-link::before { background-color: var(--ghost-accent-color); }
</style>

Astuce pour Débutants : Adaptez les classes CSS à votre thème. Temps : 25 minutes.

Tutoriel 5 : Créer une Section "Lire Ensuite" (Read Next)

Cette section suggère du contenu connexe pour augmenter le temps sur site.

Étapes :

Par auteur : filter="id:-{{id}}+authors:{{primary_author.slug}}"
Par tag : filter="tags:[{{post.tags}}]+id:-{{post.id}}" (avec include="authors").
Uploadez et testez.

Pour membres :

{{#if @member.paid}}
    {{#get "posts" filter="tags:[{{post.tags}}]+id:-{{post.id}}" limit="3" as |next|}} ... {{/get}}
{{else}}
    {{#get "posts" filter="visibility:public+id:-{{post.id}}+tags:[{{post.tags}}]" limit="2" as |public|}}
    {{#get "posts" filter="visibility:paid+id:-../post.id" limit="1" as |paid|}}
        {{#foreach paid}} {{> "loop-grid"}} {{/foreach}} {{#foreach public}} {{> "loop-grid"}} {{/foreach}}
    {{/get}} {{/get}}
{{/if}}

Dans post.hbs, ajoutez une version basique (3 posts récents hors courant) :

{{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}}
    {{#if more_posts}}
        <aside class="read-more-wrap">
            {{#foreach more_posts}} {{> "post-card"}} {{/foreach}}
        </aside>
    {{/if}}
{{/get}}

Astuce pour PME : Utilisez les tags pour des recommandations produits. Temps : 20 minutes.

Tutoriel 6 : Ajouter une Bannière d'Offre (Offer Banners)

Promouvez des abonnements avec une bannière visible partout.

Étapes :

Ajoutez l'image dans assets/images.
Stylez via Code Injection (Header) avec le CSS fourni (hauteur 90px, responsive).
Uploadez. Créez l'offre dans l'admin Ghost (nécessite Stripe).

Dans default.hbs (après <body>), ajoutez :

<a class="gh-banner" href="https://votre-offre-url" style="background-image: url({{asset 'images/banner.jpg'}})">
    <div class="gh-banner-inner">
        <div class="gh-banner-left"><p class="gh-banner-headline">Offre limitée</p><p class="gh-banner-cta">Pour nouveaux abonnés</p></div>
        <div class="gh-banner-right"><p class="gh-banner-button">En savoir plus</p></div>
    </div>
</a>

Astuce pour Startups : Liez à des trials gratuits. Temps : 15 minutes. Note : Ghost a une barre d'annonce native en 2025, mais ce custom est plus flexible.

Tutoriel 7 : Créer un Flux RSS pour Podcast (Custom RSS Feed)

Pour les startups en audio, un flux RSS podcast-compliant est essentiel.

Étapes :

Uploadez routes.yaml et le thème. Testez sur /podcast/rss/.

Créez podcast/rss.hbs avec la structure XML (namespaces iTunes inclus) :

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" ...>
    <channel>
        <title>{{@site.title}}</title> ... 
        {{#get "posts" filter="tag:podcast" include="tags,authors" as |episode|}}
            {{#foreach episode}}
            <item>
                <title>{{title}}</title> ...
                <enclosure url="{{og_description}}" length="0" type="audio/mpeg"/>
            </item>
            {{/foreach}}
        {{/get}}
    </channel>
</rss>

(Utilisez "Facebook Description" pour les URLs audio.)

Éditez routes.yaml :

routes: /podcast/rss/: template: podcast/rss, content_type: text/xml
collections: /podcast/: permalink: /podcast/{slug}/, filter: tag:podcast

Astuce pour PME : Taggez les posts "podcast" et soumettez à Apple/Spotify. Temps : 30 minutes.

Conclusion : Passez à l'Action

Ces tutoriels couvrent l'essentiel pour personnaliser Ghost sans effort excessif. Pour les 70+ autres, explorez ghost.org/tutorials – commencez par les fondamentaux si vous débutez. Testez en local pour éviter les disruptions. Si vous gérez une startup ou PME, priorisez les features comme les read-next ou les bannières pour booster les conversions. Besoin d'aide ? Le forum Ghost est actif. Comptez environ 2000 mots ici ; appliquez-en un par semaine pour un site pro en un mois.

Tutoriels Ghost

Tutoriels Ghost : Astuces Pratiques pour Personnaliser Votre Site

Les Catégories de Tutoriels : Une Vue d'Ensemble

Tutoriel 1 : Créer une Page d'Accueil Personnalisée (Custom Homepage)

Tutoriel 2 : Ajouter des Commentaires aux Posts

Tutoriel 3 : Afficher le Temps de Lecture et une Barre de Progression

Tutoriel 4 : Ajouter une Table des Matières Automatique

Tutoriel 5 : Créer une Section "Lire Ensuite" (Read Next)

Tutoriel 6 : Ajouter une Bannière d'Offre (Offer Banners)

Tutoriel 7 : Créer un Flux RSS pour Podcast (Custom RSS Feed)

Conclusion : Passez à l'Action

You may be interested

Admin API Ghost Détail

Fonctionnalités Avancées Ghost