Un iniciador de Gatsby para crear blogs desde Ghost CMS sin cabeza.
Convierte tu blog Ghost en un sitio web estático increíblemente rápido. Este tema de Gatsby es un reemplazo frontal del motor Ghost manillares que presenta una apariencia y sensación mejoradas de Ghost Casper. Todo el contenido proviene de un CMS Ghost sin cabeza.
¿Estás cansado de
gatsby-config.js
? ¡Consulte Blogody para obtener una solución integrada con muchos más beneficios!
¿Prefieres Next.js a Gatsby? ¡Dirígete a next-cms-ghost!
Consulte los tutoriales para obtener guías prácticas sobre el uso de este proyecto.
Juega con la demostración para tener una primera impresión.
Se han incluido los siguientes complementos para mayor comodidad:
Nombre | Versión | Descripción |
---|---|---|
gatsby-theme-ghost-dark-mode | ¿Alternar modo oscuro? | |
gatsby-rehype-ghost-links | Reescribir enlaces CMS de absoluto a relativo | |
gatsby-rehype-prismjs | Resaltado de sintaxis con PrismJS | |
gatsby-theme-ghost-members ? | Suscripciones de miembros |
Si no los necesita, puede eliminarlos en gatsby-config.js
y package.json
lo que puede ahorrarle algo de tiempo durante el proceso de compilación.
Se pueden integrar funciones adicionales instalando temas o complementos de Gatsby. Se ha probado que los siguientes complementos funcionan con gatsby-starter-try-ghost
:
Nombre | Versión | Descripción |
---|---|---|
gatsby-rehype-inline-images ? | Imágenes en línea de carga diferida con desenfoque | |
gatsby-theme-ghost-contact | Pagina de contacto | |
gatsby-theme-ghost-commento | Sistema de comentarios con Commento | |
gatsby-theme-ghost-toc ? | Tabla de contenido | |
gatsby-plugin-ackee-tracker | Seguimiento del sitio con Ackee | |
gatsby-plugin-google-analytics | Seguimiento del sitio con Google Analytics |
Instale este iniciador ejecutando
gatsby new try-ghost https://github.com/styxlab/gatsby-starter-try-ghost
Cambiar directorio
cd try-ghost
Correr
yarn develop
y visite su sitio en 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: `/` }],
} ;
En la configuración que se muestra arriba, los campos más importantes que se deben cambiar son siteUrl
, siteTitleMeta
y siteDescriptionMeta
. Actualice al menos aquellos para que se ajusten a sus necesidades.
Todo el contenido proviene de un CMS Ghost. De forma predeterminada, el contenido se obtiene de la ubicación de demostración en https://cms.gotsby.org
. Seguramente deseas obtener tu propio contenido. Hay dos formas de hacer que sus claves de contenido estén disponibles. Elija el método según su escenario de construcción.
Si construye su proyecto con un proveedor de nube (por ejemplo, Gatsby, Netlify, Vercel), la mejor opción es proporcionar las claves con variables de entorno:
Llave | Valor (ejemplo) |
---|---|
GHOST_API_URL | http://localhost:2368 |
GHOST_CONTENT_API_KEY | 9fccdb0e4ea5b572e2e5b92942 |
El lugar donde puedes definirlos depende del proveedor, pero normalmente encontrarás la opción en la configuración del sitio. Esto evita la publicación de claves en un repositorio público y es más seguro.
Si compila localmente o en una red privada donde el directorio de compilación no es accesible para todo el mundo, puede agregar de forma segura un nuevo archivo .ghost.json
en su directorio base con la siguiente estructura JSON:
{
" development " : {
" apiUrl " : " http://localhost:2368 " ,
" contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
},
" production " : {
" apiUrl " : " http://localhost:2368 " ,
" contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
}
}
Este archivo es parte de .gitignore
para evitar publicarlo accidentalmente en su repositorio público. Cambie apiUrl
y contentApiKey
para que coincidan con sus propias claves API de contenido de Ghost CMS.
Para obtener mejores resultados de SEO, se recomienda encarecidamente deshabilitar la interfaz predeterminada del tema Ghost Manillars seleccionando la marca Hacer que este sitio sea privado dentro de la configuración de administrador de Ghost. Esto habilita la protección con contraseña frente a la instalación de Ghost y configura <meta name="robots" content="noindex" />
para que su interfaz de Gatsby se convierta en la fuente autorizada para los motores de búsqueda.
Se recomienda instalar npm-upgrade con sudo npm install npm-upgrade -g
. Cambie al directorio base y actualice todos los paquetes con:
npm-upgrade
Se le pedirá que actualice todos los paquetes dentro de su archivo package.json
. A continuación, descargue los nuevos paquetes:
yarn
yarn clean
El proceso de actualización ya está completo y puede iniciar una nueva compilación con yarn build
(o yarn develop
).
Informe todos los errores y problemas en gatsby-theme-try-ghost/issues ya que todo el desarrollo se lleva a cabo allí.
Este proyecto no está afiliado a Gatsby ni a Ghost.
Copyright (c) 2020 styxlab: publicado bajo la licencia MIT.