Cómo construir un blog con React y Gatsby en unos 10 minutos

Amigos / Foto de Genevieve Perron-Migneron en Unsplash
Descargo de responsabilidad: esto se escribió para Gatsby Versión 1, la versión 2 se acaba de lanzar y se han realizado algunos cambios. Trabajaré en otro tutorial para eso.

Gatsby es un generador de sitios estáticos increíblemente rápido basado en ReactJS.

Un generador de sitio estático (SSG) es un compromiso entre un sitio estático HTML codificado y un CMS (Sistema de gestión de contenido) completo, como Wordpress.

Se puede usar un SSG para generar páginas HTML para sitios web basados ​​en contenido (como blogs). Todo lo que requiere son datos para el contenido de la página y la plantilla para llenar con contenido.

Esta publicación se dividirá en cinco secciones:

  1. Empezando.
  2. Creación de componentes de diseño.
  3. Crear publicaciones de blog.
  4. Generando nuevas páginas a partir de datos de publicaciones de blog.
  5. Cree una lista de los archivos de rebajas de nuestro sitio en la página de destino.

Profundizaremos en Gatsby y algunas de sus características creando un blog estático imaginario llamado CodeStack. La maqueta se muestra a continuación. ¡Vamonos! ️

Una página de listado de blog / Una sola publicación de blog

1. Comenzando

Prerrequisitos

Primero, asegúrese de tener Node.js instalado en su sistema. Si no, vaya a nodejs.org e instale una versión reciente para su sistema operativo.

Además, este artículo asume que tienes una comprensión de ReactJS.

Instale la CLI

Gatsby tiene una herramienta de línea de comandos que proporciona comandos útiles como:

  • gatsby new: para andamiaje de un nuevo proyecto Gatsby.
  • gatsby desarrollo: para lanzar un servidor de desarrollo web habilitado para recarga en caliente.
  • gatsby build: para construir una versión del proyecto lista para producción.

Para instalar, escriba lo siguiente en su terminal y presione enter:

npm install --global gatsby-cli

Creemos una carpeta de proyecto codestack-blog y naveguemos por la terminal.

gatsby nuevo codestack-blog && cd $ _

Si ejecuta gatsby desarrollo en la carpeta del proyecto, el sitio scaffolded debería verse así:

Agregar complementos

Gatsby tiene un conjunto grande y creciente de complementos. Son esencialmente paquetes Node.js que interactúan con las API de Gatsby.

Se pueden instalar a través de NPM (Node Package Manager) en el terminal, y generalmente tienen tres categorías: funcional, fuente y complementos de transformador.

Complementos funcionales

Estos complementos proporcionan una funcionalidad adicional en un sitio de Gatsby o en su entorno de desarrollo. Para nuestra aplicación, necesitaremos:

  • gatsby-plugin-react-casco: permite modificar las etiquetas de la cabeza. Tenga en cuenta que ya está instalado en nuestro proyecto scaffolded.
  • gatsby-plugin-catch-links: intercepta enlaces locales de markdown y otras páginas que no reaccionan, y hace un pushState del lado del cliente para evitar que el navegador tenga que actualizar la página.

Instale los complementos, o solo el segundo complemento.

npm instalar gatsby-plugin-react-casco gatsby-plugin-catch-links

Cada vez que agreguemos un nuevo complemento, necesitamos actualizar el archivo gatsby-config.js con el nuevo complemento para que Gatsby lo reconozca y lo use. Utilizamos back ticks.

module.exports = {
  siteMetadata: {
    título: `Gatsby Default Starter`,
  },
  complementos: [
    `gatsby-plugin-react-casco`,
    `gatsby-plugin-catch-links`,
  ],
}

Complementos de origen

Estos complementos "originan" datos de ubicaciones remotas o locales en lo que Gatsby llama nodos. Para escribir nuestras publicaciones en Markdown en nuestro disco local, necesitamos:

  • gatsby-source-filesystem: obtiene datos sobre los archivos del sistema de archivos de su computadora.
npm install gatsby-source-filesystem

Actualice el archivo gatsby-config.js:

module.exports = {
  siteMetadata: {
    título: `Gatsby Default Starter`,
  },
  complementos: [
    `gatsby-plugin-react-casco`,
    `gatsby-plugin-catch-links`,
    {
      resolver: `gatsby-source-filesystem`,
      opciones: {
        ruta: `$ {__ dirname} / src / pages`,
        nombre: 'páginas',
      },
    }
  ],
}

¿Que está pasando aqui? Se puede pasar un objeto de opciones a un complemento para obtener más configuración. Estamos pasando la ruta del sistema de archivos (es decir, dónde se ubicarán nuestros archivos Markdown), y luego un nombre para los archivos fuente, de modo que Gatsby sepa sobre nuestros archivos fuente y dónde aplicar los complementos del transformador.

Complementos de transformador

Estos complementos transforman los datos sin procesar de los nodos en formatos de datos utilizables. Por ejemplo, necesitaremos:

  • comentario gatsby-transformer: esto transforma las publicaciones de blog escritas en archivos Markdown .md en el disco local en HTML para renderizar.
npm install gatsby-transformer-comment

Actualice el archivo gatsby-config.js nuevamente.

module.exports = {
  siteMetadata: {
    título: `Gatsby Default Starter`,
  },
  complementos: [
    `gatsby-plugin-react-casco`,
    `gatsby-plugin-catch-links`,
    {
      resolver: `gatsby-source-filesystem`,
      opciones: {
        ruta: `$ {__ dirname} / src / pages`,
        nombre: 'páginas',
      },
    },
    `gatsby-transformer-comment`,
  ],
}
¡Bien hecho! / Crédito: Nigel Payne

2. Crear componentes de diseño

Gatsby le permite crear fácilmente "componentes de diseño". Los componentes de diseño son secciones de su sitio que desea compartir en varias páginas. Para el blog que estamos creando, estos son el encabezado y las barras laterales.

Desde la carpeta raíz, eche un vistazo a src / layouts. Descubrirá un archivo index.js donde definimos componentes de diseño. index.css ya viene con estilos.

Después de explorar el archivo index.js, verá que ya se han creado dos componentes: Encabezado y TemplateWrapper. En TemplateWrapper, envolvemos el contenido de nuestro sitio con componentes de diseño que queremos que estén presentes en varias páginas.

Esto es posible gracias a los accesorios para niños (). Representará todos los componentes que no sean de diseño de nuestro sitio donde se ubica. Tenga en cuenta que, a diferencia de React child props, el accesorio secundario que se pasa a los componentes del diseño es una función y debe ejecutarse.

En primer lugar, cree una nueva carpeta y un archivo CSS en src / styles / layout-overide.css. Agregar a la lista de importaciones en el archivo index.js. Necesitamos importarlo después de index.css para anular algunas reglas de estilo existentes.

importar Reaccionar desde 'reaccionar'
importar PropTypes desde 'prop-types'
Importar enlace desde 'gatsby-link'
Importar casco de 'react-casco'
importar './index.css'
importar "../styles/layout-overide.css";

Abra layout-overide.css y pegue las siguientes reglas de estilos. No hay necesidad de resolver esto.

* {
    fondo: # f5f5f5;
    de color negro;
}
html {
    altura: 100%;
}
cuerpo {
    altura: 100%;
    borde: 5px sólido # ffdb3a;
}
h1 {
    tamaño de fuente: 1.5rem;
    altura de línea: 0.5rem;
}
p, div {
    tamaño de fuente: 16px;
}

Actualice el componente del encabezado.

const Encabezado = () => (
  
    
     

                   CodeStack                

    
  
);

Además, cree un componente de barra lateral.

barra lateral const = (accesorios) => (
     {props.title}. {props.description}
);

Deseamos que la barra lateral y los componentes representados {children ()} se comporten de una manera receptiva como esta:

Como no hay una manera fácil de definir consultas de medios en React, encontré una biblioteca llamada react-media, un componente de consulta de medios CSS para React. Instalarlo.

npm install --save react-media

Proporciona un componente que escucha las coincidencias con una consulta de medios CSS y procesa cosas en función de si la consulta coincide o no.

Agréguelo a la lista de importaciones en nuestro archivo.

importar medios desde 'react-media'

Permite diseñar todo en (encabezado, barra lateral y componentes secundarios ()) de la manera que deseamos en TemplateWrapper. Haz los siguientes cambios (perdón por el descarado tapón de mi nombre):

const TemplateWrapper = ({children}) => (
  
              
               {coincidencias =>           partidos ? (             
              
{children ()}
            
          ): (             
              
                {niños()}               
                                                
            
          )         }            
  
);¡Lo tienes!  / Crédito: Levon

¿Qué está pasando en ese bloque de código monolítico? React media está utilizando una operación ternaria para determinar qué renderizar en función de un ancho máximo de 848px. Cuando la pantalla coincide con el ancho, solo se representan los componentes Header y children ().


        {coincidencias =>
          partidos ? (
            ... cosas para renderizar ...
          ): (
            ... cosas para renderizar ...
          )
        }
      
Un repaso ternario. Si la condición es verdadera, el operador devuelve el valor de expr1; de lo contrario, devuelve el valor de expr2.

Si se dio cuenta, también utilizamos Flexbox para diseñar las posiciones de los componentes secundarios () y de la barra lateral.

Ejecute gatsby desarrollo en la terminal y nuestro blog estático debería verse así ahora:

Tomando forma

3. Crear publicaciones de blog

Ahora vamos a crear publicaciones de blog reales. Gatsby utiliza GraphQL para obtener datos de una o varias fuentes, como su disco local, API de Wordpress, etc.

Personalmente, me gusta el hecho de que puedo crear un blog estático y obtener contenido de una API de WordPress. Mi cliente tiene acceso al Editor de Wordpress donde crea publicaciones, y evito lidiar con todas las molestias de desarrollar un sitio de Wordpress.

En esta publicación, cargaremos los datos de los archivos Markdown que crearemos en nuestro disco local. El complemento gatsby-source-filesystem que configuramos anteriormente espera que nuestro contenido esté en src / pages, ¡así que ahí es exactamente donde lo pondremos!

Una práctica típica para las publicaciones de blog es nombrar la carpeta de forma similar a MM-DD-AAAA-título. Puede nombrarlo como desee o simplemente colocar un archivo de rebajas dentro de la carpeta / pages.

Creemos una carpeta src / pages / 12–22–2017-first-post, y coloquemos un index.md dentro. Escribir:

---
ruta: "/ hello-world"
fecha: "2017-07-12T17: 12: 33.962Z"
título: "Mi primer mensaje de Gatsby"
---
Oooooh-weeee, mi primera publicación de blog!
El primer post de Ipsum es una clave importante para el éxito. Felicidades, jugaste tú mismo. Rodéate de ángeles. Celebra el éxito correctamente, la única forma, manzana.
 
La clave es beber coco, coco fresco, confía en mí. Claras de huevo, salchichas de pavo, tostadas de trigo, agua. Por supuesto, no quieren que comamos nuestro desayuno, así que vamos a disfrutar nuestro desayuno.

El bloque rodeado de guiones se denomina frontmatter. Los datos que especificamos aquí, así como otros archivos de Markdown, serán reconocidos por el complemento gatsby-transformer-comment.

El complemento convertirá la parte de metadatos de frontmatter de su archivo markdown a frontmatter y la parte de contenido (¡Yippeeee, mi primera publicación de blog!) A HTML.

Cuando comencemos a generar páginas de blog directamente a partir de archivos de descuento en la sección 4 (siguiente sección), la ruta se utilizará para especificar la ruta URL para representar el archivo. Por ejemplo, el archivo de descuento anterior se representará en localhost: 8000 / hello-world.

Antes de eso, creemos una plantilla que represente cualquier archivo de descuento en su propia página de blog. Cree el archivo src / templates / blog-post.js (cree la carpeta src / templates).

importar Reaccionar desde "reaccionar";
importar casco de "react-casco";
Exportar plantilla de función predeterminada ({
  datos
}) {
  const post = data.markdownRemark;
  regreso (
    
            
        

{post.frontmatter.title}

        
      
    
  ); }

Hemos configurado el componente Plantilla para recibir un objeto de datos que vendrá de la consulta GraphQL que estamos a punto de escribir.

Una vez más, la consulta GraphQL es necesaria para obtener datos en el componente. Gatsby inyecta el resultado de la consulta en el componente Plantilla como datos y markdownRemark.

Encontraremos que la propiedad markdownRemark contiene todos los detalles del archivo Markdown.

Ahora hagamos realmente la consulta. Debe colocarse debajo del componente Plantilla:

export const pageQuery = graphql`
  consulta BlogPostByPath ($ path: String!) {
    markdownRemark (frontmatter: {ruta: {eq: $ ruta}}) {
      html
      frontmatter {
        date (formatString: "MMMM DD, AAAA")
        camino
        título
      }
    }
  }
``
;

Si no está familiarizado con GraphQL, intentaré desglosar lo que está sucediendo aquí. Para obtener más información sobre GraphQL, considere este excelente recurso.

GraphQL es solo la idea de Facebook de un cierto tipo de servidor. Han escrito una especificación sobre el tipo de solicitudes que se pueden enviar a ese servidor y cómo debe responder el servidor. La API de GraphQL es mejor que REST, porque usted describe los datos exactos que necesita el lado del cliente para que no haya más datos de baja o excesiva recuperación.

Esto significa que debe crear su propio servidor GraphQL. Afortunadamente para nosotros, GatsbyJS viene con su propio servidor GraphQL listo para usar.

En el código anterior, BlogPostByPath es la consulta subyacente que dará como resultado la devolución de una publicación de blog. Se devolverá como datos para inyección en el componente Plantilla.

Pasamos BlogPostByPath el argumento $ path para devolver una publicación de blog relacionada con la ruta que estamos viendo actualmente.

Además, recordar markdownRemark transformó nuestros archivos de descuento. Se tratará como una propiedad cuyo contenido estará disponible a través de data.markdownRemark.

Podríamos acceder al HTML a través de data.markdownRemark.html. Además, se puede acceder al contenido de frontmatter que creamos con un bloque de dahes a través de data.markdownRemark.title, etc.

Todo el blog-template.js debería verse así:

importar Reaccionar desde "reaccionar";
importar casco de "react-casco";
Exportar plantilla de función predeterminada ({
  datos
}) {
  const post = data.markdownRemark;
  regreso (
    
            
        

{post.frontmatter.title}

        
      
    
  ); }
export const pageQuery = graphql`
  consulta BlogPostByPath ($ path: String!) {
    markdownRemark (frontmatter: {ruta: {eq: $ ruta}}) {
      html
      frontmatter {
        date (formatString: "MMMM DD, AAAA")
        camino
        título
      }
    }
  }
``
;

En este punto:

¡Dulce!

4. Generar nuevas páginas a partir de datos de publicaciones de blog.

Gatsby proporciona una API de nodo, que proporciona funcionalidad para crear páginas dinámicas a partir de publicaciones de blog. Esta API está expuesta en el archivo gatsby-node.js en el directorio raíz de su proyecto. Este archivo podría exportar varias API de nodo, pero estamos interesados ​​en la API createPages.

Utilice el siguiente bloque de fragmento de código según se proporciona en los documentos oficiales (tenga en cuenta que la ruta blogPostTemplate se configuró para reflejar la nuestra):

const path = require ('ruta');
exportaciones.createPages = ({boundActionCreators, graphql}) => {
  const {createPage} = boundActionCreators;
const blogPostTemplate = path.resolve (`src / templates / blog-post.js`);
return graphql (`{
    allMarkdownRemark (
      sort: {order: DESC, fields: [frontmatter___date]}
      límite: 1000
    ) {
      bordes {
        nodo {
          extracto (ciruelaLongitud: 250)
          html
          carné de identidad
          frontmatter {
            fecha
            camino
            título
          }
        }
      }
    }
  } `)
    .then (resultado => {
      if (result.errors) {
        return Promise.reject (result.errors);
      }
result.data.allMarkdownRemark.edges
        .forEach (({node}) => {
          Crear página({
            ruta de acceso: node.frontmatter.path,
            componente: blogPostTemplate,
            contexto: {} // se pueden pasar datos adicionales a través del contexto
          });
        });
    });
}

Comprueba si funciona. Recomiendo cerrar la ventana de Broswer, deteniendo el servidor de desarrollo Gatsby desde la terminal usando Ctrl c. Ahora ejecute gatsby desarrollo nuevamente y abra http: // localhost: 8000 / hello-world.

sí

Cree otro archivo src / pages / 24–12–2017-learning-grid / index.md

---
ruta: "/ otro-uno"
fecha: "2017-07-12T17: 12: 33.962Z"
título: "Mi segundo mensaje de Gatsby"
---
En la vida habrá obstáculos, pero lo superaremos. Alerta especial de tela. Nunca juegues tú mismo. La clave para tener más éxito es recibir un masaje una vez a la semana, muy importante, clave principal, charla de tela.
  // algún código de cuadrícula CSS  

Nuevamente, cierre la ventana de Broswer, detenga el servidor de desarrollo de Gatsby. Ejecute gatsby desarrollo nuevamente y abra http: // localhost: 8000 / another-one. Esto es mostrado:

Continúe si lo desea y cree sus propias páginas.

5. Cree una lista de los archivos de rebajas de nuestro sitio en la página de destino.

La página de destino predeterminada que viene con el sitio Gatsby scaffolded se encuentra en src / pages / index.js. Aquí es donde definiríamos una plantilla y haríamos una consulta para inyectarla con datos para la lista de archivos .md. Hacer esto:

importar Reaccionar desde "reaccionar";
importar enlace desde "gatsby-link";
importar casco de "react-casco";
importar '../styles/blog-listing.css';
Índice de función predeterminada de exportación ({datos}) {
  const {edge: posts} = data.allMarkdownRemark;
  regreso (
    
      {publicaciones         .filter (post => post.node.frontmatter.title.length> 0)         .map (({nodo: post}) => {           regreso (             
              

                 {post.frontmatter.title}               

              

{post.frontmatter.date}

              

{post.excerpt}

            
          );         })}     
  ); }
export const pageQuery = graphql`
  consulta IndexQuery {
    allMarkdownRemark (ordenar: {orden: DESC, campos: [frontmatter___date]}) {
      bordes {
        nodo {
          extracto (ciruelaLongitud: 250)
          carné de identidad
          frontmatter {
            título
            date (formatString: "MMMM DD, AAAA")
            camino
          }
        }
      }
    }
  }
`;

Confío en que eres rudo en este momento y ya estás familiarizado con lo que está sucediendo. Tenga en cuenta que escribimos una importación anterior que no existe. Ahora cree el archivo /styles/blog-listing.css:

div.blog-post-preview {
    borde inferior: 2px sólido # e6e6e6;
    relleno superior: 1rem;
    acolchado inferior: 1rem;
    margen inferior: 1rem;
}
h1> * {
    tamaño de fuente: 1.2rem;
    línea de decoración de texto: ninguno;
}
h2 {
    tamaño de fuente: 0.8rem! importante;
    peso de fuente: 100! importante;
}

Reinicie el servidor, visite la página de inicio y debería ver la lista en funcionamiento:

Conclusión

Hemos llegado al final de este tutorial. Gracias por leer hasta ahora.

Esta publicación es solo la punta del iceberg considerando la cantidad de cosas que podrías hacer con Gatsby. Siéntase libre de explorar cómo podría implementar:

Puede obtener el código fuente final aquí. Siéntase libre de apoyarme (devapparel.co) y verse bien mientras lo hace. Además, comenta o comparte esta publicación. ¡Gracias por leer!

PD: Estoy trabajando en un libro de React con Ohans Emmanuel que te haría dominar React mediante la construcción de 30 proyectos pequeños en 30 días. Si desea mantenerse actualizado sobre esto, únase a la lista de correo. ¡Gracias!

Ver también

Cómo actuar en una primera citaNo te diré cómo perder peso pero ...Cómo exportar toda la cadena de bloques de Ethereum a CSV en 2 horas por $ 10Lifehack: cómo obtener R / m (casi) gratisCómo proteger y desarrollar a sus hijos al mismo tiempo