Configure Open Source Gatsby con su WordPress para aportar una mayor experiencia del usuario y rendimiento general. Aprendamos cómo usar este generador de sitios estáticos.
Descripción general
GatsByJS es un generador de sitios estático alimentado por GraphQL basado en GraphQL de código abierto y gratuito. Utiliza una potente preconfiguración para construir un sitio web que use solo archivos estáticos para cargas de página increíblemente rápidas. WordPress es una gran plataforma de blogs de código abierto. Como resultado, hay muchas personas que saben cómo averiguar si un sitio es un sitio de WordPress para que puedan piratearlo y robar información. El uso de Gatsby WordPress juntos le dará el mismo poder de la gestión de contenido de WordPress y la velocidad del Gatsby. En este artículo, veremos qué es Gatsby y por qué necesita usarlo con el software CMS. Luego, entraremos en detalles sobre cómo usar WordPress y Gatsby juntos para construir una experiencia de sitio web increíble. ¡Empecemos!
¿Qué es Gatsby?
Gatsby es un generador de sitios estático. Esto significa que Gatsby genera los archivos HTML estáticos que se cargan al servidor de su sitio web. Cuando un visitante aterriza en su sitio, estos archivos estáticos se sirven a su navegador, en lugar del contenido dinámico que WordPress generalmente sirve. Es un marco de código abierto y gratuito basado en React que ayuda a los desarrolladores a construir sitios web y aplicaciones de rápido rápido.
Pros y contras de usar WordPress y Gatsby
Según el funcionario [documentos] de Gatsby 5, han compilado una mesa, para quien la combinación de Gatsby WordPress es grande y para quien no lo es. En aras de la facilidad, los estoy enumerando aquí. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress y Gatsby son geniales para {{LINE_27}} {{LINE_28}} {{LINE_29}} Equipos de contenido que se sienten cómodos con la experiencia de edición de contenido de WordPress {{LINE_31}} {{LINE_32}} Equipos de desarrollo que valoran el uso de tecnologías populares de código abierto {{LINE_34}} {{LINE_35}} Rediseños de sitios con contenido ya almacenado en WordPress {{LINE_37}} {{LINE_38}} Equipos que desean ser dueños de sus datos y pila de tecnología {{LINE_40}} {{LINE_41}} Flujos de trabajo de control de acceso complejo o restricciones de modelado de contenido {{LINE_43}} {{LINE_44}} Proyectos donde la seguridad es importante {{LINE_46}} {{LINE_47}} Proyectos de alta demanda donde el rendimiento es primordial {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress y Gatsby no son geniales para {{LINE_55}} {{LINE_56}} {{LINE_57}} Equipos que requieren el uso de temas de ui de WordPress {{LINE_59}} {{LINE_60}} Aquellos que buscan un CMS en la nube totalmente administrado {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Además de estos puntos oficiales, me gustaría enumerar algunos pros y contras de usar Gatsby WordPress juntos {{LINE_67}} {{LINE_68}} {{LINE_69}} Pros {{LINE_71}} {{LINE_72}} {{LINE_73}} Velocidades de carga más rápidas: los sitios web estáticos se cargan más rápido que la dinámica. Como resultado, afecta su página Carga velocidades y clasificación SEO. {{LINE_75}} {{LINE_76}} Menos costos del servidor: dado que los archivos estáticos no necesitan software especiales, por lo tanto, las páginas HTML estáticas también se pueden servir desde servidores más baratos. {{LINE_78}} {{LINE_79}} Más seguro: para los sitios estáticos, no hay componentes móviles de piezas, por lo tanto, no hay posibilidades para que los piratas informáticos exploten su software. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Contras {{LINE_89}} {{LINE_90}} {{LINE_91}} Curva de aprendizaje: requiere habilidades adicionales para los desarrolladores. Como aprender reactjs y graphql {{LINE_93}} {{LINE_94}} Solo contenido estático: si necesita servir cualquier contenido dinámico. Entonces Gatsby no es para ti. Solo puede servir archivos estáticos. Por lo tanto, no puede tener ningún sistema de comentarios que obtenga los datos de la base de datos. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}
Cómo usar Gatsby con WordPress
Antes de que pueda instalar Gatsby, debe instalar NodeJS y NPM en el entorno de su sitio web.
Paso 1 - Instale Gatsby
npm install -g gatsby-cli
Este comando ejecuta el instalador automáticamente. Descarga e instala todas las dependencias antes de instalar Gatsby. Una vez que esté completo, puede comenzar a crear su primer sitio web de Gatsby.
gatsby new gatsby-site
Esto descargará la plantilla de inicio de Gatsby y la colocará en el Directorio/Gatsby-WordPress. Una vez que se completa la instalación, puede abrir la versión de desarrollo del sitio
gatsby develop
Ahora, en su navegador web, ingrese http: // localhost: 8000 y su plantilla predeterminada debe abrirse.
Paso 2 - Conecte Gatsby a WordPress
En esta sección de la Guía Gatsby WordPress, conectaremos este generador de sitios estáticos con WordPress. Tiene un sitio web estático básico, pero debe integrarlo con WordPress. Esto apunta a su sitio de Gatsby a la dirección de su blog de WordPress, lo que le permite extraer los últimos datos cuando ejecuta el servidor de desarrollo. Una vez conectado, Gatsby construirá un sitio web estático basado en su plantilla actual. Instale el complemento Gatsby Source WordPress desde el repositorio NPM.
npm install gatsby-source-wordpress
Paso 3 - Configurar Gatsby
Coloque el siguiente código en su archivo gatsby-config.js
module.exports = {
...
plugins: [
...,
{
resolve: `gatsby-source-wordpress`,
options: {
// your WordPress source
baseurl: `wpexample.com`,
aliases: - `wpexample.com`,
protocol: `https`,
// is it hosted on wordpress.com, or self-hosted?
hostingWPCOM: false,
// does your site use the Advanced Custom Fields Plugin?
useACF: false
}
},
]
}
Actualice este código para señalar a su sitio web de WordPress. Si su sitio web está alojado localmente, después de BaseURL puede usar localhost: 8888/WordPress en lugar de la URL de su sitio web. Después de guardar el archivo, deberá construir sus plantillas de página.
Paso 4 - Construir plantillas de página
Las plantillas de la página de construcción permiten que este generador de sitios genere una publicación para cada página de su sitio web de WordPress. El complemento de origen extraerá los datos que necesita de WordPress para estas páginas, pero deberá crear la plantilla de diseño. En su archivo gatsby-node.js, agregue el siguiente código
const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
// query content for WordPress posts
const result = await graphql(`
query {
allWordpressPost {
edges {
node {
id
slug
}
}
}
}
`)
const postTemplate = path.resolve(`./src/templates/post.js`)
result.data.allWordpressPost.edges.forEach(edge => {
createPage({
// will be the url for the page
path: edge.node.slug,
// specify the component template of your choice
component: slash(postTemplate),
// In the ^template's GraphQL query, 'id' will be available
// as a GraphQL variable to query for this posts's data.
context: {
id: edge.node.id,
},
})
})
}
Después de llamar a todos los datos, Gatsby generará una página para cada publicación. Usando el comando Desarrollar, puede navegar a cada nueva página utilizando la URL generada.
Conclusión
En este tutorial de Gatsby WordPress, cubrimos cómo generar un sitio web de Gatsby de WordPress. Aprendimos cuáles son los pros y los contras de estos dos software de código abierto. También cubrimos cómo instalar y comenzar con el entorno de desarrollo de Gatsby. Finalmente, Contenerize.com está escribiendo artículos sobre otros productos de código abierto. Por lo tanto, manténgase en contacto con la categoría de plataforma de código abierto blogging para noticias y actualizaciones regulares.