Un modèle de démarrage pour créer des sites Web ultra-rapides avec Ghost (en tant que CMS sans tête dans ce cas) et Gatsby, en utilisant l'excellent thème Simply Ghost. Réécrit du thème Handles vers React/Gatsby.
Démo : https://gatsby-ghost-simply.netlify.app/
custom_template
!)custom_template
!)custom_template
!)custom_template
!) # With Gatsby CLI
gatsby new gatsby-starter-ghost https://github.com/anarion80/gatsby-ghost-simply.git
# From Source
git clone https://github.com/anarion80/gatsby-ghost-simply.git
cd gatsby-ghost-simply
Puis installez les dépendances
yarn
Démarrez le serveur de développement. Vous disposez maintenant d'un site Gatsby extrayant le contenu de Ghost sans tête. Vous n'avez pas besoin d'installer le thème Simply Ghost d'origine dans votre instance Ghost, ni d'y configurer des routes supplémentaires.
gatsby develop
Par défaut, le démarreur remplira le contenu d'une installation Ghost par défaut située sur https://gatsby.ghost.io.
Pour utiliser votre propre installation, vous devrez modifier le fichier de configuration .ghost.json
avec vos informations d'identification. Remplacez la valeur apiUrl
par l'URL de votre site Ghost. Pour les clients Ghost(Pro), il s'agit de l'URL Ghost se terminant par .ghost.io
, et pour les personnes utilisant la version auto-hébergée de Ghost, il s'agit de la même URL que celle utilisée pour accéder à votre site.
Ensuite, mettez à jour la valeur contentApiKey
avec une clé associée au site Ghost. Une clé peut être fournie en créant une intégration dans Ghost Admin. Accédez à Intégrations et cliquez sur « Ajouter une nouvelle intégration ». Nommez l’intégration de manière appropriée et cliquez sur Créer.
{
"apiUrl" : " https://gatsby.ghost.io " ,
"contentApiKey" : " 9cc5c67c358edfdd81455149d0 "
}
Enfin, configurez l'URL souhaitée dans siteConfig.js
, afin que les liens (par exemple les liens canoniques) soient générés correctement. Vous devez également mettre à jour les autres valeurs nécessaires au menu, au partage social et à la recherche.
{
menuDropdown : [
{
label : `About` ,
url : `/about` ,
} ,
.
.
.
] ,
followSocialMedia : [
{
service : `youtube` ,
title : `YOUR_TITLE` ,
url : `YOUR_URL` ,
} ,
.
.
.
] ,
searchSettings : {
key : `YOUR_GHOST_API_KEY` ,
url : `YOUR_GHOST_URL` ,
/* This is optional */
options : {
keys : [ `title` , `plaintext` ] ,
limit : 10 ,
} ,
/* This is optional to perform filtering of the ghost api */
api : {
resource : `posts` ,
parameters : {
limit : `all` ,
fields : [ `title` , `slug` , `plaintext` ] ,
filter : `` ,
include : `` ,
order : `` ,
formats : `` ,
} ,
} ,
} ,
}
Pour utiliser des modèles de publication personnalisés, ajoutez une balise interne particulière à la publication (c'est-à-dire #custom-post-wide
, #custom-kusi-doc
, etc.).
La démo et le dépôt sont la "version maximale" avec tous les types possibles de variantes de page d'accueil, de modèles de publication, de portfolio, de documents, etc. Ajustez/supprimez si nécessaire.
Le démarreur contient trois fichiers de configuration spécifiquement pour le déploiement avec Netlify. Un fichier netlify.toml
pour les paramètres de construction, un fichier /static/_headers
avec des en-têtes de sécurité par défaut définis pour toutes les routes et /static/_redirects
pour définir les redirections de domaine personnalisées Netlify.
Pour déployer sur votre compte Netlify, cliquez sur le bouton ci-dessous.
Les clés API de contenu ne sont généralement pas considérées comme des informations sensibles, elles existent pour pouvoir être modifiées en cas d'abus ; donc la plupart des gens le valident directement dans leur fichier de configuration .ghost.json
. Si vous préférez conserver ces informations en dehors de votre référentiel, vous pouvez supprimer cette configuration et définir à la place les variables Netlify ENV pour les versions de production.
Une fois déployé, vous pouvez configurer une intégration Ghost + Netlify pour utiliser les hooks de déploiement de Ghost pour déclencher les reconstructions Netlify. De cette façon, chaque fois que les données changent dans Ghost, votre site sera reconstruit sur Netlify.
Vous pouvez désactiver le thème frontal Ghost Handles par défaut en activant l'indicateur Make this site private
dans vos paramètres 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 de vérité pour le référencement.
# Run a production build, locally
gatsby build
# Serve a production build, locally
gatsby serve
Gatsby develop
utilise la configuration development
dans .ghost.json
- tandis que Gatsby build
utilise la configuration production
.
Copyright (c) 2021 anarion80 - Publié sous licence GPLv3.