Créer un Thème Ghost 2026 : Structure Complète, Assets et Validation GScan

Les thèmes Ghost sont au cœur de la personnalisation de votre site. Que vous soyez une petite entreprise, une startup ou un créateur de contenu débutant, comprendre comment structurer un thème vous permet de créer un design sur mesure sans dépendre de templates prêts à l'emploi. Dans cet article, nous couvrons les bases : la structure d'un thème, la gestion des assets, et la validation avec GScan. Ces éléments sont essentiels pour un développement fluide et compatible avec Ghost en 2026.

Ghost utilise Handlebars (.hbs) pour les templates, ce qui rend le processus accessible même sans expertise avancée en frontend. Nous nous basons sur la documentation officielle pour des infos précises et à jour. Allons-y étape par étape.

Qu'est-ce qu'un Thème Ghost ?

Un thème Ghost est un ensemble de fichiers qui définit l'apparence et le comportement de votre publication. Il inclut des templates HTML, des styles CSS, des scripts JS et des images. Contrairement à WordPress, Ghost sépare strictement le contenu du design : le thème gère uniquement la présentation.

Pour un débutant, commencez par un thème officiel comme Casper ou Starter. Ils sont disponibles sur GitHub et servent de base pour vos modifications. En 2025, Ghost met l'accent sur la performance et la compatibilité mobile, avec des outils comme GScan pour valider automatiquement vos créations.

La Structure d'un Thème Ghost

Un thème Ghost suit une structure simple et hiérarchique. Tous les thèmes doivent inclure certains fichiers obligatoires, mais vous pouvez ajouter des dossiers pour plus de flexibilité.

Fichiers et Dossiers Requis

Voici les éléments de base :

name : Nom unique du thème.
description : Brève explication.
version : Format sémantique (ex. : 1.0.0).
config : Options comme le nombre de posts par page (défaut : 5).

index.hbs : Template principal pour lister les posts. C'est la page d'accueil par défaut.
post.hbs : Template pour afficher un post individuel.
Dossier /assets : Contient tous les fichiers statiques (CSS, JS, images, fonts). Sous-dossiers typiques :
- /css : Fichiers comme screen.css.
- /js : Scripts comme default.js.
- /images : Logos et icônes.
- /fonts : Polices personnalisées.
Dossier /partials (optionnel) : Pour des blocs réutilisables, comme un header commun (ex. : header.hbs).

package.json : Ce fichier JSON est obligatoire. Il contient les métadonnées du thème, comme le nom, la version et la licence. Sans lui, Ghost ne reconnaîtra pas votre thème.Exemple basique de package.json :

{
  "name": "mon-theme-simple",
  "description": "Un thème basique pour Ghost",
  "version": "1.0.0",
  "license": "MIT",
  "author": {
    "email": "[email protected]"
  },
  "config": {
    "posts_per_page": 5,
    "image_sizes": {}
  }
}

Après modification, redémarrez Ghost pour appliquer les changements.

Autres templates optionnels :

default.hbs : Layout de base pour toutes les pages. Inclut , et . Ajoutez-y {{ghost_head}} pour les métadonnées et {{ghost_foot}} pour les scripts.
page.hbs : Pour les pages statiques (sinon, fallback sur post.hbs).
tag.hbs et author.hbs : Archives par tag ou auteur.
error.hbs : Page d'erreur générique (404, 500).

Exemple de default.hbs minimal :

<!DOCTYPE html>
<html>
<head>
    {{ghost_head}}
    <link rel="stylesheet" href="{{asset 'css/screen.css'}}">
</head>
<body class="{{body_class}}">
    {{> header}}
    {{{body}}}
    {{ghost_foot}}
</body>
</html>

Cette structure assure une hiérarchie : les templates étendent default.hbs pour éviter la répétition de code.

Bonnes Pratiques pour la Structure

Utilisez des classes spécifiques (ex. : #mon-theme-header) pour éviter les conflits CSS.
Testez toujours en local : installez Ghost localement avec Ghost-CLI pour un développement rapide.
Pour les startups, optez pour une structure modulaire : partials pour les composants réutilisables comme les boutons ou les pieds de page.

En 2025, Ghost encourage les thèmes responsives avec des media queries dans CSS, et des helpers comme {{body_class}} pour ajouter des classes contextuelles (ex. : home, post).

Gérer les Assets dans un Thème

Les assets sont les fichiers statiques qui rendent votre thème visuellement attractif. Ghost optimise leur chargement automatiquement, mais une bonne organisation est clé.

Images et Optimisation

Les images sont gérées via le helper {{img_url}}. Ghost supporte les formats modernes comme WebP et AVIF pour une meilleure performance.

Exemple : Redimensionner une image de post :

<img src="{{img_url feature_image width=1200}}"
     srcset="{{img_url feature_image width=600}}/600w,
             {{img_url feature_image width=1200}}/1200w"
     sizes="(max-width: 600px) 600px, 1200px"
     alt="{{feature_image_alt}}">

image_sizes dans package.json : Définissez des tailles personnalisées pour l'optimisation automatique.
Astuce pour SMB : Utilisez des outils comme ImageOptim avant d'ajouter des images pour réduire la taille sans perte de qualité.

CSS et JavaScript

Placez votre CSS principal dans /assets/css/screen.css et liez-le avec {{asset "css/screen.css"}} dans default.hbs.
Pour JS : Ajoutez dans /assets/js/default.js et incluez via {{asset "js/default.js"}} avant {{ghost_foot}}.

Ghost ajoute un fingerprint (hash) aux assets en production pour le cache-busting : les URLs deviennent /assets/css/screen-abc123.css.

Intégration et Meilleures Pratiques

Chargement conditionnel : Utilisez {{ghost_foot}} pour les scripts critiques.
Performance 2025 : Minifiez CSS/JS avec des outils comme PostCSS (inclus dans les thèmes officiels). Évitez les assets lourds ; ciblez < 100 Ko par fichier.
Pour les débutants : Copiez la structure d'un thème officiel et modifiez progressivement.

Installer et Uploader un Thème

Une fois votre thème prêt, installez-le via l'admin Ghost ou en local.

Via l'Admin Ghost

Allez dans Paramètres > Design > Changer de thème.
Cliquez sur Télécharger un thème et sélectionnez votre fichier ZIP.
Ghost valide automatiquement avec GScan. Si OK, activez-le.

Pour télécharger un thème installé :

Dans Design, cliquez sur Installés.
Sélectionnez ... > Télécharger.

Astuce : Pour les thèmes premium, contactez le développeur si des erreurs surgissent.

Via Terminal (pour Développement Local)

Installez Node.js, puis :

Téléchargez un thème base : npx degit https://github.com/TryGhost/Starter mon-theme.
Entrez dans le dossier : cd mon-theme.
Installez les dépendances : npm install.
Liez au dossier themes de Ghost local : ln -s /chemin/vers/mon-theme /chemin/vers/ghost/content/themes/mon-theme.
Redémarrez : ghost restart.
Activez dans l'admin sous Design > Avancé.

Pour zipper : npm run zip (si configuré dans package.json).

En 2025, les thèmes officiels se mettent à jour automatiquement si non modifiés.

Valider un Thème avec GScan

GScan est l'outil de validation automatique de Ghost. Il vérifie la conformité avant upload, évitant les erreurs fatales.

Installation et Utilisation

Installez globalement : npm install -g gscan.

Validez un dossier : gscan /chemin/vers/votre-theme.

Pour un ZIP : gscan -z theme.zip.

GScan génère un rapport détaillé :

Erreurs fatales : Bloquent l'activation (ex. : fichier manquant).
Avertissements : Suggestions pour améliorer (ex. : helpers obsolètes).

Intégration dans Votre Workflow

Exécutez GScan après chaque modification majeure. Pour les startups, intégrez-le dans un script npm : "prezip": "gscan .".

Exemple de rapport typique :

Vérifie package.json valide.
Contrôle la présence d'index.hbs et post.hbs.
Teste les helpers requis comme {{asset}}.

Si une erreur fatale apparaît, corrigez-la avant upload – Ghost l'exécute aussi côté serveur.

Mettre à Jour un Thème Officiel

Pour les thèmes officiels comme Casper :

Dans Design > Personnaliser > Changer de thème.
Sélectionnez votre thème et cliquez Mettre à jour.

Cela applique les dernières améliorations sans toucher aux customisations mineures. Si vous avez modifié le code, téléchargez depuis GitHub, fusionnez manuellement, et uploadez.

Pour préserver les changements : Utilisez des partials ou code injection pour les ajouts CSS/JS, évitant les overwrites.

Conclusion : Lancez Votre Thème Personnalisé

Avec cette structure (package.json, templates .hbs, assets organisés) et GScan pour valider, vous pouvez créer un thème Ghost fonctionnel en quelques heures. Pour une SMB ou startup, commencez par cloner Starter, testez localement, et déployez via admin. Cela booste votre site sans complexité inutile.

Besoin d'aller plus loin ? Explorez les helpers Handlebars ou les contextes dans la doc officielle. Si vous rencontrez un blocage, les forums Ghost sont une mine d'or.

Créer un Thème Ghost : Structure Complète, Assets et Validation GScan