Cómo construir un sitio de blogs con Gatsby

[dieciséis]

Para empezar, podemos tener un proyecto básico de Gatsby Scaffold para nosotros. Proporciona un servidor de desarrollo que podemos usar junto con algunas herramientas útiles de desarrolladores. Asegúrese de que el nodo y las NPM estén actualizadas y se ejecuten NPX Gatsby New Gatsby-Site En la línea de comandos, con "Gatsby-Site" siendo la carpeta para construir.

Dentro de esa carpeta, Gatsby proporciona algunos comandos como parte del proceso de inicialización. Ejecutar estos hará que la construcción sea mucho más fácil. Correr npm run desarrollar Para iniciar el servidor de desarrollo y ver cualquier actualización de cambios automáticamente en el navegador.

Todas las vidas de contenido dentro de la carpeta / SRC y cualquier archivo de configuración se prefijen con "Gatsby-" en la raíz del proyecto. Todo funciona a través de componentes, que no necesitan tener ninguna estructura o comportamiento adicional para ser pre-construido con Gatsby.

Los contenidos de la carpeta / SRC / Pages son especiales. Gatsby recogerá cualquier componente dentro de esa carpeta para crear una página. Abra el índice.js y borre los contenidos del componente. Observe que la página se actualiza en el navegador a medida que guardamos.

 Const IndexPage = () = & gt; (
  & lt; diseño & gt;
    {/* Vacío */}
  & lt; / LEYOUT & GT;
) 

Construir una página

Cada publicación de blog necesita su propia página. Es posible realizar un componente de página para cada nuevo post, pero esto crea una barrera para aquellos que no se utilizan para reaccionar y también requerirán más mantenimiento en el futuro como cambio de diseños.

Gatsby tiene una biblioteca llena de complementos listos para cambiar la forma en que genera páginas, que se pueden encontrar en gatsbyjs.org/plugins. Allí podemos encontrar dos tipos de plugin - 'Fuente' y 'Transformer'.

Un complemento de origen tomará datos de una fuente y los convertirá en 'Nodos', que es cómo Gatsby se ocupa de la información dentro de un sitio. Los datos pueden ser recuperados localmente para archivos como imágenes o de forma remota para datos externos, como una base de datos.

Un complemento de transformador puede tomar estos nodos y crear nuevos para facilitar las cosas para que Gatsby funcione. Por ejemplo, los archivos YAML no se pueden analizar de forma predeterminada, pero un complemento del transformador puede convertir la sintaxis anidada dentro de ellos en objetos para leer los componentes dentro.

Markdown es un formato común utilizado para el texto porque es versátil, fácil de leer y se puede convertir a HTML. El complemento de origen "Gatsby-Source-Filessystem" puede llevar archivos localmente y convertirlos a los nodos, mientras que el complemento de transformación "Gatsby-Transformer-Declare" usa el comentario para convertir la reducción en algo que podemos recoger y consultar con GraphQL.

El proyecto de inicio ya viene con el complemento de origen. Instale el otro ejecutando NPM Instale Gatsby-Transformer-comentario . Tenga en cuenta que es posible que el servidor de desarrollo deba reiniciarse para que se pueda recoger.

Configurar complementos

Con el complemento instalado, se debe decir Gatsby, se debe decir cómo usarlo. Toda la lógica se lleva a cabo dentro del archivo "gatsby-config.js" generado al inicio. Viene con algunos complementos ya configurados fuera de la caja, pero necesitamos agregar nuestra a la mezcla para poder recoger y usar el descontento.

Los complementos simples que no tienen un procedimiento de configuración se pueden agregar como cadenas. Como el complemento de transformación tiene solo un trabajo, no necesita configurar. Sin embargo, el plugin de origen tiene que ser dicho dónde encontrar las publicaciones. Agrégalos a la parte inferior de la matriz de plugins.

 Complementos: [
  [...]
  "Gatsby-Transformer-Declare",
  {
    Resuelve: `Gatsby-Source-Filesystem`,
    Opciones: {
      Nombre: `Páginas`,
      Ruta: `$ {__ __ dirname} / src / páginas`
    }
  }
] 

