En los últimos años han aparecido muchos frameworks para la creación de páginas estáticas como: Jekill, Hugo o Gatsby del que hablaremos a continuación.
¿Por qué elegir Gatsby?
Gatsby es un framework para la creación de páginas estáticas basado en tecnologías modernas como ReactJs, GraphQL, Javascript ES6+ o SASS. Soporta multiples formatos de entrada de datos, siendo muy sencillo renderizar una página estática a partir de un CMS como Drupal, utilizando GraphQL para obtener los datos. Para ello, antes de comenzar, necesitamos instalar el modulo JSON:API que convertirá nuestro Drupal en un servidor API.
Las webs estáticas tienen ciertas ventajas interesantes para determinados proyectos:
- Facilidad para hospedarlas sin necesidad de disponer de un servidor que soporte bases de datos o lenguajes de servidor.
- Tienen un mejor rendimiento, además, la rapidez de carga de las páginas estáticas redunda en un mejor posicionamiento.
Instalación de Gatsby
Para crear un proyecto con Gatsby necesitamos tener instalado nodeJS y Git, antes de proceder a la instalación del framework. Una vez preparado el entorno, procederemos a instalar tanto las dependencias como el propio Gatsby:
npm install -g gatsby-cli
Posteriormente crearemos un nuevo proyecto y levantaremos la versión de desarrollo para poder acceder a él desde desde http://localhost:8000:
gatsby new sitename cd sitename gatsby develop
Gatsby + Drupal. Obteniendo los datos.
Para comenzar con la integración entre Gatsby y Drupal tenemos que instalar un plugin Gatsby-source-drupal que nos permitirá acceder a la API de Drupal:
npm install gatsby-source-drupal
Para utilizarlo añadiremos el siguiente código al archivo gatsby-config.js:
module.exports = {
plugins: [
{
resolve: `gatsby-source-drupal`,
options: {
baseUrl: `http://url-example.com`,
apiBase: `api`, // opcional
},
},
],
}
Ahora ya podemos acceder al contenido de Drupal y vamos a consultar con GraphQL todos los artículos y traernos su título y su fecha de creación. Incluiremos en gatsby-node.js el siguiente código:
QueryArticles{
allArticles {
edges {
node {
id
title
created(formatString: "DD-MM-YYYY")
}
}
}
}
Solo queda mostrar estos datos en la plantilla de la página articles.js dentro del directorio pages:
const Articles = ({ data }) => (
<Layout>
<Container>
<h1>Artículos</h1>
<ul>
{data.articles.edges.map(({ node }) => (
<li>{node.title} <span> - {node.created}</span></li>
))}
</ul>
</Container>
</Layout>
)
export const query = graphql`
query {
allArticles {
edges {
node {
id
title
created
}
}
}
}
Con esto tenemos una pequeña aproximación al uso combinado de Drupal y Gatsby, para más información podéis acceder a la documentación oficial de Gatsby:
