Acceder al contenido principal

Gatsby, una herramienta eficaz para la creación de sitios estáticos con Drupal

Volver a Blog

Gatsby, una herramienta eficaz para la creación de sitios estáticos con Drupal

18 Dic 020
Gatsby Drupal
Miriam Uriarte Solucionex

GatsbyJS , GraphQL , Javascript ,

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:

 

 

Comentarios

Añadir nuevo comentario