Debido a que cada publicación se convertirá en su propia página, tiene sentido agregarlos a la carpeta SRC / Páginas. Estas opciones de configuración están diciendo que Gatsby busque en esa carpeta y extraiga cualquier archivo.

Crea una publicación de blog

Con los complementos en su lugar, podemos crear nuestro primer post. Cree una carpeta llamada "My-First-Post" y agregue un archivo "my-first-post.md" en ello. Esta convención nos permite agregar cualquier archivo relacionado, como imágenes, junto con la publicación en sí.

Necesitamos agregar un poco de acuerdo a esta publicación, así que sepamos que está funcionando como se esperaba.

 ----
Ruta: / Post / My-First-Post
Fecha: 2018-12-01
RESUMEN: POST RESUMEN
Etiquetas: [mi, primero, post]
Título: Mi primer post
---
Este es mi primer post! 

El contenido entre los guiones en la parte superior del archivo se llama 'Frontmat'. Esto contendrá metadatos alrededor de la publicación que se está escribiendo, como la fecha y el título. Todos estos datos serán recogidos por comentario y se pueden consultar dentro de GraphQL.

La pieza crucial de la materia frontal en este caso es el camino valor. Aquí es donde vivirá el post y tendrá que ser único. Gatsby leerá el camino y hará una nueva página allí.

Antes de que podamos mostrar las publicaciones, necesitamos un componente de página para mostrar la publicación. Tendrá que poder tomar los valores como accesorios y mostrar el contenido como un bloque de HTML.

Cree un nuevo componente en "src / blogpost.js". La información sobre cada publicación pasará a través de un datos Prop de GraphQL.

 Importar reaccionar de 'reaccionar'
Importar {graphql} de 'Gatsby'
Casco de importación de 'react-casco'
Disposición de importación de '../components/layout'
exportar const blog = ({data: {markdowndremark}}) = & gt; {
  const {frontmatter, html} = MarkdownRemark
  regreso (
    & lt; diseño & gt;
      & lt; titulo de casco = {frontmatter.title} / & gt;
      & lt; div peligrosolysetinnerhtml = {{__html: html}} / & gt;
    & lt; / LEYOUT & GT;
  )
} 

El paquete "Casco de reacción", agrupado con Gatsby nos permite actualizar los valores que generalmente vivirían dentro de la & lt; cabeza y gt; de una página HTML. Aquí estamos estableciendo el título del post para ser el & lt; title & gt; de la página en sí. Hay muchas otras opciones que acepta, que puedes encontrar más sobre github.com/nfl/react-helmet .

Consulta para datos

En este punto, Gatsby no tiene datos que encienden esta página. Necesitamos recuperar datos de los archivos de descuento para rellenar esta información. Para hacer esto, podemos usar GraphQL, un idioma de consulta creado por Facebook que retiene los datos relevantes en los componentes de reacción. En resumen, GraphQL define la estructura que los datos se devolverán a través del uso de objetos anidados. De esa manera, solo consultaremos los datos que realmente estaremos usando.

Gatsby proporciona una función literal de plantilla que puede interpretar las consultas. Detectará cualquier uso y aprobará sus resultados como accesorios en el componente. Esto significa que podemos agregar la consulta dentro del mismo archivo y mantener la lógica relacionada.

 Exportar const PAGEQUERY = GraphQL`
  consulta ($ ruta: cadena!) {
    MarkdownRemark (Frontmatter: {Ruta: {EQ: $ PATH}}) {
      html
      Frontmatter {
        Fecha (FormatString: "Dmmm yyyy")
        título
      }
    }
  } `

Dentro de esta consulta, le pedimos a Gatsby por todos los nodos de Markdown con un camino que coincide con la página en la que estamos. Si encuentra uno, luego pasará el HTML, fecha y título renderizado en el componente.

Las consultas de escritura de esta manera se limitan solo a los componentes de la página. Cualquier otro componente que necesite una consulta para los nodos debe usar & lt; staticquery & gt; y cargarlo por delante. En este punto, el servidor de desarrollo puede advertir sobre esto para el Entrada en el blog El componente, pero esto se debe a que no es consciente, se convertirá en un componente de página todavía. Vamos a cambiar eso.

