Un starter Gatsby pour créer des blogs à partir de Ghost CMS sans tête.
Transformez votre blog Ghost en un site Web statique et rapide. Ce thème Gatsby est un remplacement frontal du moteur Ghost Handles avec une apparence et une sensation Ghost Casper améliorées. Tout le contenu provient d’un CMS Ghost sans tête.
Fatigué de
gatsby-config.js
? Découvrez Blogody pour une solution intégrée avec de nombreux autres avantages !
Préférer Next.js à Gatsby ? Rendez-vous sur next-cms-ghost !
Consultez les didacticiels pour obtenir des guides pratiques sur l'utilisation de ce projet.
Jouez avec la démo pour avoir une première impression.
Les plugins suivants ont été inclus pour plus de commodité :
Nom | Version | Description |
---|---|---|
gatsby-theme-ghost-dark-mode | Basculer le mode sombre ? | |
gatsby-rehype-ghost-links | Réécrire les liens CMS d'absolu à relatif | |
gatsby-rehype-prismjs | Mise en évidence de la syntaxe avec PrismJS | |
gatsby-theme-ghost-members ? | Abonnements membres |
Si vous n'en avez pas besoin, vous pouvez les supprimer dans gatsby-config.js
et package.json
ce qui peut vous faire gagner du temps pendant le processus de construction.
Des fonctionnalités supplémentaires peuvent être intégrées en installant des thèmes ou des plugins Gatsby. Les plugins suivants ont été testés pour fonctionner avec gatsby-starter-try-ghost
:
Nom | Version | Description |
---|---|---|
gatsby-rehype-inline-images ? | Chargement paresseux d'images en ligne avec flou | |
gatsby-theme-ghost-contact | Page de contact | |
gatsby-theme-ghost-commento | Système de commentaires avec Commento | |
gatsby-theme-ghost-toc ? | Table des matières | |
gatsby-plugin-ackee-tracker | Suivi du site avec Ackee | |
gatsby-plugin-google-analytics | Suivi du site avec Google Analytics |
Installez ce démarreur en exécutant
gatsby new try-ghost https://github.com/styxlab/gatsby-starter-try-ghost
Changer de répertoire
cd try-ghost
Courir
yarn develop
et visitez votre site à http://localhost:8000
.
//siteConfig.js
module . exports = {
// Do not include a trailing slash!
siteUrl : `https://your-blog.com` ,
// Maximum number of post shown per page
// Infinite Scroll: Initial chunk of posts, subsequent posts are fetched one by one
postsPerPage : 3 ,
// This allows an alternative site title for meta data for pages.
siteTitleMeta : `Gatsby Starter Ghost CMS` ,
// This allows an site description for meta data for pages.
siteDescriptionMeta : `Turn your Ghost blog into a flaring fast static site with Gatsby` ,
// Used for App and Offline manifest e.g. Mobile Home Screen
shortTitle : `Ghost` ,
siteIcon : `favicon.png` ,
backgroundColor : `#e9e9e9` ,
themeColor : `#15171A` ,
// Include Gatsby images for lazy loading and image optimizations (default: true)
gatsbyImages : true ,
// Overwrite navigation menu (default: []), label is case sensitive
// overwriteGhostNavigation: [{ label: `Home`, url: `/` }],
} ;
Dans la configuration présentée ci-dessus, les champs les plus importants à modifier sont siteUrl
, siteTitleMeta
et siteDescriptionMeta
. Mettez à jour au moins ceux-ci pour répondre à vos besoins.
Tout le contenu provient d’un CMS Ghost. Par défaut, le contenu est récupéré à partir de l'emplacement de démonstration sur https://cms.gotsby.org
. Vous souhaitez sûrement créer votre propre contenu. Il existe deux manières de rendre vos clés de contenu disponibles. Choisissez la méthode en fonction de votre scénario de build.
Si vous construisez votre projet avec un fournisseur cloud (par exemple Gatsby, Netlify, Vercel), la meilleure option est de fournir les clés avec des variables d'environnement :
Clé | Valeur (exemple) |
---|---|
GHOST_API_URL | http://localhost:2368 |
GHOST_CONTENT_API_KEY | 9fccdb0e4ea5b572e2e5b92942 |
L'endroit où vous pouvez les définir dépend du fournisseur, mais vous trouverez généralement cette option dans les paramètres du site. Cela évite de publier des clés dans un référentiel public et est le plus sécurisé.
Si vous construisez localement ou sur un réseau privé où le répertoire de construction n'est pas accessible au monde, vous pouvez ajouter en toute sécurité un nouveau fichier .ghost.json
dans votre répertoire de base avec la structure JSON suivante :
{
" development " : {
" apiUrl " : " http://localhost:2368 " ,
" contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
},
" production " : {
" apiUrl " : " http://localhost:2368 " ,
" contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
}
}
Ce fichier fait partie de .gitignore
pour éviter de le publier accidentellement dans votre référentiel public. Modifiez apiUrl
et contentApiKey
pour qu'ils correspondent à vos propres clés API de contenu Ghost CMS.
Pour de meilleurs résultats de référencement, il est fortement recommandé de désactiver le thème frontal par défaut de Ghost Handles en sélectionnant l'indicateur Rendre ce site privé dans vos paramètres d'administration Ghost. Cela active la protection par mot de passe avant l'installation de Ghost et définit <meta name="robots" content="noindex" />
afin que votre interface Gatsby devienne la source faisant autorité pour les moteurs de recherche.
Il est recommandé d'installer npm-upgrade avec sudo npm install npm-upgrade -g
. Accédez au répertoire de base et mettez à jour tous les packages avec :
npm-upgrade
Vous serez invité à mettre à jour tous les packages de votre fichier package.json
. Ensuite, téléchargez les nouveaux packages :
yarn
yarn clean
Le processus de mise à jour est maintenant terminé et vous pouvez démarrer une nouvelle build avec yarn build
(ou yarn develop
).
Veuillez signaler tous les bugs et problèmes sur gatsby-theme-try-ghost/issues car tout le développement s'y déroule.
Ce projet n'est pas affilié à Gatsby ou Ghost.
Copyright (c) 2020 styxlab - Publié sous licence MIT.