Generar páginas

De forma predeterminada, Gatsby solo hace páginas para componentes dentro de / src / páginas , lo que significa que necesitamos crear páginas de alguna otra manera.

Gatsby expone algunos métodos de su proceso de compilación para ayudar a acceder a los nodos de datos. Se puede acceder a estos a través de "gatsby-node.js" en la raíz del proyecto. En este caso, usaremos GraphQL para buscar todas las publicaciones de blogs y dejaremos que la createpages La devolución de llamada genera una página para cada uno. Como esta es una acción asíncrona, debemos devolver una promesa para que Gatsby pueda continuar con el proceso de compilación.

 Const Rath = Requerir ('ruta')
exports.createpages = ({acciones, graphql}) = & gt; {
  devuelve graphql (`
    {
      allmarkdownRemark {
        bordes {
          nodo {
            Frontmatter {
              camino
            }
          }
        }
      }
    }
  ')
} 

La primera parte de la devolución de llamada es una consulta que obtiene la ruta para cada publicación, ya que cada página individual obtendrá sus propios datos. La llamada GraphQL devuelve una promesa que contendrá todas las publicaciones. Podemos usar los datos de que para generar algunas páginas.

 .Ten (resultado = & gt; {
  Si (resultado.errors) {
    Promesa de retorno. Reject (resultado.Errores)
  }
  const blogposttemplate = ruta.resolve ('src / componentes / blogpost.js')
  Resultados.Data.AllmarkdownRemark.edges.Foreach (({nodo}) = & gt; {
    acciones.createpage ({
      Ruta: nodo.frontmatter.Path,
      Componente: blogposttemplate,
    })
  })
}) 

Si la consulta encuentra un error, detenga el proceso de compilación para averiguar por qué. Si todo está bien, busca el componente hecho y llame al Crear página Método para generar una página en la ruta proporcionada.

Con las páginas que generan, todo lo que se necesita ahora es una forma de encontrarlas. Podemos usar una consulta en el componente de la página de índice existente para hacerlo.

 Exportar const PAGEQUERY = GraphQL`
  consulta {
    allmarkdownRemark (Ordenar: {Fields: [Frontmatter___Date], Orden: Desc}) {
      bordes {
        nodo {
          Frontmatter {
            camino
            título
          }
        }
      }
    }
  }
`; 

En esta consulta, solo estamos interesados ​​en los títulos y el camino hacia la publicación. También pasamos algunos parámetros para observar las publicaciones más recientes en orden inverso. Esta consulta en particular está revisando la fecha desde la parte delantera en cada publicación. La sintaxis para cada consulta dependerá del complemento utilizado para generarlo.

Por último, el componente necesita actualización para hacer uso de los datos. El componente "enlace" suministrado por Gatsby le permite saber qué componentes necesita para representar ese enlace y se asegurará de que recupere los paquetes correctos en consecuencia.

 const indexpage = ({data}) = & gt; {
  regreso (
    & lt; diseño & gt;
      {Data.AllmarkDesRemark.edges.map (
        ({nodo: {frontmatter: {ruta, título}}}) = & gt; (
          & lt; Link Key = {ruta} a = {ruta} & gt;
            {título}
          & lt; / link & gt;
        )))}
    & lt; / LEYOUT & GT;
  )
} 

Con eso, nuestro blog está hecho. Todo lo que queda es detenerlo y hacer que Gatsby construya un sitio web listo para la producción. Mediante la ejecución npm ejecutar la construcción Puede derribar cualquier mejora utilizada para el desarrollo y generar paquetes listos para implementar. Una vez finalizado, la carpeta "Public" se puede cargar en cualquier lugar que pueda servir sitios estáticos. ¿Tienes archivos para almacenar para tu blog? Asegúrate de que estén seguros en Brillante almacenamiento en la nube .

Este artículo se publicó originalmente en el número 314 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Compre el problema 314 aquí o Suscríbete aquí .

Artículos relacionados:

• Los 16 Las mejores plataformas de blogs gratuitas.
• Usa WordPress como un CMS sin cabeza
• Cómo codificar más rápido, encendedor JavaScript